zoukankan      html  css  js  c++  java
  • MVC使用jQuery从视图向控制器传递Model的2种方法

    有这样的一个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('提交成功');
                        }
                    }
                });
            }
  • 相关阅读:
    【转载】关于sql的执行计划(推荐详细) 天高地厚
    填充因子 天高地厚
    【转载】基于Windows下的Web性能测试和压力测试 天高地厚
    [转]SQL Server 2008存储结构之GAM、SGAM 天高地厚
    用sp_change_users_login消除Sql Server的孤立用户
    定义类成员
    个人JS脚本验证大全[转]
    网页居中
    转 优先队列 的使用
    java BigInteger
  • 原文地址:https://www.cnblogs.com/darrenji/p/3779038.html
Copyright © 2011-2022 走看看