VIEW层AJAX提交表单到Controller的实体(AJAX传递序列化的输入元素)

在MVC环境中,AJAX方式添加一个对象,这个对象在Models中是一个视图模型,在前台显示时是这样的代码:

<%using (Html.BeginForm())
      { %>
    姓名:<%=Html.TextBoxFor(model=>model.UserName) %>
    Email:<%=Html.TextBoxFor(model=>model.Email) %>
    年龄:<%=Html.TextBoxFor(model=>model.Age) %>
    <input type="button" id="btn" value="提 交" />
    <%} %>

当单击提交按钮时,使表单中的数据提交到controller中指定的action中,代码如下:

<script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                $.ajax({
                    type: "POST",
                    url: "/Home/Create",
                    data: $("form").serialize(),
                    success: function (data) {
                        if (data.success == true)
                            alert("成功,用户为("+data.name+")");
                        else
                            alert("失败");
                    }
                });
            });
        });
    </script>

在上面代码中,使用了JS的序列化serialize(),它把一组输入元素序列化为数据字符串,它们与实体名一一对应

在controller中,会通过一个实体参数接收这个序列化的字符串

   

[HttpPost]
        public ActionResult Create(CreateUserModels entity)
        {            return Json(new { success = true,name=entity.UserName });
        }

OK,不敢相信吧,它居然是可以得到我们前台传过来的数据的,呵呵.

 

作者：仓储大叔，张占岭，
荣誉：微软MVP