ASP.NET MVC 之 AJAX

ASP.NET MVC下的AJAX

　　在Asp.Net MVC中，每一個Request都被route到一個Controller下的Action來處理，即一個Controller Class的一個方法。因此，如果在Action方法中完成業務邏輯，並把需要回傳的資料寫回到Response中，在客戶端再由JavaScript來處理這些回傳的資料，相信也能實現AJAX。基於這個想法，做了一個小小的Demo，實現了asp.net mvc下的ajax。

　　為了方便起見，客戶端JavaScript的功能就通過jQuery來實現了。

　　頁面檔案Html Code：

1＜h2＞Lunch Tracker List＜/h2＞
2＜hr /＞
3＜!--＜% using( Html.Form＜LunchController＞( lc =＞ lc.Search(), FormMethod.Post )) { %＞--＞
4＜form. id="UsersForm"＞
5 Choose User:＜%= Html.DropDownList("Users", new SelectList(ViewData.Model.Users, "ID", "UserName"), new { id = "userName" })%＞   ＜input type="button" id="btnSearchLunch" value="Show All" /＞
6＜/form＞
7＜!--＜%} %＞--＞
8＜br /＞
9＜p id="userlunchlist"＞
10
11＜/p＞
12＜script. type="text/javascript"＞
13 $(document).ready(
14 function()
15 {
16 $("#btnSearchLunch").click(function()
17 {
18 var userName = $("#userName").val();
19 $.get("/Lunch/SearchUserAjax", { name:userName }, function(data)
20 {
21 $("p#userlunchlist").empty();
22 $("p#userlunchlist").append(data);
23 $("p#userlunchlist table").show("slow");
24 });
25 });
26 }
27 );
28＜/script＞

　　其中的$(document).ready(…..)是jQuery下的JavaScript實現。 .pb{} .pb textarea{font-size:14px; margin:10px; font-family:"宋體"; background:#FFFFEE; color:#000066} .pb_t{line-height:30px; font-size:14px; color:#000; text-align:center;} /* 分頁 */ .pagebox{overflow:hidden; zoom:1; font-size:12px; font-family:"宋體",sans-serif;} .pagebox span{float:left; margin-right:2px; overflow:hidden; text-align:center; background:#fff;} .pagebox span a{display:block; overflow:hidden; zoom:1; _float:left;} .pagebox span.pagebox_pre_nolink{border:1px #ddd solid; width:53px; height:21px; *height:23px; line-height:21px; text-align:center; color:#999; cursor:default;} .pagebox span.pagebox_pre{color:#3568b9; height:23px;} .pagebox span.pagebox_pre a,.pagebox span.pagebox_pre a:visited,.pagebox span.pagebox_next a,.pagebox span.pagebox_next a:visited{border:1px #9aafe5 solid; color:#3568b9; text-decoration:none; text-align:center; width:53px; cursor:pointer; height:21px; *height:23px; line-height:21px;} .pagebox span.pagebox_pre a:hover,.pagebox span.pagebox_pre a:active,.pagebox span.pagebox_next a:hover,.pagebox span.pagebox_next a:active{color:#363636; border:1px #2e6ab1 solid;} .pagebox span.pagebox_num_nonce{padding:0 8px; height:23px; line-height:23px; color:#fff; cursor:default; background:#296cb3; font-weight:bold;} .pagebox span.pagebox_num{color:#3568b9; height:23px;} .pagebox span.pagebox_num a,.pagebox span.pagebox_num a:visited{border:1px #9aafe5 solid; color:#3568b9; text-decoration:none; padding:0 8px; cursor:pointer; height:21px; *height:23px; line-height:21px;} .pagebox span.pagebox_num a:hover,.pagebox span.pagebox_num a:active{border:1px #2e6ab1 solid;color:#363636;} .pagebox span.pagebox_num_ellipsis{color:#393733; width:22px; background:none; line-height:23px;} .pagebox span.pagebox_next_nolink{border:1px #ddd solid; width:53px; height:21px; *height:23px; line-height:21px; text-align:center; color:#999; cursor:default;}

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12639172/viewspace-434715/，如需轉載，請註明出處，否則將追究法律責任。