MVC-Html.Action使用Java腳本檢索元素，然后將其作為參數傳遞給Controller，然后返回PartialView

Question

視圖-我的視圖具有一個模態，該模態具有一個@Html.Action ，它調用Controller的PartialViewResult 。 注意， @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：當我使用PartialView在Controller返回PartialViewResult ，誰將在View接收並顯示它？ 我運行了代碼，但是什么也沒有顯示。 我想我仍然在View缺少代碼以在Controller接收返回的PartialView

Answer 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類模態鏈接的鏈接。 鏈接的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部分視圖中包括模態頁眉和頁腳 （帶有按鈕） 所需的必要標記 。

Answer 2

A＃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有效，則應嘗試。