如何使用DataTables提交整個表單到MVC控制器操作使用數據表Ajax

我正在重新訪問一個問題，我很早就在一個頁面上包含了很多輸入，並在表單中選擇了控件。我更喜歡我的Controller Action使用視圖模型來確定輸入值，但模型的成員在提交時總是空的。這是我不希望的工作代碼，簡單：如何使用DataTables提交整個表單到MVC控制器操作使用數據表Ajax

視圖模型：

public class MyViewModel 
{ 
    [Display(Name = "Project Name")] 
    public string ProjectName { get; set; } 

    [Display(Name = "Project Country")] 
    public string ProjectCountry { get; set; } 
    public IEnumerable<SelectListItem> Countries { get; set; } 
}

Razor視圖：

@model My_Web_App.Models.MyViewModel 

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "myform" })) 
{ 
    @Html.AntiForgeryToken() 
    @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 

    <div class="form-group"> 
     @Html.LabelFor(model => model.ProjectName) 
     <div class="col-md-9"> 
      @Html.EditorFor(model => model.ProjectName) 
     </div> 
    </div> 

    <!-- Project Country --> 
    <div class="form-group"> 
     @Html.LabelFor(model => model.ProjectCountry) 
     <div class="col-md-4"> 
      @Html.DropDownListFor(
       x => x.ProjectCountry, 
       new SelectList(Model.Countries, "Value", "Text")) 
     </div> 
    </div> 

    <table id="mytable"> 
    <thead> 
     <tr> 
      <th>Data1</th> 
      <th>Data2</th> 
      <th>Data3</th> 
     </tr> 
    </thead> 

    <tbody></tbody> 
    </table> 

    <button id="btnSubmit" type="submit">Submit</button> 
} 

<script type="text/javascript"> 
    $('#btnSubmit').click(function (event) { 
     event.preventDefault(); 

     oTable = $('#mytable').dataTable({ 
      "ajax": { 
       "url": "/MyController/MyJsonResult/", 
       "type": "POST", 
       "data": { 
        ProjectName: $('#ProjectName').val(), 
        ProjectCountry: $('#ProjectCountry').val()   
       } 
      } 
     }); 

    return false; 
    }); 
</script>

控制器：

[AcceptVerbs(HttpVerbs.Post)] 
public JsonResult MyJsonResult() 
{ 
    string projectName = Request["ProjectName"]; 
    string projectCountry = Request["ProjectCountry"]; 

    ... DO SOMETHING ... 

    return Json(new { data = dosomethingresult }, JsonRequestBehavior.AllowGet); 
}

上述代碼的作用在於我可以獲取視圖的表單變量並使用它們來確定要返回的結果。很明顯，我遺漏了很多代碼，很多表單變量和很多控制器邏輯。我不想將字符串轉換爲整數，擔心POST var是否爲空或空等。有太多的表單變量，我希望MVC爲我處理這個問題。例如：

具體控制器動作：

[AcceptVerbs(HttpVerbs.Post)] 
public JsonResult MyJsonResult(MyViewModel model) 
{ 
    string projectName = model.ProjectName; 
    string projectCountry = model.ProjectCountry; 

    ... DO SOMETHING ... 

    return Json(new { data = dosomethingresult }, JsonRequestBehavior.AllowGet); 
}

與上面的優選控制器動作的問題是，model內容使用數據表Ajax時總是零。

model使用有效數據進行初始化，如果我在DataTables初始化之外進行Ajax調用。：

$('#btnSubmit').click(function (event) { 
    event.preventDefault(); 

    $.ajax({ 
     url: "/MyController/MyJsonResult/", 
     type: "POST", 
     dataType: "json", 
     data: $('#myform').serialize() 
    }); 

    return false; 
}

的data設置略高於正常串行化所有的表單字段和MVC成功創建視圖模型對象對我來說，在控制器動作用。不幸的是，DataTables Ajax中的"data": $('#myform').serialize()不起作用。當Controller Action被調用時，該模型未初始化（零和零）。

如何將我的整個表單傳遞給使用DataTables Ajax的Controller Action，以便View Model對象包含來自View視圖的正確數據？

我一直在尋找解決方案很長一段時間。太長了。：S

來源

2014-10-03 rwkiii

嘗試'變種臨時= $（ '形式'）serializeArray（）; VAR數據= {}; $圖（溫度，函數（正。，i）{data [n ['name']] = n ['value'];}）;'然後在ajax調用'... data：data，traditional：true，...' – 2014-10-03 06:13:17

可能的重複[序列化表單數據到JSON]（http://stackoverflow.com/questions/11338774/serialize-form-data-to-json） – freshbm 2014-10-03 06:39:47

@Stephen Muecke，你的建議部分工作，但不完全。由於某些原因，複選框值爲空，選擇值包含'count = 0'。 – rwkiii 2014-10-03 14:26:38

在Razor視圖嘗試這種情況：

@using (Html.BeginForm("MyJsonResult", "MyController", FormMethod.Post, new { id = "myform" }))

來源

2015-01-21 18:55:55

如何使用DataTables提交整個表單到MVC控制器操作使用數據表Ajax

回答

相關問題