您的位置:首页 - 教程 - ASP.NET - 正文
jQuery Ajax调用ASP.NET MVC控制器方法的例子
控制器代码:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace HoverTreeMvc.Controllers
{
public class HoverTreeController : Controller
{

public ActionResult Hewenqi(string input) {
string result = string.Empty;
if (Request.IsAjaxRequest())
{
result = "输入为:" + input + " | 长度为:" + input.Length;
}
return Content(result);
}

// GET: HoverTree
public ActionResult Index()
{
return View();
}

// GET: HoverTree/Details/5
public ActionResult Details(int id)
{
return View();
}

// GET: HoverTree/Create
public ActionResult Create()
{
return View();
}

// POST: HoverTree/Create
[HttpPost]
public ActionResult Create(FormCollection collection)
{
try
{
// TODO: Add insert logic here

return RedirectToAction("Index");
}
catch
{
return View();
}
}

// GET: HoverTree/Edit/5
public ActionResult Edit(int id)
{
return View();
}

// POST: HoverTree/Edit/5
[HttpPost]
public ActionResult Edit(int id, FormCollection collection)
{
try
{
// TODO: Add update logic here

return RedirectToAction("Index");
}
catch
{
return View();
}
}

// GET: HoverTree/Delete/5
public ActionResult Delete(int id)
{
return View();
}

// POST: HoverTree/Delete/5
[HttpPost]
public ActionResult Delete(int id, FormCollection collection)
{
try
{
// TODO: Add delete logic here

return RedirectToAction("Index");
}
catch
{
return View();
}
}
}
}

包含ajax调用的htm页面代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Ajax调用ASP.NET MVC控制器方法的例子_何问起</title>
<script src="http://down.hovertree.com/jquery/jquery-1.10.2.min.js"></script>
</head>
<body>
<div>
<input type="text" id="HovertreeInput" />
<input type="button" id="HovertreeButton" value="发送"/>
</div>
<script>
function MyAjax() {
$.ajax({
type: "POST", //默认是GET
url: "/HoverTree/Hewenqi", //HoverTree为Controller名称、Hewenqi为Action名称
data: "input='" + $('#HovertreeInput').val() + "'",
async: true, //异步
cache: false, //不加载缓存
success: function (data) {
alert(data);
},
error: function () {
alert("请求失败");
}
});
}
$(function () {
$("#HovertreeButton").on("click", function () {
MyAjax();
})
})
</script>
</body>
</html>

效果如下图:

细心的朋友可能会发现
ajax post到asp.net mvc by 何问起
这句话长度为28个字符
那么mvc中计算的应该包含两侧的单引号

参考:http://hovertree.com/h/bjag/ei4sdva3.htm

评论: