MVC項目開發中那些用到的知識點(Ajax.BeginForm)

Ajax.BeginForm可用於非同步提交表單。

@using (Ajax.BeginForm("AjaxFormPost", "Home",    new { ID="11", ClassName="FirstClass"},    new AjaxOptions    {        HttpMethod = "POST",        OnBegin="OnBeginPost()",        OnComplete="OnEndPost()",        OnSuccess="OnSuccessPost",        InsertionMode = InsertionMode.Replace    }))

 AjaxFormPost為Action，Home為控制器，new {ID=“11”，ClassName="FirstClass"}為路由參數即Url參數

AjaxOptions

1.HttpMethod提交表單的方式。

2.onBegin表單提交前 用戶端Js的操作。

3.OnSuccess表單提交後用戶端在此可以返回的操作

4.OnComplete表單提交完成後的操作

5.InsertionMode

    // 摘要:    //     Enumerates the AJAX script insertion modes.    public enum InsertionMode    {        // 摘要:        //     Replace the element.        Replace = 0,        //        // 摘要:        //     Insert before the element.        InsertBefore = 1,        //        // 摘要:        //     Insert after the element.        InsertAfter = 2,    }

 

    <div id="content">        <table>            <tr>                <td>                    @Html.Label("lblName", "姓名")                </td>                <td>                    @Html.TextBox("TxtName")                </td>            </tr>            <tr>                <td>                    @Html.Label("lblAge", "年齡")                </td>                <td>                    @Html.TextBox("TxtAge")                </td>            </tr>        </table>        <input type="submit" value="提交" />        </div>

 這是簡單的表單控制項，一個Name,一個Age,和一個提交按鈕。

下面來看一下對應Home控制器中Action的操作，此處只做測試，所以只進行取表單資料

        public string AjaxFormPost(string ID)        {            string ClassName = Request.QueryString["ClassName"];            string Name = Request.Form["TxtName"];            string Age = Request.Form["TxtAge"];            return "姓名" + Name + "年齡" + Age;        }

 ID為路由機制的參數。TxtName,TxtAge是通過表單進行擷取，前面設定為post方式，所以要用Request.Form的方式進行擷取相應的值。

然後返回一個字串string,如果想在用戶端進行返回此字串那麼可以在上面AjaxOptions中的OnSuccess   

<script type="text/javascript">      function OnSuccessPost(e) {         alert(e+"提交成功!");     } </script>

 

當然如果想調用用戶端JavaScript還需要引用一個JavaScript庫。

 

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
這樣就可以進行調用測試

 

範例程式碼