MVC使用jQuery從視圖向控制器傳遞Model的2種方法

標籤：c   style   class   blog   code   java   

有這樣的一個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(‘提交成功‘);                    }                }            });        }