MVC 4.5＆从视图发布到控制器 - 模型为空

Question

我正在模拟按钮单击和启动画面。你可以运行这段代码，看看它几乎可以工作。

我的视图的样子：

@model MvcApplication1.Models.ReportModel 
@using Newtonsoft.Json; 

@{ 
    ViewBag.Title = "Home Page"; 
} 
@section featured { 


<div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px; 
top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001; 
opacity: .8; filter: alpha(opacity=70);display:none"> 
<p style="position: absolute; top: 30%; left: 45%; color: White;"> 
    Running reports, please wait...<img src="../../Images/ajax-loading.gif"> 
</p> 

<section class="featured"> 
    <div class="content-wrapper"> 
     <hgroup class="title"> 
      <h1>@ViewBag.Title.</h1> 
      <h2>@ViewBag.Message</h2> 
     </hgroup> 

     <div id="inputContainer"> 

     </div> 

     <div id="reportContainer"> 
      Run report 
      <span data-bind="text: Date"></span> 


      <table> 
       <tr style="font-weight:bold"> 

        <td> 
         Report Name 
        </td> 
        <td> 
         Number Of Rows 
        </td> 
        <td> 
         Has Data 
        </td> 
        <td> 
         Result Message 
        </td> 
        <td> 
         Check 
        </td> 
       </tr> 

       <tbody data-bind="foreach: Report"> 
        <tr> 
         <td> <span data-bind="text: ReportName"></span></td> 
         <td><span data-bind="text: NumberOfRows"></span></td> 
         <td><span data-bind="text: HasData"></span></td> 
         <td><span data-bind="text: ResultMessage"></span></td> 
         <td><input type="checkbox" data-bind="checked: checkBox"></td> 
        </tr> 
       </tbody> 

     </table>    
     </div> 

    </div> 
</section> 

}

<button onclick="JavascriptFunction();">HTTPPost Button</button> 
@section scripts { 
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script> 
<script type="text/javascript" src="~/Scripts/knockout-2.2.0.js"></script> 
<script type="text/javascript" language="javascript"> 

    //SET INITIAL VALUES ON PAGE WITH KNOCKOUT 
    @*var initialModel = new KOViewModel(@Html.Raw(Json.Encode(Model)));*@ 
    var initialModel = @Html.Raw(JsonConvert.SerializeObject(Model)); 
    @*var initialModel2 = @Html.Raw(JsonConvert.DeserializeObject(Model.ToString()))*@ 
    //SET THE KNOCKOUT OBSERVABLES 
    var viewmodel = 
     { 
      Date: ko.observable(initialModel.Date), 
      Report: ko.observableArray(initialModel.ReportList) 
     }; 

     //FUNCTION TO SHOW A LOADING SCREEN 
     function JavascriptFunction() { 
      var url = '@Url.Action("PostMethod", "Home")'; 
      $("#divLoading").show(); 

      var postModel = { 
       ReportDate: viewmodel.Date(), 
       ReportList: viewmodel.Report() 
      }; 

      $.post(url, postModel, function (res) { 
       $("#divLoading").fadeOut(100); 
       viewmodel.Date(res.ReportDate); 
       viewmodel.Report(res.ReportList); 
      }, "json"); 
     } 

//APPLY KNOCKOUT BINDINGS 
$(document).ready(function() { 
    ko.applyBindings(new viewmodel); 

    }); 
</script> 
    } 

我的课表是这样的：

 public class ReportModel 
    { 
     public string ReportDate { get; set; } 
     public List<Common.Rep> ReportList { get; set; } 
    } 

public class Rep 
{ 
    public string ReportName { get; set; } 
    public int NumberOfRows { get; set; } 
    public string HasData { get; set; } 
    public bool checkBox { get; set; } 
    public string ResultMessage { get; set; } 
} 

我的控制器看起来像：

这种方法可行：

public ActionResult Index() 
    { 
     var model = new ReportModel(); 
     model.ReportDate = "1/31/2014"; 
     model.ReportList = new List<Models.Common.Rep>(); 
     //add a report 
     model.ReportList.Add(
       new Models.Common.Rep() 
      { 
       ReportName = "test report", 
       NumberOfRows = 50, 
       HasData = "Yes", 
       checkBox = false, 
       ResultMessage = "Message" 
      }); 
     model.ReportList.Add(

      //add another report 
    new Models.Common.Rep() 
    { 
     ReportName = "test report 2", 
     NumberOfRows = 50, 
     HasData = "Yes 2", 
     checkBox = false, 
     ResultMessage = "Message 2" 
    }); 

     return View(model); 
    } 

我的问题是与下面的模型的方法是全空。

[HttpPost] 
    public JsonResult PostMethod(ReportModel model) 
    { 
     System.Threading.Thread.Sleep(1000); 
     model.ReportDate = "1/31/2014"; 
     foreach (var row in model.ReportList) 
     { 
      row.ReportName = "TSET TSET TSETLKJAKL:GJGH"; 
     } 

     return Json(model); 
    } 

任何想法，为什么模型传递到： [HttpPost] 公共JsonResult的PostMethod（ReportModel模型）

是NULL？做一些事情需要用这条线来改变 $。员额（URL，postModel，功能（RES）....

谢谢！

Answer 1

你的问题是，你要post JSON字符串，但jQuery的$.post尝试发送数据application/x-www-form-urlencoded这是不是你的控制器期待。请记住，第三个参数$.post指定您希望什么格式收到的响应，没有什么格式你发送的要求在

您需要使用$.ajax代替你可以正确设置内容类型：

 $.ajax({ 
      type: 'POST', 
      url: url, 
      contentType: 'application/json', 
      data: ko.toJSON(postModel), 
      dataType: 'json', 
      success: function (res) { 
      $("#divLoading").fadeOut(100); 
      viewmodel.Date(res.ReportDate); 
      viewmodel.Report(res.ReportList); 
      } 
     });