如何在MVC中只發布串列中的選定專案 -有解無憂

我們有一個系結在視圖上的串列

我們有一個系結在視圖上的串列。

@model List<DataModels.UseCase>

這個視圖包含HTML表單，因為

@using (Html.BeginForm()
{
    for (int i = 0; i < Model.Count(); i  )
    {
        @Html.CheckBoxFor(m => Model[i].IsSelected)
        //few other controls as .
    }
    <input type="submit" value="提交選擇" >
}

而在控制器中，POST方法如下所示

 [HttpPost]
    public ActionResult payment([Bind(Include = "Id,IsSelected// few other properties">) ] List<UseCase> useCases)。
    {
        //少數商業邏輯。
        return View()。
    }

請注意- 我只是舉例說明了表單上只有復選框控制元件，還有其他一些控制元件。

現在，在這種情況下，例如視圖包含10條記錄，但在10條記錄中只有2條被選中，那么我們只需要將2條選中的記錄傳遞給POST方法，而不是全部10條。這是為了減少POST方法的過載。

我們能否以任何方式實作這種型別的場景？

uj5u.com熱心網友回復：

好問題，我可能也會在我的專案中實施這個問題。

我只能想到一種方法--使用javascript，當表單被提交時，先洗掉其他表單輸入欄位，然后重新提交表單。

首先，我們需要將輸入欄位放在一個帶有input-container類的父div內，這樣我們就可以通過洗掉整個div來快速洗掉所有欄位。我還為你的輸入欄位添加了一個targetCheckbox類，所以我們可以為它附加一個事件；

@using (Html.BeginForm()
{
    for (int i = 0; i < Model.Count(); i  )
    {
       <div class="input-group">
           @Html.CheckBoxFor(m => Model[i].IsSelected, new { @class="targetCheckbox"/span> })
           //few other controls as .
        <div class="input-group">
    }
    <input type="submit" value="提交選擇" >
}

我們需要為你的表單系結一個事件。在表單提交時，我們需要識別哪些targetCheckbox沒有被選中，然后洗掉包含它們的div。我們還需要替換輸入欄位的索引，因為ASP.NET MVC的模型系結必須從0開始，而且不應該跳過。在所有這些之后，重新提交表單；

< script>
   $(document).ready(function(){
      $("form").submit(function(e){
         e.preventDefault()。

         var index = 0;
         //回圈瀏覽所有的復選框。
         $(".targetCheckbox").each(function(){
            if($(this).is(" :checked")){
               //獲得父級。
               var parent = $(this).closest(".input-container") 。

               //回圈瀏覽父類里面的所有輸入域。
               var inputFieldsInsideParent = $(parent).find(":input") 。

               //change the index inside the name attribute.
               $(inputFieldsInsideParent).each(function(){
                  var name = $(this).attr("name")。
                  var firstBracket = name.IndexOf("[") 。
                  var secondBracket = name.IndexOf("]") 。

                  if(firstBracket != null && secondBracket != null){
                     //檢查這是否是一個有效的輸入欄位來替換。

                     var newName = name.substring(0, firstBracket) index name.substring(secondBracket)。
                     //結果應該是IntputFieldName[newIndex].Property。

                     //指定新的名稱。
                     $(this).attr("name",newName) 。
                  }
               });

               index  ;
            }else{
               //清空父類。
               $(this).closest(".input-container").html("") 。
            }
         });

         //提交表單。
         $(this).submit()。
      });


   });
</script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/320364.html

標籤：

上一篇：當欄位為空時，復選框過濾表

下一篇：如何使瀏覽器彈出默認用戶認證的提示？