ASP.NET MVC DynamicData 留言本實作 (下)：以 Create 頁面整合編輯功能

延續前兩篇，本文示範如何在同一個 Create 檢視頁面整合新增與編輯功能，透過可空 id 參數區分模式，呼應傳統 ASP.NET 單頁面多模式的設計習慣。

設計理念

ASP.NET MVC 強調關注點分離，但實務上「新增」與「編輯」往往共用 90% 以上的表單欄位與驗證邏輯。合併為單一 Action + View 可減少重複代碼，僅在「載入既有資料」與「決定 Insert/Update」處加入判斷。

列表頁新增編輯連結

<% foreach (var a in ViewData.Model) { %>
    <fieldset>
        <legend><% Html.RenderDynamicField(a, "Title"); %></legend>
        <!-- 其他欄位 -->
        <%= Html.ActionLink("修改", "Create", new { id = a.ID }, null) %>
    </fieldset>
<% } %>

產生連結：/Article/Create?id=123

Controller Action 整合邏輯

public class ArticleController : Controller {
    private DMvcDataDataContext db = new DMvcDataDataContext();

    // GET: 新增或編輯表單
    public ActionResult Create(int? id) {
        Article article;
        if (id.HasValue) {
            // 編輯模式：載入既有資料
            article = db.Articles.SingleOrDefault(a => a.ID == id.Value);
            if (article == null) return RedirectToAction("Index");
        } else {
            // 新增模式：建立空實體
            article = new Article();
        }
        return View(article);
    }

    // POST: 處理表單提交
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create(Article article) {
        if (ModelState.IsValid) {
            if (article.ID == 0) {
                // 新增
                db.Articles.InsertOnSubmit(article);
            } else {
                // 編輯：附加現有實體並更新
                var existing = db.Articles.Single(a => a.ID == article.ID);
                // 手動映射或使用 UpdateModel/TryUpdateModel
                existing.Title = article.Title;
                existing.Content = article.Content;
                // ... 其他欄位
            }
            db.SubmitChanges();
            return RedirectToAction("Index");
        }
        return View(article); // 驗證失敗回傳表單
    }
}

View 共用表單 (Create.aspx)

<% using (Html.BeginForm()) { %>
    <%= Html.ValidationSummary() %>
    <%= Html.Hidden("ID") %> <!-- 新增時為 0，編輯時帶入既有 ID --%>
    
    <div class="editor-field">
        <%= Html.Label("Title", "標題") %>
        <%= Html.TextBox("Title", Model.Title) %>
        <%= Html.ValidationMessage("Title") %>
    </div>
    
    <div class="editor-field">
        <%= Html.Label("Content", "內容") %>
        <%= Html.TextArea("Content", Model.Content) %>
        <%= Html.ValidationMessage("Content") %>
    </div>
    
    <input type="submit" value="<%= Model.ID == 0 ? "新增" : "更新" %>" />
<% } %>

DynamicData 整合優勢

• Html.RenderDynamicField 自動依據中繼資料產生適當編輯控制項
• DynamicDataModelBinder 支援複雜型別自動繫結
• 驗證屬性（Required, StringLength 等）同時作用於伺服端與客戶端

路由設定補充

routes.MapRoute(
    "ArticleEdit",
    "Article/Create/{id}",
    new { controller = "Article", action = "Create", id = UrlParameter.Optional }
);

支援 /Article/Create（新增）與 /Article/Create/5（編輯）兩種 URL 形式。