如何在Post方法的Model中获取动态生成的复选框的值

时间:2019-03-29 11:35:10

标签: jquery asp.net-mvc

我需要在表单提交上传递一组已选中的复选框。 问题是,复选框不是模型的一部分,它们是由jquery在用户执行某些操作后生成的。复选框正确显示在页面上。 在发布事件后如何在我的模型中获取选中的属性。

 @model Models.MainModule
    @using (Html.BeginForm("Detail", "SomeControllerName", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
            {
          @Html.HiddenFor(m => Model.SubCheckList)
         <div id="CheckList"></div>

        }

jQuery复选框:

$(document).ready(function () {
        $("#ModID").change(function () {
            var ModId = $('#ModID').val();
            $.ajax({
                type: "GET",
                url: "/SomeController/SomeAction",
                data: { Mid: ModID },
                datatype: "json",
                traditional: true,

                success: function (data) {
                    $('#CheckList').empty();
                    $.each(data, function (key, value) {
                        var li = $('<li><input type="checkbox" name="' + key + '" id="' + value.subID + '"/>' +
                            '<label for="' + key + '"></label></li>');
                        li.find('label').text(value.subName);
                        $('#CheckList').append(li);
                    });
                }
            });

        });
    });

模型类

 namespace Models
    {
        public class MainModule
        {
            public int MainID { get; set; }
            public string MainName { get; set; }
      public List<MyModule> SubCheckList { get; set; }  
        }

 public MainModule()
        {
            this.SubCheckList = new List<MyModule>();
        }       

    public class MyModule
        {
            public int id { get; set; }  

            public string name { get; set; }
        }
    }

控制器代码:

[HttpPost]
  public ActionResult Detail(MyModule myModuleObj)
  {
    GetViewBagData();
     return View();
  }

1 个答案:

答案 0 :(得分:0)

您可以通过AJAX表单提交来实现。

首先为您的表单添加一个名称,作为您的要求。例如,“ formMainModule”

首先将一个类“ chkBxClass”添加到每个复选框。这是为了获取复选框值,以便以后检查。

在jquery中

var checkedIds = $('.chkBxClass:checkbox:checked').map(function () { return this.value; }).get().join(','); 

$.ajax({
    type: 'POST',
    data: $('#formMainModule').serialize() + '&checkedIds=' + checkedIds,
    url: '/SomeControllerName/Detail',
    success: function (result) {
             }
    });

在控制器中,

[HttpPost]
public ActionResult Detail(MyModule myModuleObj, string[] checkedIds)
{
     // Here you can add checked ids to your module
}