使用AJAX和javascript向控制器发回动态列表模型

时间:2013-09-03 01:03:48

标签: javascript jquery ajax asp.net-mvc-3

我有一个部分视图,显示在jquery模式弹出窗口中。视图由动态生成的复选框列表组成,可以包含一对多复选框。我试图将模型发回控制器时遇到问题。该模型是一个通用列表(T)

以下是控制器操作:

   <HttpPost>
    Function CertBodiesListPostBack(ByVal Model As List(Of DataModels.DataModels.CertBodyVM)) As JsonResult
        ViewBag.CourseId = Model(0).courseId
        Data_Manager.CertifyBody.SaveCertBody(Model(0).courseId, Model)
        Return Json(New With {.success = True})
    End Function

,视图视图如下:

 @Modeltype List(Of DataModels.CertBodyVM)
 @Code

 End Code
<link href="@Url.Content("~/Content/jquery-ui-1.10.3.custom.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript">
   $(document).ready(function () {
    $("#btnUpdate").click(function () {
        $('#waitMessage').show();

        $.ajax({
            url: '@Url.Action("CertBodiesListPostBack", "Admin")',
            type: 'POST',
            data: JSON.stringify('@model'),
            dataType: "json",
            context: $(this),
            success: function (result) {

                $('#waitMessage').hide();
                $("#dialog-edit").dialog().dialog('close');

            },
            error: function (result) {
                alert('There was an error processing the request!!');

            }
        });
        return false;
    });
   });
 </script>
<style>
 #waitMessage {

  background:  url('../../Content/Images/animated-processing.gif')  scroll no-repeat center;
  height: 100px; width: 100px;
  position: fixed; left: 50%; top: 50%; z-index: 1000;
  margin: -25px 0 0 -25px;
  }
 </style>
 <div id="waitMessage" class="dataContainer" style="display: none;">
  <p>Saving Note</p>
 </div>
 @Using Html.BeginForm()
 @<fieldset><legend></legend>

 <table>
    <tr>
    <th>Certifying Bodies</th>
    </tr>
 @For i As Integer = 0 To Model.Count - 1
         Dim y As Integer = i
         Dim d As String = Model(y).certName
     @<tr><td style="text-align: left">@Html.CheckBoxFor(Function(model) model(y).certSelected)@Html.Label(d)@Html.HiddenFor(Function(model) model(y).certBodyId)@Html.HiddenFor(Function(model) model(y).courseId)</td></tr>
   Next

   </table>
   <input type="button" value="Save" id="btnUpdate" name="cmd" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" />

    <input type="button" value="Cancel" id="btncancel" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" />
    </fieldset>   

    End Using

模型如下:

    Public Class CertBodyVM
    Private _certName As String
    Public Property certName() As String
        Get
            Return _certName
        End Get
        Set(ByVal value As String)
            _certName = value
        End Set
    End Property
    Private _certSelected As Boolean
    Public Property certSelected() As Boolean
        Get
            Return _certSelected
        End Get
        Set(ByVal value As Boolean)
            _certSelected = value
        End Set
    End Property
    Private m_certBodyId As Integer
    Public Property certBodyId() As Integer
        Get
            Return m_certBodyId
        End Get
        Set(ByVal value As Integer)
            m_certBodyId = value
        End Set
    End Property
    Private m_CourseId As Integer
    Public Property courseId() As Integer
        Get
            Return m_CourseId
        End Get
        Set(ByVal value As Integer)
            m_CourseId = value
        End Set
    End Property
End Class

我是javascript和AJAX的新手

1 个答案:

答案 0 :(得分:1)

如果要使用ajax调用将视图上的模型传递给控制器​​,可以使用

data: $('form').serialize()

您可以指定表单的id并将表单的id传递为

   data: $('#myform').serialize()