Asp.net＋MVC4でVIEWとContoroller間のajax通信方法2

Asp.net＋MVC4でVIEWとContoroller間のajax通信方法


【環境】
.NET VB (Microsoft Visual Studio 2010(sp1) .NET Framework 4.5.2)
MVC4

非同期通信を行う
ajaxで配列を送信してContorollerにてModel Listを受け取る。

View

@ModelType .SendTestModelList

@Section javascript
<script type="text/javascript">
$(function () {
    //UPDATEボタンクリック
    $("#btnUpdate").click(function () {
        btnUpdateClick();
    });
}

//UPDATEボタンクリックイベント
function btnUpdateClick() {
    //SENDデータ
    var jsdata = [];

    var listcnt = $("listcnt").val();
    //画面一覧の値を配列に設定
    for (var i = 0; i < listcnt - 1; i++) {
        var jsdataitem = {};
        jsdataitem["id"] = $("#id_" + i).val();
        jsdataitem["name"] = $("#name_" + i).val();
        jsdataitem["item1"] = $("#item1_" + i).val();
        jsdataitem["item2"] = $("#item2_" + i).val();
        jsdata.push(jsdataitem);
    }
    //Contorollerへ送信
    $.ajax({
        type: "POST",
        url: "Sample/sendtest",
        datatype: "json",
        data: JSON.stringify(jsdata),
        contentType: 'application/json',
        success: function (data) {
            if (data == undefined) return;
            //ajax送信完了
            SendSucsess(data);
        },
        error: function (req, status, err) {
            alert("error:" + status + ",msg:" + err);
        }
    });
}
//ajax送信完了
function updateSucsess(data) {
    //ajaxからの受信処理
}
</script>
End Section

<form>
    <input type="button" id="btnUpdate" value="UPDATE"/>
    <table>
        <tr>
            <th>ID</th>
            <th>名前</th>
            <th>項目1</th>
            <th>項目2</th>
        <tr>

        <inpit type="hidden" id="listcnt" value="@Model.SendTestModelList.Count()"/>
@For i As Integer = 0 To Model.SendTestModelList.Count() - 1
        @:<tr>
            @:<td><input type="text" id="id_@i" value="@Model.SendTestModelList(i).id"></td>
            @:<td><input type="text" id="name_@i" value="@Model.SendTestModelList(i).name"></td>
            @:<td><input type="text" id="item1_@i" value="@Model.SendTestModelList(i).item1"></td>
            @:<td><input type="text" id="item2_@i" value="@Model.SendTestModelList(i).item2"></td>
        @:<tr>
Next
    </table>
</form>

Contoroller

Public Class SampleController
    Inherits System.Web.Mvc.Controller

    <HttpPost()> _
    Public Function entry(ByVal models As List(Of SendTestModel)) As ActionResult
        'Ajax通信か判定
        If Not Request.IsAjaxRequest() Then
            Return New EmptyResult()
        End If

        'modelsにSendTestModelのList型で受信


        End Function
End Class

Model

Public Class SendTestModel
    Public Property id() As String
    Public Property name() As String
    Public Property item1() As String
    Public Property item2() As String

    Public Sub New()
        id = String.Empty
        name = String.Empty
        item1 = String.Empty
        item2 = String.Empty
    End Sub
End Class

Public Class SendTestModelList
    Public Property list() As List(Of SendTestModel)

    Public Sub New()
        list = New List(Of SendTestModel)
    End Sub
End Class