【譯】MVC3 20個秘方-（14）使用Ajax 提交 Form表單

使用MVC 的 AjaxHelper 提交表單。當(dāng)model 發(fā)生改變時，調(diào)用我們實現(xiàn)的BookInitializer刪除并創(chuàng)建新的數(shù)據(jù)庫。

問題

你有一個網(wǎng)頁，列出重要的信息明細，你要允許用戶迅速、輕松提交一個表單，無需重新加載整個頁面，失去自己在網(wǎng)站上的位置。

解決方案

使用AjaxHelper，創(chuàng)建一個新的Form，用新提交的內(nèi)容自動更新現(xiàn)有的內(nèi)容。

討論

下邊的例子把以前的秘方放在一起，向人們展示如何讓用戶提交一本書的評論，而不重定向到另一個頁面去看那些評論以及自己提交的評論。

首先，我們需要創(chuàng)建一個新的model，用于存儲對書的評論。在model文件夾，右鍵->添加->class，命名為：BookComment.cs。這個模型將用于存儲對書的評論。代碼如下：

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace MvcApplication.Models
{
    public class BookComment
    {
        public int ID { get; set; }
        [Required]
        public string Comment { get; set; }
        public DateTime Created { get; set; }
        public int BookId { get; set; }
        public virtual Book Book { get; set; }
    }
}

下一步，必須更新先前創(chuàng)建的BookDBContext，去對這個表添加一個引用。先前的這個類是創(chuàng)建在原始的BookModel上。因此專門創(chuàng)建一個新的文件來存儲這個類是明智的選擇。因為它將在您的項目中和未來的表一起繼續(xù)成長。右鍵點擊Models文件夾。再次，選擇添加→類。這個類的名稱將BookDBContext：

（譯者：不要忘記刪除你在Book model里的BookDBContext哦！）

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;

namespace MvcApplication.Models
{
    public class BookDBContext : DbContext
    {
        public DbSet<Book> Books { get; set; }
        public DbSet<BookComment> BookComments { get; set; }
    }
}

下面，重新build你的解決方案，在下邊的步驟里你就可以找到我們新創(chuàng)建的model了。

我們要創(chuàng)建一個新的controller去實現(xiàn) 評論列表并且有能力去管理它們。選擇controller文件夾，單擊“添加”→“控制器，命名為：BookCommentsController.cs。為了是手工工作最小化。我們將使用Entity Framework 腳手架創(chuàng)建controller。對于Data context class，選擇剛才創(chuàng)建的BookDBContext。（譯者：Modle class 選擇：BookComment (MvcApplication.Models)）。點擊添加。當(dāng)你再次運行應(yīng)用程序時，你將接收到一個錯誤指示出：BookDBContext已經(jīng)改變了。為了解決這個問題，你必須為DBContext創(chuàng)建一個initializer（初始化器）。因為這不是一個生產(chǎn)環(huán)境的應(yīng)用程序，初始化器將刪除和重新創(chuàng)建數(shù)據(jù)庫。為了實現(xiàn)這個，右擊Models文件夾。選擇添加->class ，命名為BookInitializer，代碼如下：

using System;

using System.Collections.Generic;

using System.Data.Entity;

using System.Linq;

using System.Web;

 

namespace MvcApplication.Models

{

        public class BookInitializer : DropCreateDatabaseIfModelChanges<BookDBContext>

        {

        }

}

接下來Global.asax.cs要被更新，在Application_Start中去調(diào)用BookInitializer，更新Application_Start方法如下：

protected void Application_Start()
        {
            Database.SetInitializer<BookDBContext>(new BookInitializer());
            AreaRegistration.RegisterAllAreas();

            RegisterGlobalFilters(GlobalFilters.Filters);
            RegisterRoutes(RouteTable.Routes);
        }

配置工作完成了，現(xiàn)在我們要做的就是允許用戶通過Ajax提交一個評論。我們將從Book/Details view 開始，因為展現(xiàn)評論的大多數(shù)邏輯都在這里。（譯者：由于原書中引用代碼較多，我只在這指出我們更改的代碼）。代碼如下：

@model MvcApplication.Models.Book
@{
    ViewBag.Title = "Details";
}
<h2>
    Details</h2>
<fieldset>
    <legend>Book</legend>
    <div class="display-label">
        Title</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Title)
    </div>
    <div class="display-label">
        Isbn</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Isbn)
    </div>
    <div class="display-label">
        Summary</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Summary)
    </div>
    <div class="display-label">
        Author</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Author)
    </div>
    <div class="display-label">
        Thumbnail</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Thumbnail)
    </div>
    <div class="display-label">
        Price</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Price)
    </div>
    <div class="display-label">
        Published</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Published)
    </div>
</fieldset>
<fieldset>
    <legend>Comments</legend>
    <div id="Comments">
        @{Html.RenderAction("Index", "BookComments",new { BookId = Model.ID });}
    </div>
</fieldset>
<p>
    @Html.ActionLink("Edit", "Edit", new { id = Model.ID }) |
    @Html.ActionLink("Back to List", "Index")
</p>

在上邊代碼中添加了一個新的<fieldset>,它里邊又包含了一個<div>,div的id是” Comments”,在這個div中有一個Html.RenderAction（），它可以通過傳遞一個BookId參數(shù)到BookComment controller的Index action。

接下來，我們需要更新BookComments/Index view。在下邊的例子里，Create New link被更新成，通過Ajax替代重定向去展示Form。也會移除一些links，因為我們只需要添加的能力，不需要去管理這些評論。代碼如下：

@model IEnumerable<MvcApplication.Models.BookComment>
@{
    ViewBag.Title = "Index";
}
<h2>
    Index</h2>
<p>
    @Ajax.ActionLink("Create New", "Create", new
{
    BookId = ViewBag.BookId
},
new AjaxOptions { UpdateTargetId = "AddComment" })
</p>
<div id="AddComment">
</div>
<table>
    <tr>
        <th>
            Comment
        </th>
        <th>
            Created
        </th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Comment)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Created)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Book.Title)
            </td>
        </tr>
    }
</table>

最后注意，需要改變的是自動生成的BookComments/Create view。將使用Ajax.BeginForm 去替換默認的Html.BeginForm。另外一件事是告訴當(dāng)Ajax提交完成時，讓Form來調(diào)用一個JavaScript：函數(shù)ReloadComments（）。此函數(shù)使用jQuery的Ajax請求來檢索更新的評論列表。也要創(chuàng)建一個帶BookID的hidden field去替換自動創(chuàng)建的下拉列表。

代碼如下：

@model MvcApplication.Models.BookComment
@{
    ViewBag.Title = "Create";
}
<h2>
    Create</h2>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript">
function ReloadComments() {
$("#Comments").load("@Url.Content("~/BookComments/Index?BookId=" + ViewBag.BookId)");
}
</script>
@using (Ajax.BeginForm(new AjaxOptions
{
    OnComplete = "ReloadComments()"
}))
{
    @Html.Hidden("BookId", (int)ViewBag.BookId);
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>BookComment</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.Comment)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Comment)
            @Html.ValidationMessageFor(model => model.Comment)
        </div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

為了完成這個例子，我們還需要在BookCommentsController更新一些代碼：

（譯者：作者為嘛總是說最后一步，都多少個最后一步了，別急，馬上就完成了）

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication.Models;

namespace MvcApplication.Controllers
{
    public class BookCommentsController : Controller
    {
        private BookDBContext db = new BookDBContext();
        //
        // GET: /BookComments/
        public ActionResult Index(int BookId)
        {
            ViewBag.BookId = BookId;
            var bookcomments = db.BookComments.Include(
            b => b.Book).Where(b => b.BookId == BookId);
            return PartialView(bookcomments.ToList());
        }
        //
        // GET: /BookComments/Create
        public ActionResult Create(int BookId)
        {
            ViewBag.BookId = BookId;
            return PartialView();
        }
        //
        // POST: /BookComments/Create
        [HttpPost]
        public ActionResult Create(BookComment bookcomment)
        {
            if (ModelState.IsValid)
            {
                bookcomment.Created = DateTime.Now;
                db.BookComments.Add(bookcomment);
                db.SaveChanges();
            }
            ViewBag.BookId = bookcomment.BookId;
            return PartialView(bookcomment);
        }
        protected override void Dispose(bool disposing)
        {
            db.Dispose();
            base.Dispose(disposing);
        }
    }
}

在上面的例子中，Index Action已更新，接受整數(shù)的參數(shù)BookID。這被設(shè)置到ViewBag。另一個重要變化是，返回一個partial view 替代返回完整的view（阻止完整的layout顯示）。如果你還記得在前面的例子，我們重用了相同的view執(zhí)行Ajax請求，并在視圖中檢查，看它是否是一個Ajax請求去禁用layout。因為這個view是只通過Ajax顯示，更新controller去返回一個partial view是簡單的。
最后，Create action也被更新。基本的Create action就像Index action一樣接收一個BookID，并返回一個partial view。第二，Create函action已被更新去設(shè)置評論的創(chuàng)建日期。如果有錯誤，返回一個partial view。Edit，details和delete action已經(jīng)被移除了，因為沒用到他們。這些View也可以刪除，因為他們也沒有被使用。
現(xiàn)在，當(dāng)用戶瀏覽一本書的細節(jié)，他們可以看到全部評論
已發(fā)布的，如果他們想添加自己的意見，他們可以看到已經(jīng)評論的列表。如果他們想添加自己的內(nèi)容，他們可以點擊create new link，輸入他們的內(nèi)容，提交，并且自動的看到他們剛提交的內(nèi)容而不需要離開book詳細頁。

posted @ 2011-12-05 09:08 技術(shù)弟弟閱讀(5035) 評論(13) 收藏舉報

刷新頁面返回頂部

技術(shù)弟弟

【譯】MVC3 20個秘方-（14）使用Ajax 提交 Form表單

公告