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

【问题标题】：Passing unordered list items to ASP.net MVC controller action method using JQuery AJAX使用 JQuery AJAX 将无序列表项传递给 ASP.net MVC 控制器操作方法
【发布时间】：2019-05-16 06:16:27
【问题描述】：

如何将列表项值作为模型传递给控制器操作方法，模型返回 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();
        }

【问题讨论】：

也许可以试试List<EmailConditions> model
@CarstenLøvboAndersen public ActionResult ManageEmailConditions(List<EmailConditions> model) { return View(); } 我试过但没用
也许可以尝试添加data: {model : EmpData}
对不起@CarstenLøvboAndersen 它也不起作用
@CarstenLøvboAndersen 谢谢，它现在可以工作了。我会发布我的答案

标签： jquery ajax asp.net-mvc html

【解决方案1】：

更新的动作方法是

 [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);
                }
            });  


        }

【讨论】：