Ajax.BeginForm結合Jquery UI學習(附源代碼）

本文將帶大家來學習一下Ajax.BeginForm與Jquery UI(Dialog)。

題外話，Hmtl.BeginForm與Ajax.BeginForm的差別，用Html.BeginForm()來提交的話，相當於提交整個頁面，而使用Ajax.BeginForm來提交的話，相當於用Ajax的方式來提交。用AJAX來提交，能實現異步的交互方式，從而實現局部頁面的刷新，增強用戶體驗。

關於Jquery UI，大家可以到官網下載所需要的腳本及樣式文件。本文只介紹Jquery UI里面的Dialog,但是至少你還得下載四個腳本文件，分別勾上Core、Widget、Position和Dialog。下載完之后，把里面的一些樣式、腳本文件及圖像加載到我們新建的項目里面，這里面以MVC2（ASP.NET MVC2 Web Application）來作為實例說明。為了更方便大家來看到效果，我上傳了源碼，大家需要的話，可以通過此鏈接來進行下載。加載需要的Jquery UI的文件這部分我就不進行說明了，這里面有一點大家需要注意的，就是導入Jquery UI的腳本文件的時候，是有順序之分的。大家可以按照Jquery UI的Sample一樣來導入，具體我知道Core(jquery.ui.core.js)是必須放在其它三個腳本文件的前面，剩下的我沒有具體去試試。

講到Ajax.BeginForm，這里又不得不說題外話，如果你想要使用到Ajax.BeginForm,你還得導入兩個腳本文件，分別為：MicrosoftAjax.js和MicrosoftMvcAjax.js，當然這兩個的導入也是有順序要求，要先導入MicrosoftAjax.js，然后再導入MicrosoftMvcAjax.js，不然也是會報腳本錯誤。不過在MVC2的工程里面，這些腳本都已經集成到 工程目錄/Scripts目錄里面了，所以你只需要做的是導入它們就可以了。當然，上面的所有腳本都離不開Jquery的腳本，所以Jquery的腳本文件最先導入。如果你是用MVC2里面自帶的Jquery腳本的話，那就是jquery-1.4.1.js。好了，介紹就到這吧。現在來呈現代碼方面的說明。首先，我們來看看腳本的導入順序。這里面主要是三類腳本文件，分別是Jquery、Jquery UI和Ajax.BeginFrom需要的腳本文件，最好是按照固定的順序來導入。不然有可能會報腳本的錯誤。

<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>

<script type="text/javascript" src="../Scripts/JqueryUI/jquery.ui.core.js"></script>

<script type="text/javascript" src="../Scripts/JqueryUI/jquery.ui.position.js"></script>

<script type="text/javascript" src="../Scripts/JqueryUI/jquery.ui.widget.js"></script>

<script type="text/javascript" src="../Scripts/JqueryUI/jquery.ui.dialog.js"></script>

<script type="text/javascript" src="../Scripts/JqueryUI/jquery-ui-1.8.16.custom.js"></script>

<script type="text/javascript" src="../Scripts/MicrosoftAjax.js"></script>

<script type="text/javascript" src="../Scripts/MicrosoftMvcAjax.js"></script>

接着，我們來看看Jquery UI的Dialog的腳本代碼：

<script type="text/javascript">
    $(function () {
        $("#dialog-modal").dialog({
            autoOpen: false,
            minHeight: 200,
            width: 550,
            modal: true,
            open: function (event, ui) {
 
                $.ajax({
                    type: "POST",
                    url: "/Account/LogOnControl",
                    data: {},
                    success: function (data) {
                        $("#dialog-modal").html(data);
                    }
                });
            }
        });
 
        $("#BtnLogOn").click(function () {
            $("#dialog-modal").dialog("open");
        });
    });
 
    function checkIfLogon(ajaxContext) {
 
        var jsonResult = {};
        try {
            jsonResult = ajaxContext.get_response().get_object();
        } catch (e) {
            return;  // return if result is not json
        }
 
        if (jsonResult.LogSuccessful == true) {
 
            $("#dialog-modal").dialog("close");
            alert("Log Success!");
        }
    }
</script>

這里面$("#dialog-modal").dialog({…})就是實現彈出框的代碼，觸發彈出框的事件是點擊了ID為BtnLogOn的按鈕時。這里面也有陷阱，如果不小心，你又會掉進去，那就是關於$("#dialog-modal").dialog()的寫法，要么你就像我一樣，直接把它放到$(function(){…});里面，要么就是把$("#dialog-modal").dialog({…})和$("#dialog-modal").dialog(“open”)都放到同一個函數里面，不然也是會報腳本的錯誤。里面的open函數，是指打開Dialog的時候，需要執行什么內容。這里面我是用Jquery的Ajax方式來加載登錄頁面，先附一張圖片來看看效果,紅框處就是Ajax加載的登錄頁。 

 

 這里面Ajax加載進來的登錄頁是一個局部頁面（本項目里面的LogonControl.ascx頁面）。此頁面的內容如下：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<AjaxForm.Models.LogOnModel>" %>
 
<div id="Container" >
    <% using (Ajax.BeginForm("Logon", "Account", null, new AjaxOptions
       {
           UpdateTargetId = "Container",  
           HttpMethod = "Post",
           OnSuccess = "checkIfLogon",
       }))
       { %>    
 
            <div style="position:relative;clear:both;width:85%;margin-left:auto;margin-right:auto;margin-top:20px;">
                <label style="margin: 10px 0px 0px 0px; float:left; clear:both;">User Name:</label>
                    <%: Html.TextBoxFor(m => m.UserName, new { @maxlength = "100", @tabindex = "1", 
                                                          @Style = "margin:2px;float:left;clear:both; width:100%;" })%>
                 <label style="margin: 10px 0px 0px 0px; float:left; clear:both;">
                    <%: Html.ValidationMessageFor(model => model.UserName)%></label>
            </div>
            <div style="position: relative; clear:both;width:85%;margin-left:auto;margin-right:auto;">
                <label style="margin: 10px 0px 0px 0px; float:left; clear:both;">Password:</label>
                    <%: Html.PasswordFor(m => m.Password, new { @maxlength = "50", @tabindex = "2",
                                                          @Style = "margin:2px;float:left;clear:both;width:100%;" })%>
            <label style="margin: 10px 0px 0px 0px; float:left; clear:both;">
                    <%: Html.ValidationMessageFor(model => model.Password)%></label>
            </div>
 
                    
            <div style="float: right; margin-right: 20px; margin-top: 50px;">
                    <input type="submit" value="Log On" />
            </div>
    <% } %>
</div>

這里面UpdateTargetId 是指這個Ajax.BeginForm執行成功的話，返回的內容將要顯示在哪個位置。這里面主要是把驗證的錯誤信息顯示出來(這里面相當於重新加載一次LogonControl.ascx頁面)。OnSuccess方法是Ajax.BeginForm執行成功的話，需要執行的函數，這里面我是讓它關閉彈出框，並alert一個成功的信息。我們來看看這驗證結果的效果圖： 

這里面我只是驗證非空的情況，也就是Action里面並沒有做其它的邏輯判斷，只要不是非空時，就會關閉Dialog並alert成功信息。

本文以拋磚引玉的方式來講解Ajax.BeginForm與Jquery UI(Dialog)的使用方式，希望大家會喜歡。如果大家想轉載本文的話，請標注，謝謝合作！