在上一篇介绍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的更多相关文章

  1. form表单验证-Javascript

    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...

  2. Form 表单提交参数

    今天因为要额外提交参数数组性的参数给form传到后台而苦恼了半天,结果发现,只需要在form表单对应的字段html空间中定义name = 后台参数名 的属性就ok了. 后台本来是只有模型参数的,但是后 ...

  3. s:form标签

    2017-01-07 17:43:18 基本的用法 <!-- Action类必须有一个无参的构造器,因为在执行action方法之前,拦截器已经创建了一个"空"的Action对 ...

  4. ASP.NET Aries JSAPI 文档说明:AR.Form、AR.Combobox

    AR.Form 文档 1:对象或属性: 名称 类型 说明 data 属性 编辑页根据主键请求回来的数据 method 属性 用于获取数据的函数指向,默认值Get objName 属性 用于拦截form ...

  5. form表单 ----在路上(15)

    form 表单就是将用户的信息提交到服务器,服务器会将信息存储活着根据信息查询数据进行增删改查,再将其返回给用户. 基本格式: <form action="" method ...

  6. 了解HTML表单之form元素

    前面的话 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input& ...

  7. form表单的字符串进行utf-8编码

    <form>表单有assept-charset属性.该属性规定字符的编码方式,默认是"unknown",与文档的字符集相同. 该属性除了Internet explore ...

  8. js Form.elements[i]的使用实例

    function pdf(){    //一个html里面可能存在多个form,所以document.form[0]指的是第一个form,document.form[1]返回就是第二个form,如果没 ...

  9. PHP跨域form提交

    因为安全性因素,直接跨域访问是不被允许的. 1.PHP CURL方式 function curlPost($url,$params) { $postData = ''; foreach($params ...

随机推荐

  1. shell部分命令缩写

    bin = BINaries /dev = DEVices /etc = ETCetera /lib = LIBrary /proc = PROCesses /sbin = Superuser BIN ...

  2. J2EE的若干问题

    1.问题:jsp中out.println页面显示不出换行效果.例如: out.println("唱歌"); out.println("跳舞"); 以上代码的结果 ...

  3. java设计模式—Adapter模式

    1.核心意图:     将一个类的接口转换成客户希望的另外一个接口,从而使得原本由于接口不兼容而不能一起工作的类可以一起工作. 该模式的目标是通过一个代理(这里是Adapter),在原来的类(Adap ...

  4. NGINX(五)模块

    nginx模块分为以下几类: NGX_CORE_MODULE //核心模块 NGX_HTTP_MODULE //HTTP处理模块 NGX_EVENT_MODULE //事件处理模块 NGX_MAIL_ ...

  5. android和ios的系统特性区别

    1.  删除:android是长按,ios为滑动/或者进入编辑模式 2.  android:应用内返回键,保证用户停留在应用程序中:硬件返回键可以让用户退出应用程序 3.  剪切/粘贴/选择等文本操作 ...

  6. 【opencv】图像细化

    [原文:http://blog.csdn.net/qianchenglenger/article/details/19332011] 在我们进行图像处理的时候,有可能需要对图像进行细化,提取出图像的骨 ...

  7. HDU 4714 Tree2cycle

    Tree2cycle dfs 不是根节点:如果边数大于等于2,则删除与父节点的边.并且是一条环,那么每个点的度数是2,则还要删除num(每个节点儿子数)-2,只留两个儿子.当然删除边的儿子也要连到环上 ...

  8. 4.1Reduction模型

    1. Reduction Reduction是一种广泛使用的计算模型,特别是在并行计算领域.简单地来说,Reduction就是一系列的划分(Partition)和汇总(Summarize)操作的集合: ...

  9. pip 安装python环境及打包

    0.安装虚拟环境 pip install virtualenv   virtualenv env1   source env1/bin/activate   1. 将包依赖信息保存在requireme ...

  10. 通过在shell脚本中用scp或rsync实现远程同步文件

    通过在shell脚本中用expect实现远程scp文件  shell expect的简单用法 http://myunix.blog.51cto.com/191254/1095074 http://ji ...