如何發送模型集合到MVC控制器或使用javascript/jQuery查看

Question

我有一個控制器，它獲取一個模型作爲參數，但該模型具有另一個模型的集合。其他參數可以使用Form簡單發送，但模型的輸入字段是動態的，所以您可以使用javascript或jQuery添加它們。

所以我不知道的是，如何使用javascript將輸入的模型集合發送給控制器。

這是我在查看

<div> 
    <div class="row"> 
     <div class="col-xs-4 col-sm-6 "> 
      <div class="dropdown volledigeLengte verplicht-ruimte"> 
       <button class="form-control btn btn-default dropdown-toggle @dis" data-toggle="dropdown"> 
        verplichte velden toevoegen<i class="glyphicon glyphicon-chevron-down"></i> 
       </button> 
       <ul class="dropdown-menu volledigeLengte"> 
        <li><a href="#" class="text">Text <i class="glyphicon glyphicon-plus "></i></a> 
        <li><a href="#" class="foto">Foto <i class="glyphicon glyphicon-plus "></i></a> 
        <li><a href="#" class="kaart">Kaart <i class="glyphicon glyphicon-plus "></i></a> 
        <li><a href="#" class="video">Video <i class="glyphicon glyphicon-plus "></i></a> 
       </ul> 
      </div> 
      <div class="marging-top-voor-fields extraRuimtesVerplicht"> 
      </div> 
     </div> 
     <div class="col-xs-4 col-sm-6 "> 
      <div class="dropdown volledigeLengte niet-verplicht-ruimte"> 
       <button class="form-control btn btn-default dropdown-toggle @dis" data-toggle="dropdown"> 
        Niet verplichte velden toevoegen <i class="glyphicon glyphicon-chevron-down"></i> 
       </button> 
       <ul class="dropdown-menu volledigeLengte"> 
        <li><a href="#" class="text">Text <i class="glyphicon glyphicon-plus "></i></a> 
        <li><a href="#" class="foto">Foto <i class="glyphicon glyphicon-plus "></i></a> 
        <li><a href="#" class="kaart">Kaart <i class="glyphicon glyphicon-plus "></i></a> 
        <li><a href="#" class="video">Video <i class="glyphicon glyphicon-plus "></i></a> 
       </ul> 
      </div> 
      <div class="extraRuimtesNietVerplicht marging-top-voor-fields"> 
      </div> 
     </div> 
    </div> 
</div> 

這是我的JavaScript看起來像

(function ($) { 
    $(function() { 
     var aantalVerplicht = 0; 
     var aantalNietVerplicht = 0; 
     var matrix = []; 
     for (var i = 0; i < 9; i++) { 
      matrix[i] = []; 
      for (var j = 0; j < 9; j++) { 
       matrix[j] = new Array(9); 
      } 
     } 
     var extra; 
     var addRuimte = function (e, type) { 
      extra = null; 
      if ($(this).parents('div').hasClass("verplicht-ruimte")) { 
       extra = $(".extraRuimtesVerplicht"); 
      } 
      if ($(this).parents('div').hasClass("niet-verplicht-ruimte")) { 
       extra = $(".extraRuimtesNietVerplicht"); 
      } 
      if (extra != null) { 
       $(extra).append('<div id="maring-top-voor-fields"><input class="col-sm-10 form-control" placeholder="Geef de vraag" /><span class="input-group-btn remove_ruimte"><button class ="col-sm-2 form-control btn btn-danger "><i class="glyphicon glyphicon-minus"></i></button></span></div>'); 
      } 
     }; 
     var removeRuimte = function (e) { 
      e.preventDefault(); 
      $(this).parent('div').remove(); 
      i--; 
     }; 

     $(document).on('click', '.text', addRuimte("text")); 
     $(document).on('click', '.foto', addRuimte("foto")); 
     $(document).on('click', '.kaart', addRuimte("kaart")); 
     $(document).on('click', '.video', addRuimte("video")); 
     $('.extraRuimtesVerplicht').on('click', '.remove_ruimte', removeRuimte); 
     $('.extraRuimtesNietVerplicht').on('click', '.remove_ruimte', removeRuimte); 
    }); 
})(jQuery); 

這是什麼樣子

Answer 1

我解決了類似的問題，如下所示。

• 確保所有ID都是唯一的
• 使用表單標籤

以下JavaScript然後將表格內容服務器（我概括這包括對形式 - 原來的10工作形式）。

function SaveAllAsIs() { 
    // save section 5 summaries first 
    var form_section11Data = JSON.stringify($("#form_section11").formParams()); 
    var form_section11Data = JSON.stringify($("#form_section12").formParams()); 

    $.ajax({ 
     type: 'POST', 
     url: '/Area/DataSave/SaveAsIs', 
     data: JSON.stringify({ 
      form_section11: form_section11Data, 
      form_section12: form_section12Data 
     }), 
     dataType: "json", 
     contentType: "application/json; charset=utf-8", 
     success: function (data) { 
      if (data.Success == "False") { alert("Error saving data, please try later"); }    

     } 
    }); 
} 

控制器方法是這樣的：

public JsonResult SaveAsIs(string form_section11, string form_section12) 
{ 
    SerializeModel(new JavaScriptSerializer().Deserialize<IDictionary<string, object>> 
       (form_section11, targetModel1); 

    SerializeModel(new JavaScriptSerializer().Deserialize<IDictionary<string, object>> 
       (form_section12, targetModel2); 
} 

最後

public static void SerializePerinatalModel<T>(IDictionary<string, object> dataModel, T perinatalModel, int perinatalReportID) 
    { 
     Type sourceType = typeof(T); 

     foreach (PropertyInfo propInfo in (sourceType.GetProperties())) 
     { 
      if (dataModel.ContainsKey(propInfo.Name)) 

我只顯示部分功能，但本質上每種類型的檢查，看它是否名單，並且這樣列表就會被轉換。

Answer 2

其他參數可以簡單地使用Form發送，但模型的輸入字段是動態的，所以您可以使用JavaScript或jQuery添加它們。

斯科特Hanselman在傳遞數組到MVC控制結合的一些細節：http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx

基本上是：確保你的控件具有正確的名稱：使用列表

指數

雖然這並不直接處理動態字段，它顯示瞭如何完成。

取代：

$(extra).append('<div id="maring-top-voor-fields"><input class="col-sm-10 form-control" placeholder="Geef de vraag" /><span class="input-group-btn remove_ruimte"><button class ="col-sm-2 form-control btn btn-danger "><i class="glyphicon glyphicon-minus"></i></button></span></div>'); 

有：

var count = $("div#maring-top-voor-fields>input.col-sm-10.form-control").length; 
$(extra).append(' ... <input name="answer["+ count + 1+"]" class="col-sm-10 form-control" placeholder="Geef de vraag" /> ... '); 

警告：不能有在數字的任意空白 - 如果你還可以動態地刪除任何控件，那麼你就必須改變所有的名字重新索引他們（這不是很好tbh）。

有了這個，你可以保持你的控制器整潔IList<whatever>並讓框架爲你綁定它們。

或者，只需使用jquery！