Asp.net MVC學習日記十一（JQuery非同步提交表單）

1、去http://jquery.malsup.com/form/.下載 jquery.form.js外掛程式

2、引入jquery-1.6.2.min.js和jquery.form.js

    <script src="../../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.form.js" type="text/javascript"></script>

3、上一篇的Article是必須的

  public class Article
    {
        public Guid ID { get; set; }

        public string Title { get; set; }
        public string Subject { get; set; }

        public string Description { get; set; }
        public DateTime CreateDate { get; set; }
        public bool IsPublished { get; set; }
        public int TimesViewed { get; set; }

        public string FormattedCreateDate
        {
            get
            {
                if (CreateDate != DateTime.MinValue)
                    return string.Format("{0:d/M/yyyy HH:mm:ss}", CreateDate);
                return "";
            }
        }
    }

4、HomeController中添加Article，ArticleSaved，_ArticleSaved和Post的Article

     public ActionResult Article()
        {
            return View(new Article());
        }

        public ActionResult ArticleSaved()
        {
            return View();
        }

        public ActionResult _ArticleSaved()
        {
            return PartialView();
        }

        [HttpPost]
        public ActionResult Article(Article article, string btnSubmit)
        {
            if (Request.IsAjaxRequest())
                return Content("Article Saved!");
            return RedirectToAction("ArticleSaved");
        }

5、實現ArticleSaved的視圖ArticleSaved.aspx,在內部加入以下代碼

<% Html.RenderPartial("_ArticleSaved"); %>

6、實現_ArticleSaved的分部視圖_ArticleSaved.ascx,在其內部加入以下代碼

<p>Hello,Not AjaxForm</p>

7、Article.aspx中

<script language="javascript" type="text/javascript">
    $(function () {
        $("form").ajaxForm({ target: "#result" });
    });
</script>

    <h2>Article</h2>

    <div id="result"></div>

    <%using (Html.BeginForm("Article", "Home")) { %>
       
        <fieldset>
            <legend>Fields</legend>
           
            <div class="editor-label">
                <%: Html.LabelFor(model => model.ID) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.ID) %>
                <%: Html.ValidationMessageFor(model => model.ID) %>
            </div>
           
            <div class="editor-label">
                <%: Html.LabelFor(model => model.Title) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Title) %>
                <%: Html.ValidationMessageFor(model => model.Title) %>
            </div>
           
            <div class="editor-label">
                <%: Html.LabelFor(model => model.Subject) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Subject) %>
                <%: Html.ValidationMessageFor(model => model.Subject) %>
            </div>
           
            <div class="editor-label">
                <%: Html.LabelFor(model => model.Description) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Description) %>
                <%: Html.ValidationMessageFor(model => model.Description) %>
            </div>
           
            <div class="editor-label">
                <%: Html.LabelFor(model => model.CreateDate) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.CreateDate, String.Format("{0:g}", Model.CreateDate)) %>
                <%: Html.ValidationMessageFor(model => model.CreateDate) %>
            </div>
           
            <div class="editor-label">
                <%: Html.LabelFor(model => model.IsPublished) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.IsPublished) %>
                <%: Html.ValidationMessageFor(model => model.IsPublished) %>
            </div>
           
            <div class="editor-label">
                <%: Html.LabelFor(model => model.TimesViewed) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.TimesViewed) %>
                <%: Html.ValidationMessageFor(model => model.TimesViewed) %>
            </div>
             <input type="submit" value="save" />
        </fieldset>

     
    <% } %>

    <div>
        <%: Html.ActionLink("Back to List", "Index") %>
    </div>

直接點擊save，會通過JQuery的非同步Form回傳，返回Article Saved!

如果，把$("form").ajaxForm({ target: "#result" });注釋掉的話，那麼你會進入_ArticleSaved.ascx視圖