javascript - MVC - Html.Action 使用 Javascript 检索元素，然后将其作为参数传递给 Controller，然后返回 PartialView

Question

View - 我的 View 有一个模态，它有一个 @Html.Action，它调用 Controller 中的 PartialViewResult。请注意，@Html.Action("RetrieveItemPrice", new { item_Id = 1 }) 仍然具有预定义的 item_Id。

Q#1:如何创建一个函数来获取元素的值并将其放入 item_Id 参数中，然后再将其发送到 Controller？可以将其插入到 @Html.Action 中吗？

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <div id="pvPrice" class="" style="border: 0px solid green; ">
                    @Html.Action("RetrieveItemPrice", new { item_Id = 1 })
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<table id="dbTable">
    <thead>
        <tr>
            <th class="hidden">
                @Html.DisplayNameFor(model => model.itemId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.itemName)
            </th>
        </tr>
    </thead>
    <tbody id="dbBody">
        @foreach (var item in Model.Items)
        {
            <tr>
                <td class="hidden">
                    @Html.DisplayFor(modelItem => item.itemid)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.itemname)
                </td>
            </tr>
        }
    </tbody>
</table>

Controller

public PartialViewResult RetrieveItemPrice(string item_Id)
{
    var prices = from ip in _odb.ITEM_PRICE_MSTR
                 join i in _odb.ITEM_MSTR on i.ITM_ID equals i.ITM_ID
                 select new ItemModel
                 {
                     itemid = i.ITM_ID,
                     itemname = i.ITM_DESC,
                     itemprice = ip.ITM_PRICE,
                     defaultflag = ip.DEFAULT_FL,
                     startdate = DbFunctions.TruncateTime(ip.START_DT),
                     enddate = DbFunctions.TruncateTime(ip.END_DT),
                     createddt = i.CREA_DT
                 };

    prices = prices.Where(i => i.itemid.ToLower().Contains(item_Id.ToLower()));
    prices = prices.OrderByDescending(i => i.itemprice);

    var vm = new ItemViewModel();
    vm.Items = prices.ToPagedList(pageNumber, pageSize);

    return PartialView("_ViewItemPrice", vm);
}

Q#2:当我使用 PartialViewResult 在 Controller 中返回 PartialView 时，谁将在 中接收并显示它查看？我运行了代码，但没有显示任何内容。我认为我仍然缺少 View 中的代码来接收 Controller

中返回的 PartialView

Answer 1

假设您有许多具有不同 item_Id 的项目，并且您希望在单击该项目时显示模式对话框。您应该监听元素上的单击事件，进行 ajax 调用并获取响应(部分 View 结果)并使用它来构建模式对话框内容。

假设你的主视图有这样的代码

<table>
@foreach (var item in Model.Items)
{
  <tr>
      <td>@item.itemname</td>
      <td><a href="@Url.Action("RetrieveItemPrice",new { item_Id = itemId})" 
                                                      class="modal-link" >@item.itemname</a>
       </td>
  </tr> 
} 
</table>
<!-- The below code is for the modal dialog -->
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
  <a href="#close" title="Close" class="modal-close-btn">X</a>
  <div class="modal-content">
      <div class="modal-body"></div>
</div>

这将为表中的每个项目生成带有 css 类 modal-link 的链接。链接的 href 值将类似于 YourControllerName/RetrieveItemPrice?item_id=123(123 将替换为实际的 itemid) 现在监听这些链接的点击事件，制作一个ajax 调用这些链接的 href 属性值，并使用响应来填充模式对话框内容。

$(function () {

     $('body').on('click', '.modal-link', function (e) {
         e.preventDefault();

         $("#modal-container").remove();
         $.get($(this).attr("href"), function (data) {
                 $('<div id="modal-container" class="modal fade">
                        <div class="modal-content" id="modalbody">' 
                                               + data + '</div></div>').modal();
         });
    });
});

此代码将用来自 RetrieveItemPrice 操作方法的部分 View 结果替换模态的全部内容。这意味着you need to include the necessary markup needed for the modal header and footer (带有按钮)在 _ViewItemPrice 部分 View 中。