MVC使用jQuery从视图向控制器传递Model的2种方法
2023-09-11 14:16:52 时间
有这样的一个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('提交成功'); } } }); }
相关文章
- 让你熟知jquery见鬼去吧
- jquery获取表单的值
- jQuery插件 -- Form表单插件jquery.form.js
- jQuery判断checkbox是否选中的3种方法
- jQuery源码-美元$的若干种使用方法
- 第一百七十三节,jQuery,Ajax
- 使用jQuery创建模态窗口登陆效果 - WEB开发者
- jQuery获取对象简单实现方法
- 【jQuery 提高】 创建自己的jQuery plugin
- jQuery下实现检测指定元素加载完毕
- jQuery 事件 - delegate() 方法
- JQuery模板插件jquery.tmpl-动态ajax扩展
- jQuery手机菜单
- jquery清空表单数据
- jQuery UI API 类别 - 方法(Methods)
- 原生js与jQuery显示隐藏div的几种方法
- jquery插件jTemplates使用方法
- jquery升级到新版本报错[jQuery] Cannot read property ‘msie’ of undefined错误的解决方法(转)
- Jquery节点遍历
- js-jquery-SweetAlert【二】配置方法
- python web py入门(70)- jQuery - 监听键盘事件的方法
- jQuery on()方法
- jQuery bind命名空间
- jquery对象与js对象
- jquery案例3——jq隔行换色