ASP.NET MVC4中使用AJAX

本实例展示在ASP.NET MVC4中如何使用AJAX。功能是实现留言的提交，后台程序对留言进行处理，然后将处理结果在前台显示。

运行结果：





主要代码：
Views中的Create.cshtml

建立留言表单：
@using (Html.BeginForm("Create", "Message", FormMethod.Post, new { @class = "keleyi" }))
{
<table>
<tr><td>标题：</td><td>@Html.TextBox("kTitle")</td></tr>
<tr><td>Email：</td><td>@Html.TextBox("kEmail")例如：zhangsan@keleyi.com</td></tr>
<tr><td>QQ：</td><td>@Html.TextBox("kQQ")</td></tr>
<tr><td>内容：</td><td>@Html.TextArea("kcontent", new { rows = 10, cols = 50 })</td></tr>
<tr><td></td><td><button type="submit" id="tijiao">提交留言</button><span id="indicator" style="display:none"><img src="/content/load.gif" alt="loading..." /></span></td></tr>
</table>
}
<div id="lastmessage"></div>

下面就是使用jquery的ajax功能，实现留言的提交、处理和显示：

<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>

$(document).ready(function () {
$("form.keleyi").submit(function (event) {
event.preventDefault();

keleyiAjax(this, update_sessions, "html");
});
});

function keleyiAjax(form, callback, format) {
$("#indicator").show();
$.ajax({
url: form.action,
type: form.method,
dataType: format,
data: $(form).serialize(),
completed: $("#indicator").hide(),
success: callback
});
}

function update_sessions(result) {
$("form.keleyi")[0].reset();
$("#lastmessage").html(result);
}



对提交到后台的留言进行处理：
MessageControler.cs

[HttpPost]
public string Create(FormCollection collection)
{
return AddMessage(collection["ktitle"], collection["kcontent"], collection["kemail"], collection["kqq"]);
}

private string AddMessage(string ktitle, string kcontent, string kemail, string kqq)
{
string k_message = "标题：" + ktitle + "　Email：" + kemail + "　QQ：" + kqq + "　内容：" + kcontent;
return k_message;
}
源代码可到http://keleyi.codeplex.com下载
更多内容：http://keleyi.com/menu/mvc/

 

本文转载自柯乐义：http://keleyi.com/a/bjac/781ba7719ce323f.htm