ASP.NET MVC AJAX表单提交实例

1.首先，新建一个controller。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
public class AJAXController : Controller
{
//
// GET: /AJAX/

public ActionResult Index()
{
return View();
}

}
}

2.在index方法下，右键，添加视图



3.在Index.cshtml，创建一个ajax的表单。

@{
ViewBag.Title = "Index";
}

<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<h2>Index</h2>

@using (Ajax.BeginForm("hello", "AJAX", new AjaxOptions() {
HttpMethod = "post",UpdateTargetId = "information",InsertionMode = InsertionMode.Replace
}))
{

<input type="text"  name="name">
<input type="submit" id="btnAjax" name="btnAjax" value="提交" />
}

<div id="information"></div>

这是cshtml的内容，这里有几个要注意的地方。
1.一定要注意jquery.js一定要放在最前面，不然的话，将会出现不能异步的情况。

2.说明一下ajax.beginform中的参数的意义：

1.“hello”指的是controller中的方法。

2.“AJAX”指的是我们刚才创建的controller。

3.HttpMethod = "post"指的是用post传输。

4.UpdateTargetId = "information"指的是传来的内容在哪里显示，我们上面的代码中最下面有一个div，id=“information”，值得就是他。

5.InsertionMode = InsertionMode.Replace指的是替换。

4.完成hello方法

[HttpPost]
public ActionResult GetTime(string cal)
{
//return Content(DateTime.Now.ToString("F"));

string x2 = "的预警信息暂无";
string x3 = cal + x2;
return Content(x3);
}

这样整个的代码就写好了。





我们来看一下效果：



输入名字，点击提交，页面不会跳转



这样一个简单的表单提交就完成了。