使用JQuery AJAX将无序列表项传递给ASP.net MVC控制器操作方法

时间:2019-05-16 06:16:27

标签: jquery ajax asp.net-mvc html5

如何将列表项值作为模型传递给控制器​​操作方法,模型返回null。在下面,我添加了我尝试过的JQuery代码

这是我的html

 <ul class="to_do" id="Emaillist">
      <li class="alert" value="2">example list 2
      <span data-dismiss="alert" class="close">×</span>
      </li>
      <li class="alert" value="1">Best check , you're not looking too good.
      <span data-dismiss="alert" class="close">×</span>
      </li>
</ul> 

这是我的Jquery代码

 function saveClick() {
            debugger;
            $('#Emaillist').find('span').remove()

            var items = $('#Emaillist').find('li').map(function () {
                var item = {};
                item.id = $(this).val();
                item.title = $(this).text();
                return item;
            });

            var EmpData = JSON.stringify(items)

            $.ajax({
                url: "/Admin/ManageEmailConditions",
                data: EmpData,
                type: "POST",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (result) {
                    loadData();
                    $('#myModal').modal('hide');
                },
                error: function (errormessage) {
                    alert(errormessage.responseText);
                }
            });  

            console.log(EmpData);
        }

这里是我的模型类和控制器操作方法

 public  class EmailConditions
    {
        public int id { get; set; }
        public string title { get; set; }
    }

[HttpPost]
        public ActionResult ManageEmailConditions(EmailConditions model)
        {
            return View();
        }

1 个答案:

答案 0 :(得分:0)

更新的操作方法是

 [HttpPost]
        public ActionResult ManageEmailConditions(List<EmailConditions> model)
        {
            return View();
        }

HTML代码

  <div>
    <ul class="to_do" id="Emaillist">
      <li class="alert" value="2">example list 2
      <span data-dismiss="alert" class="close">×</span>
      </li>
      <li class="alert" value="1">Best check , you're not looking too good.
      <span data-dismiss="alert" class="close">×</span>
      </li>
    </ul> 
  </div>

  <div class="form-group">
                <div class="col-md-6 col-md-offset-3">
                    <button type="button" class="btn btn-primary">Clear</button>
                    <button id="add" type="button" class="btn btn-success">Add</button>
                    <button id="save" type="button" class="btn btn-success">Save All</button>
                </div>
  </div>

jQuery Ajax代码是

function saveClick() {
            debugger;
            $('#Emaillist').find('span').remove()
            var model = new Array()

           $('#Emaillist').find('li').map(function () {
                var EmailCondition = {};
               EmailCondition.id = $(this).val();
               EmailCondition.title = $(this).text();
               model.push(EmailCondition);
            });

            $.ajax({
                url: "/Admin/ManageEmailConditions",
                data: JSON.stringify(model),
                type: "POST",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (result) {
                    loadData();
                    $('#myModal').modal('hide');
                },
                error: function (errormessage) {
                    alert(errormessage.responseText);
                }
            });  


        }