mvc_ajax_for form
在上一篇介绍MVC中的Ajax实现方法的时候,曾经提到了除了使用Ajax HTML Helper方式来实现之外,Jquery也是实现Ajax的另外一种方案。
通过get方法实现AJax请求
View
<script type="text/javascript">
function GetTime() {
$.get("Home/GetTime", function (response) {
$("#myPnl").html(response);
}); return false;
}
</script>
<div id="myPnl" style="width: 300px; height: 30px; border: 1px dotted silver;">
</div>
<a href="#" onclick="return GetTime();">Click Me</a>
Controller
public ActionResult GetTime()
{
return Content(DateTime.Now.ToString());
}
通过post方法实现Form的Ajax提交
View
@model MvcAjax.Models.UserModel
@{
ViewBag.Title = "AjaxForm";
}
<script type="text/javascript">
$(document).ready(function () {
$("form[action$='SaveUser']").submit(function () {
$.post($(this).attr("action"), $(this).serialize(), function (response) {
$("#myPnl").html(response);
}); return false;
});
}); </script>
<div id="myPnl" style="width: 300px; height: 30px; border: 1px dotted silver;">
</div>
@using (Html.BeginForm("SaveUser", "Home"))
{
<table>
<tr>
<td>
@Html.LabelFor(m => m.UserName)
</td>
<td>
@Html.TextBoxFor(m => m.UserName)
</td>
</tr>
<tr>
<td>
@Html.LabelFor(m => m.Email)
</td>
<td>
@Html.TextBoxFor(m => m.Email)
</td>
</tr>
<tr>
<td>
@Html.LabelFor(m => m.Desc)
</td>
<td>
@Html.TextBoxFor(m => m.Desc)
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Submit" />
</td>
</tr>
</table>
}
Model
using System.ComponentModel.DataAnnotations; namespace MvcAjax.Models
{
public class UserModel
{
[Display(Name = "Username")]
public string UserName { get; set; } [Display(Name = "Email")]
public string Email { get; set; } [Display(Name = "Description")]
public string Desc { get; set; }
}
}
Controller
[HttpPost]
public ActionResult SaveUser(UserModel userModel)
{
//Save User Code Here
//...... return Content("Save Complete!");
}
以上代码实现了Jquery POST提交数据的方法。
通过查看以上两种Jquery方式的Ajax实现方法,和之前AJax HTML Helper比较可以发现其实Controller都是相同的。
采用Jquery方式提交数据的的主要实现方案就是通过Jquery的get或者post方法,发送请求到MVC的controller中,然后处理获取的response,更新到页面中。
注意点:
无论是使用超链接和form方式来提交请求,javascript的方法始终都有一个返回值false,用来防止超链接的跳转或者是form的实际提交。
这个地方就会出现一个疑问:
如果针对该页面禁止了Javascript脚本,那么该页面就是跳转或者是form就是提交,返回的ActionResult处理就会出现问题了。
这个时候就需要在Controller中判断该请求是否是Ajax请求,根据不同的情况返回不同的ActionResult:
[HttpPost]
public ActionResult SaveUser(UserModel userModel)
{
//Save User Code Here
//...... if (Request.IsAjaxRequest())
return Content("Save Complete!");
else
return View();
}
mvc_ajax_for form的更多相关文章
- form表单验证-Javascript
Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...
- Form 表单提交参数
今天因为要额外提交参数数组性的参数给form传到后台而苦恼了半天,结果发现,只需要在form表单对应的字段html空间中定义name = 后台参数名 的属性就ok了. 后台本来是只有模型参数的,但是后 ...
- s:form标签
2017-01-07 17:43:18 基本的用法 <!-- Action类必须有一个无参的构造器,因为在执行action方法之前,拦截器已经创建了一个"空"的Action对 ...
- ASP.NET Aries JSAPI 文档说明:AR.Form、AR.Combobox
AR.Form 文档 1:对象或属性: 名称 类型 说明 data 属性 编辑页根据主键请求回来的数据 method 属性 用于获取数据的函数指向,默认值Get objName 属性 用于拦截form ...
- form表单 ----在路上(15)
form 表单就是将用户的信息提交到服务器,服务器会将信息存储活着根据信息查询数据进行增删改查,再将其返回给用户. 基本格式: <form action="" method ...
- 了解HTML表单之form元素
前面的话 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input& ...
- form表单的字符串进行utf-8编码
<form>表单有assept-charset属性.该属性规定字符的编码方式,默认是"unknown",与文档的字符集相同. 该属性除了Internet explore ...
- js Form.elements[i]的使用实例
function pdf(){ //一个html里面可能存在多个form,所以document.form[0]指的是第一个form,document.form[1]返回就是第二个form,如果没 ...
- PHP跨域form提交
因为安全性因素,直接跨域访问是不被允许的. 1.PHP CURL方式 function curlPost($url,$params) { $postData = ''; foreach($params ...
随机推荐
- shell部分命令缩写
bin = BINaries /dev = DEVices /etc = ETCetera /lib = LIBrary /proc = PROCesses /sbin = Superuser BIN ...
- J2EE的若干问题
1.问题:jsp中out.println页面显示不出换行效果.例如: out.println("唱歌"); out.println("跳舞"); 以上代码的结果 ...
- java设计模式—Adapter模式
1.核心意图: 将一个类的接口转换成客户希望的另外一个接口,从而使得原本由于接口不兼容而不能一起工作的类可以一起工作. 该模式的目标是通过一个代理(这里是Adapter),在原来的类(Adap ...
- NGINX(五)模块
nginx模块分为以下几类: NGX_CORE_MODULE //核心模块 NGX_HTTP_MODULE //HTTP处理模块 NGX_EVENT_MODULE //事件处理模块 NGX_MAIL_ ...
- android和ios的系统特性区别
1. 删除:android是长按,ios为滑动/或者进入编辑模式 2. android:应用内返回键,保证用户停留在应用程序中:硬件返回键可以让用户退出应用程序 3. 剪切/粘贴/选择等文本操作 ...
- 【opencv】图像细化
[原文:http://blog.csdn.net/qianchenglenger/article/details/19332011] 在我们进行图像处理的时候,有可能需要对图像进行细化,提取出图像的骨 ...
- HDU 4714 Tree2cycle
Tree2cycle dfs 不是根节点:如果边数大于等于2,则删除与父节点的边.并且是一条环,那么每个点的度数是2,则还要删除num(每个节点儿子数)-2,只留两个儿子.当然删除边的儿子也要连到环上 ...
- 4.1Reduction模型
1. Reduction Reduction是一种广泛使用的计算模型,特别是在并行计算领域.简单地来说,Reduction就是一系列的划分(Partition)和汇总(Summarize)操作的集合: ...
- pip 安装python环境及打包
0.安装虚拟环境 pip install virtualenv virtualenv env1 source env1/bin/activate 1. 将包依赖信息保存在requireme ...
- 通过在shell脚本中用scp或rsync实现远程同步文件
通过在shell脚本中用expect实现远程scp文件 shell expect的简单用法 http://myunix.blog.51cto.com/191254/1095074 http://ji ...