ASP.NET MVC實踐系列4-Ajax應用

ASP.NET MVC中支援Ajax的方式和webform中有些區別，沒有了updatepanel，所以對於初學者來說在最開始應用時似乎沒有在webform中簡單，但實際使用上更為靈活而跟webform比較並沒有增加多少複雜度。

一、ASP.NET MVC  Ajax 的 Helpers

對於ASP.NET MVC中的Ajax的學習，需要重點瞭解Ajax.ActionLink()和Ajax.BeginForm()這兩個Helper，Ajax是System.Web.Mvc.ViewPage中的屬性，它返回的類型是AjaxHelper，而ASP.NET MVC中的View都是繼承於System.Web.Mvc.ViewPage，所以在頁面上能直接使用這兩個Helper。

1、Ajax.ActionLink()：向用戶端輸入一個連結地址，跟Html.ActionLink()很相似，當單擊這個連結時可以非同步呼叫Controller中的方法

Ajax.ActionLink()方法有許多重載，我們這裡舉例說明其中一個比較常用的重載：

public static string ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, object routeValues, AjaxOptions ajaxOptions);
linkText：是顯示在用戶端的文本

actionName：是Action的名字，預設情況下我們會使用當前的Controller。

routeValues：將傳入到Controller中方法的參數

ajaxOptions：配置Ajax的一些選項，看完下面的例子我們再詳細講解這個配置選項。

這裡先舉一個簡單的例子：

View：

    <script src="<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script>

    <script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>" type="text/javascript"></script>

    <%=Ajax.ActionLink("test","Hello",new{name="lfm"},new AjaxOptions{UpdateTargetId="results"}) %>
    <div id="results">
    </div>

雖然ASP.NET MVC 的sctrpts中已經有了Ajax的指令碼，但使用之前仍然還要在頁面中引用。Ajax.ActionLink("test","Hello",new{name="lfm"},new AjaxOptions{UpdateTargetId="results"}) 的意思是前端頁面顯示的文本為test，當點擊test時會調用Controller中的Hello方法，參數為lfm，返回的內容會在id=results的標籤中顯示。

Controller:

{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
this.style.display='none'; document.getElementById('Code_Closed_Text_144923').style.display='none'; document.getElementById('Code_Open_Image_144923').style.display='inline'; document.getElementById('Code_Open_Text_144923').style.display='inline';
}
}
}
}
}
}
}
}" id="Code_Closed_Image_144923" style="display: none">{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
this.style.display='none'; document.getElementById('Code_Open_Text_144923').style.display='none'; getElementById('Code_Closed_Image_144923').style.display='inline'; getElementById('Code_Closed_Text_144923').style.display='inline';
}
}
}
}
}
}
}
}" id="Code_Open_Image_144923">Code
public ActionResult ActionLinkTest()
        {
            return View();
        }
        public string Hello(string name)
        {
            return "Hello:" + name;
        }

 

2、ajaxOptions重要選項講解

屬性	類型	解釋
Confirm	string	如果指定了這個選項，當單擊連結時會彈出一個確認視窗
LoadingElementId	string	如果指定了這個選項，當點選連結時，會將指定的id標籤內容的css改為顯示狀態
UpdateTargetId	string	如果指定了這個選項，非同步呼叫完之後的傳回值會替換這個標籤。

 Confirm例子：在View中鍵入   <%=Ajax.ActionLink("ConfirmTest", "Hello", new { name = "lfm" }, new AjaxOptions {Confirm="你確定麼", UpdateTargetId = "results" })%>
當單擊ConfirmTest時會彈出如下視窗：

LoadingElementId例子：

View：

<%=Ajax.ActionLink("LoadingTest","HelloSleep",new{name="lfm"},new AjaxOptions{LoadingElementId="loading",UpdateTargetId="results"}) %>
    <div id="loading" style="display: none">
        Loading......
    </div>
    <div id="results">
    </div>

Controller:

{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
this.style.display='none'; document.getElementById('Code_Closed_Text_151531').style.display='none'; document.getElementById('Code_Open_Image_151531').style.display='inline'; document.getElementById('Code_Open_Text_151531').style.display='inline';
}
}
}
}
}
}
}
}" id="Code_Closed_Image_151531" style="display: none">{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
this.style.display='none'; document.getElementById('Code_Open_Text_151531').style.display='none'; getElementById('Code_Closed_Image_151531').style.display='inline'; getElementById('Code_Closed_Text_151531').style.display='inline';
}
}
}
}
}
}
}
}" id="Code_Open_Image_151531">Code
public string HelloSleep(string name)
        {
            Thread.Sleep(2000);
            return "Hello:" + name;
        }

 

3、Ajax.BeginForm()：跟Html.BeginForm()很相似，當按提交按鈕時會非同步調用相應的Controller中的方法

View：

 <% using (Ajax.BeginForm("Hello",
new AjaxOptions { UpdateTargetId = "myResults" }))
       { %>
       <%=Html.TextBox("name") %>
       <input type="submit" value="調用" />
    <% } %>
    <div id="myResults">
        返回結果
    </div>

Controller:

{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
this.style.display='none'; document.getElementById('Code_Closed_Text_152505').style.display='none'; document.getElementById('Code_Open_Image_152505').style.display='inline'; document.getElementById('Code_Open_Text_152505').style.display='inline';
}
}
}
}
}
}
}
}" id="Code_Closed_Image_152505" style="display: none">{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
this.style.display='none'; document.getElementById('Code_Open_Text_152505').style.display='none'; getElementById('Code_Closed_Image_152505').style.display='inline'; getElementById('Code_Closed_Text_152505').style.display='inline';
}
}
}
}
}
}
}
}" id="Code_Open_Image_152505">Code
   public string Hello(string name)
        {
            return "Hello:" + name;
        }
        public ActionResult BeginFormTest()
        {
            return View();
        }

 

二、具體案例：

1、查詢news列表

主顯示頁面的View（NewsShow）：

<script src="<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script>

    <script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>" type="text/javascript"></script>

    <% using (Ajax.BeginForm("Search",
new AjaxOptions { UpdateTargetId = "myResults" ,LoadingElementId="loading"}))
       { %>
       <%=Html.TextBox("title") %>
       <input type="submit" value="查詢" />
    <% } %>
    <div id="myResults">
        返回結果
    </div>
<div id="loading" style="display:none">
Loading
</div>

另外需要建立一個Partial的View（NewsList）：

<table>
    <tr>
        <th>
            Title
        </th>
        <th>
            Content
        </th>
        <th>
            Author
        </th>
        <th>
            CreateTime
        </th>
        <th>
            Country
        </th>
    </tr>
    <% foreach (var item in Model)
       { %>
    <tr>
        <td>
            <%= Html.Encode(item.id) %>
        </td>
        <td>
            <%= Html.Encode(item.Title) %>
        </td>
        <td>
            <%= Html.Encode(item.Content) %>
        </td>
        <td>
            <%= Html.Encode(item.Author) %>
        </td>
        <td>
            <%= Html.Encode(String.Format("{0:g}", item.CreateTime)) %>
        </td>
        <td>
            <%= Html.Encode(item.Country) %>
        </td>
    </tr>
    <% } %>
</table>

Controller:

{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
this.style.display='none'; document.getElementById('Code_Closed_Text_154420').style.display='none'; document.getElementById('Code_Open_Image_154420').style.display='inline'; document.getElementById('Code_Open_Text_154420').style.display='inline';
}
}
}
}
}
}
}" id="Code_Closed_Image_154420" style="display: none">{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
function onclick()
{
this.style.display='none'; document.getElementById('Code_Open_Text_154420').style.display='none'; getElementById('Code_Closed_Image_154420').style.display='inline'; getElementById('Code_Closed_Text_154420').style.display='inline';
}
}
}
}
}
}
}" id="Code_Open_Image_154420">Code
public ActionResult Search(string title)
        {
            NewsDataDataContext dc = new NewsDataDataContext();
            return View("NewsList", dc.News.Where(n => n.Title.Contains(title)));
        }
        public ActionResult NewsShow()
        {
            return View();
        }

這裡需要注意的就是ajax的返回可以支援ActionResult，只要這個ActionResult為Partial類型的View即可正確顯示

 三、參考：

《Professional ASP.NET MVC 1.0》

《Pro ASP.NET MVC  Framework》

四、源碼