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视图