MVC學習之AJAX實現提交後的響應

來源:互聯網
上載者:User
顯示使用者是否已經回複了使用者訪問/Dinners/Details/[id] URL,可以查看特定Dinner的詳細資料。關於Details action方法的實現,也不在這裡描述了。實現RSVP支援的第一步是在Dinner對象(Dinner.cs partial 類)中添加一個IsUserRegistered(username) 的輔助方法,該方法基於是否使用者已經回複了該Dinner晚宴,顯示true或false。public partial class Dinner {public bool IsUserRegistered(string userName) {return RSVPs.Any(r => r.AttendeeName.Equals(userName,StringComparison.InvariantCultureIgnoreCase));}} 接著添加如下代碼到Details.aspx 視圖模板,顯示合適的資訊,標識使用者是否已經註冊該晚宴或者沒有:    <% if (Request.IsAuthenticated)       { %>    <% if (Model.IsUserRegistered(Context.User.Identity.Name))       { %>    <p>        你已經註冊了該晚宴!</p>    <% }       else       { %>    <p>        你還沒有註冊該晚宴!</p>    <% } %>    <% }       else       { %>    現在<a href="/Account/Logon">登入</a>,註冊該晚宴。    <% } %> 現在當使用者訪問一個登入的Dinner時,將看到如下資訊:  當訪問一個未註冊的Dinner時,將看到如下資訊:
   實現Register Action 方法下面實現功能,讓使用者可以在詳細頁面登記宴會。為了實現這一功能,我們建立一個新的RSVPController類。在RSVPController類中實現Register action方法,傳入Dinner的id作為參數,尋找相應的Dinner對象,檢查登入的使用者是否註冊了該晚宴,如果沒有,則添加RSVP對象到資料庫中:    public class RSVPController : Controller    {        DinnerRepository dinnerRepository = new DinnerRepository();         //        // AJAX: /Dinners/RSVPForEvent/1        [Authorize, AcceptVerbs(HttpVerbs.Post)]        public ActionResult Register(int id)        {            Dinner dinner = dinnerRepository.GetDinner(id);             if (!dinner.IsUserRegistered(User.Identity.Name))            {                RSVP rsvp = new RSVP();                rsvp.AttendeeName = User.Identity.Name;                dinner.RSVPs.Add(rsvp);                dinnerRepository.Save();            }            return Content("謝謝- 到時候見!");        }    } 上述代碼返回一個簡單的字串作為action方法的輸出,我們也可以將這一訊息寫在視圖模板中。但是既然是一條簡單的字串,我們就是要Controller基類的Content() 輔助方法,返回一條字串。  使用AJAX 調用Register Action 方法我們將使用AJAX,在詳細整頁模式中調用Register action方法,相當容易實現。首先,我們添加2個指令碼庫的引用:    <script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>    <script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script> 第一個庫引用核心的ASP.NET AJAX 用戶端指令碼庫,這個檔案大概24k(壓縮之後),包含核心的用戶端AJAX功能。第二個庫包含有工具函數,與ASP.NET MVC內建的AJAX輔助方法整合。 接著,我們更新之前建立的視圖模板代碼。不要僅僅輸出“你還沒有註冊該晚宴!”,而是產生一個連結。當點擊這一連結時,執行AJAX調用,並調用RSVPController中的Register action方法:    <div id="rsvpmsg">    <% if (Request.IsAuthenticated)       { %>    <% if (Model.IsUserRegistered(Context.User.Identity.Name))       { %>    <p>        你已經註冊了該晚宴!</p>    <% }       else       { %>    <%= Ajax.ActionLink( "註冊該晚宴", "Register", "RSVP", new { id=Model.DinnerID }, new AjaxOptions { UpdateTargetId="rsvpmsg" }) %>    <% } %>    <% }       else       { %>    現在<a href="/Account/Logon">登入</a>,註冊該晚宴。    <% } %>    </div> 上述代碼使用的Ajax.ActionLink() 輔助方法是ASP.NET MVC內建的,與Html.ActionLink() 輔助方法類似,但不是執行一個標準的導航,而是進行AJAX調用一個action方法。上面,我們調用了RSVPController的Register action方法,並傳入Model.DinnerID作為id參數。最後的AjaxOptions 參數表示接收action方法返回的內容,並更新頁面中id為 rsvpmsg 的<div>元素。 現在當使用者訪問一個沒有註冊的Dinner記錄時,將看到“註冊該晚宴”的連結:
  當使用者點擊“註冊該晚宴”連結,將AJAX調用RSVP Controller的Register action方法,在完成方法調用後,將看到更新的訊息如下:
  上述AJAX調用觸發的網路頻寬和通訊量是非常輕量級的。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.