您的位置:首页 - MVC
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/
本站导航
相关文章
柯乐义 Copyright© keleyi.com