使用MVC和ajax对复杂模型进行序列化和反序列化

Question

我目前正在手动处理“模型”数据作为字符串，但这非常hacky。我需要做些什么来让控制器操作正确地反序列化模型数据？

我有一个相当复杂的模型：

public class NetControlModel: INetControlScript
{
    public Guid NetId { get; set;}
    public Guid NetControlScriptId { get; set; }
    public INetScript Script { get; set; }
    public INetCheckIns CheckIns { get; set; }

    public NetControlModel(){
        this.CheckIns = new CheckInModel();
    }
}

接口的实现如下：

public class NetControlScript: INetScript
{ 
    public IScriptBanner Banner { get; set; }
    public IScriptAnnouncements Announcements { get; set; }
    public IScriptBody Body { get; set; }
}

public class NetControlBanner: IScriptBanner
{
    public string ScriptBanner { get; set; }
}

public class NetControlAnnouncements: IScriptAnnouncements
{
    public string ScriptAnnouncements { get; set; }
}

public class NetControlBody: IScriptBody
{
    public string ScriptBody { get; set; }  
}

和

public class CheckInModel: INetCheckIns
{
    public IEnumerable<ICheckIn> CheckInCollection { get; set; }

    public CheckInModel()
    {
        this.CheckInCollection = new List<CheckIn> ();  
    }

}


public class CheckIn : ICheckIn
{
    public Guid NetId{ get; set; }
    public int CheckInId { get; set; }
    public string CallSign {get; set;}
    public bool ShortTime {get; set;}
    public bool Secured {get; set;}
    public bool Comment {get; set;}
    public bool Question {get; set;}
    public DateTime FirstCheckIn { get; set;
    }

    public DateTime LastCheckIn { get; set;
    }
    public Int16 TotalCheckIns { get; set; }            
    public string Notes { get; set; }
}

视图是两部分，一部分基本上由输入表单组成，底部部分我打算成为已使用输入字段输入的记录列表。 Parent表单和嵌套partial表示如下：

@using NetControl.Domain.Models
@model NetControlModel

@using (Ajax.BeginForm("SubmitStationCheckin", "NetControlScript", new   
AjaxOptions { HttpMethod="POST"}))
{
@Html.HiddenFor(m => m.NetId)
@Html.HiddenFor(m => m.NetControlScriptId)  
@Html.HiddenFor(m => m.CheckIns.CheckInCollection)



<div class="row">
    <div class="col-md-2">
        <div class="form-group">
            @Html.Label("Call Sign")
            @Html.TextBox("callSign", "callsign", new {@class= "form-control"})
        </div>
    </div>
    <div class="col-md-1">
        <div class="form-group">
            @Html.Label("Short Time")
            @Html.CheckBox("shortTime", false)
        </div>
    </div>
    <div class="col-md-1">
        <div class="form-group">
            @Html.Label("Secured")
            @Html.CheckBox("secured", false)
        </div>
    </div>
    <div class="col-md-1">
        <div class="form-group">
            @Html.Label("Comment")
            @Html.CheckBox("comment", false)
        </div>
    </div>
    <div class="col-md-1">
        <div class="form-group">
            @Html.Label("Question")
            @Html.CheckBox("question", false)
        </div>
    </div>

<div>
<input id="clickme" value="send it" type="button"/>
</div>
</div>



}

<div id="checkinList">
@{Html.RenderPartial("~/Views/NetControlScript/CheckinList.cshtml",  Model.CheckIns);}

和部分视图：

@{
var CheckIn = Model.CheckInCollection.ToArray();
}

<div id="checkInListHidden">
<table id="hiddenTable">


@for(int i = 0; i < CheckIn.Count(); i++)
{
<tr>
    <td>    @Html.HiddenFor(m => CheckIn[i].CallSign) </td>
    <td>    @Html.HiddenFor(m=> CheckIn[i].ShortTime) </td>
    <td>    @Html.HiddenFor(m=> CheckIn[i].Secured) </td>
    <td>    @Html.HiddenFor(m=> CheckIn[i].Comment) </td>
    <td>    @Html.HiddenFor(m=> CheckIn[i].Question) </td>
    <td>    @Html.HiddenFor(m=> CheckIn[i].LastCheckIn) </td>
    <td>    @Html.HiddenFor(m=> CheckIn[i].FirstCheckIn) </td>
    <td>    @Html.HiddenFor(m=> CheckIn[i].TotalCheckIns) </td>
    <td>    @Html.HiddenFor(m=> CheckIn[i].Notes) </td>
</tr>
}
< /table>
</div>


<div class="row">
<div class="col-md-2">Callsign</div>
<div class="col-md-1" >Short Time</div>
<div class="col-md-1">Secured</div>
<div class="col-md-1">Comment</div>
<div class="col-md-1">Question</div>
<div class="col-md-1">Last Check In</div>
<div class="col-md-1">First Checkin In</div>
<div class="col-md-1">Total Checkins</div>
<div class="col-md-2">Notes</div>
</div>

@foreach(CheckIn c in Model.CheckInCollection)
{
    <div class="row">
        <div class="col-md-2">
            @Html.TextBoxFor(n => c.CallSign, new {@class="form-control"})
        </div>

        <div class="col-md-1">
            @Html.TextBoxFor(n => c.ShortTime, new {@class="form-control"})
        </div>

        <div class="col-md-1">
            @Html.TextBoxFor(n => c.Secured, new {@class="form-control"})
        </div>

        <div class="col-md-1">
            @Html.TextBoxFor(n => c.Comment, new {@class="form-control"})
        </div>

        <div class="col-md-1">
            @Html.TextBoxFor(n => c.Question, new {@class="form-control"})
        </div>

        <div class="col-md-1">
            @Html.TextBoxFor(n => c.LastCheckIn, new {@class="form-control"})
        </div>

        <div class="col-md-1">
            @Html.TextBoxFor(n => c.FirstCheckIn, new {@class="form-control"})
        </div>

        <div class="col-md-1">
            @Html.TextBoxFor(n => c.TotalCheckIns, new {@class="form-control"})
        </div>

        <div class="col-md-1">
            @Html.TextBoxFor(n => c.Notes, new {@class="form-control"})
        </div>
    </div>
}

我使用ajax将模型数据以及输入中的当前数据发布到控制器，如下所示：

  $.ajax({
        type: "POST",
        url: '/NetControlScript/SubmitStationCheckin',
        //data: JSON.stringify({model: data, NetScriptId: netControlScriptId, NetId: netId, callSign: callSign, shortTime: shortTime, secured: secured, comment: comment, question: question}),
        dataType: "html",
        data: JSON.stringify({model: d, NetScriptId: netControlScriptId, NetId: netId, callSign: callSign, shortTime: shortTime, secured: secured, comment: comment, question: question}),
        contentType: "application/json; charset=utf-8",
        success: function (response) {
         alert("Success response:" + response)
            console.log("response" + response);
             $('#checkinList').html(response)
         },
        failure: function (response) {
            alert("Failure response:" + response);
        },
        error: function (response) {
            alert("Error response:" + response);
            $('#checkinList').html(response);
        }
    });

这是问题，我可以看到模型数据作为[[row 1 fields，...]，[row 2 fields ...]]类型的字符串在fidler中发布。单个项目正在命中控制器（呼号，短时间等等），但模型没有被反序列化到控制器参数中指定的模型中。

[HttpPost]
    public async Task<ActionResult> SubmitStationCheckin(NetControlModel model,Guid NetScriptId,  Guid NetId, string callSign, bool shortTime, bool secured, bool comment, bool question )
    {
... controller body
 }