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")例如：[e-mail]</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