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

时间:2016-10-05 03:24:10

标签: javascript asp.net-mvc bootstrap-modal partial-views

查看 - 我的观点有一个模式,@Html.Action调用PartialViewResult中的Controller。请注意@Html.Action("RetrieveItemPrice", new { item_Id = 1 })仍有预定义的item_Id

问题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>

控制器

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);
}

问题2:当我使用PartialViewController中返回PartialViewResult时,谁将接收并在View中显示?我运行了代码,但没有显示任何内容。我认为我仍然缺少View中的代码来接收PartialView中返回的Controller

2 个答案:

答案 0 :(得分:1)

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

假设您的主视图包含这样的代码

<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 )现在听取这些上的click事件,对这些的href属性值进行ajax调用链接并使用响应来填充模态对话框内容。

$(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操作方法的部分视图结果替换模态的整个内容。这意味着_ViewItemPrice局部视图中的you need to include the necessary markup needed for the modal header and footer(带按钮)。

答案 1 :(得分:1)

#1:代码调用@Html.Action在服务器端执行,在该阶段,html文档尚未发送到客户端,因此您不必寻找方法检索元素值。您可以将其直接传递给调用,因为用于呈现视图(包括元素)的模型应该可以被模式中的代码访问。

如果将模态标记放在视图中,您肯定可以获得@ Model.ItemId,例如。 如果将模态放在局部视图中,则可以通过ViewBag传递项目ID:

@Html.Partial("Modal", null, new ViewDataDictionary{{"ItemId", Model.ItemId}})

然后在模态标记中使用它:

@Html.Action("RetrieveItemPrice", new { item_Id = ViewBag.ItemId })

A#2:如果[ChildActionOnly]使行动RetrieveItemPrice有效,您应该尝试。