MVC使用jQuery从视图向控制器传递Model的2种方法

关注

转载最新推荐文章于 2026-04-23 09:32:19 发布 1.3w 阅读 AI 写同款· GEO 优化 ›

【Asp.NET MVC】视图向控制器传递Model数组参数相关注意点最近想要从前台传递多行数据到控制器，在网上查了一下说可以通过传递多个Model的方法来实现。具体解释就是创建一行数据对应的Model模型，在js里构造数组，然后再将data对象转为JSON传到控制器，并注明传参类型为json，最后在控制器中可以直接接受List<Model>类型的参数。结果照着各种博客写了好久，要么接收不到参数，要么能接收到数组，但是数组元素里的属性全是空的，一度怀疑... 阅读详情

using System.ComponentModel.DataAnnotations;

namespace MvcApplication1.Models
{
    public class Movie
    {
        public  int Id { get; set; }
        [Required(ErrorMessage = "必填")]
        public string Title { get; set; }
    }
}

HomeController中，一个Action用来显示强类型视图，一个用来接收从视图传递过来的Model。

using System.Web.Mvc;
using MvcApplication1.Models;

namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View(new Movie());
        }

        public ActionResult AddMovie(Movie movie)
        {
            return Json(new {msg = "ok"});
        }

    }
}

方法一：通过jQuery的serialize()方法

@model MvcApplication1.Models.Movie

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

@using (Html.BeginForm("AddMovie", "Home", FormMethod.Post, new {id = "addForm"}))
{
    @Html.EditorFor(m => m.Title)
    @Html.ValidationMessageFor(m => m.Title)
    <br/>
    <input type="button" id="addMovie" value="提交"/>
}

@section scripts
{
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#addMovie').click(function(e) {
                e.preventDefault();
                if ($('#addForm').valid()) {
                    $.ajax({
                        url: $('#addForm').attr('action'),
                        type: $('#addForm').attr('method'),
                        data: $('#addForm').serialize(),
                        success: function(data) {
                            if (data.msg == 'ok') {
                                alert('提交成功');
                            }
                        }
                    });
                }
            });
        });
    </script>

}

方法二：通过jQuery的 JSON.stringify()方法把匿名对象转换成json

$(function() {
            $('#addMovie').click(function(e) {
                e.preventDefault();
                if ($('#addForm').valid()) {
                    addMovie();
                }
            });
        });

        function addMovie() {
            var movie = {
                "Title" : $('#Title').val()
            };

            $.ajax({
                url: '@Url.Action("AddMovie","Home")',
                data: JSON.stringify(movie),
                type: 'POST',
                contentType: 'application/json;charset=utf-8',
                success: function(data) {
                    if (data.msg == 'ok') {
                        alert('提交成功');
                    }
                }
            });
        }