MVC神韻---你想在哪解脫！（十）

 增長追加數據的方法和視圖

如今咱們將要在數據庫中追加並保存一些數據。咱們將要建立一個表單以及一些表單輸入控件，用來輸入數據信息。當用戶提交表單時將把這些用戶輸入的信息保存在數據庫中。咱們能夠經過在瀏覽器中輸入「http://localhost:xx/Movies/Create」這個URL地址來訪問這個表單。首先，咱們須要在咱們的MoviesController類中追加一個Create方法，該方法返回一個視圖，該視圖中包含了用戶輸入信息時所要用到的表單。

public ActionResult Create() 

{

    return View();

}

如今讓咱們來實現這個Create方法中所要返回的視圖，咱們將在這個視圖中向用戶顯示追加數據時所須要用到的表單。在Create方法中點擊鼠標右鍵，並點擊上下文菜單中的「添加視圖」。在「添加視圖」對話框中選擇「建立強類型視圖」，將模型類指定爲「Movie」，在支架模板中選擇Create，如圖：

點擊添加按鈕，Views文件夾下的Movies文件夾中將會自動添加一個名爲「Create.cshtml」的視圖模板文件。由於你在支架模板中選擇了「Create」,因此支架模板會在該視圖模板文件中自動生成一些默認代碼。打開該文件進行查看，在該文件中已經自動建立了一個HTML表單，以及一段用來顯示校驗時錯誤信息的文字。Visual Web Developer檢查Movies類，並自動建立與該類中每一個屬性相對應的<label>元素以及<input>元素。支架模板自動生成的建立數據所用視圖中的代碼如代碼清單：

 

@model MvcMovie.Models.Movie

@{ 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>

@using (Html.BeginForm()) { @Html.ValidationSummary(true) <fieldset>

<legend>Movie</legend>

<div class="editor-label">

@Html.LabelFor(model => model.Title)</div>

<div class="editor-field">

@Html.EditorFor(model => model.Title)

@Html.ValidationMessageFor(model => model.Title)</div>

<div class="editor-label">

@Html.LabelFor(model => model.ReleaseDate)</div>

<div class="editor-field">

@Html.EditorFor(model => model.ReleaseDate)

@Html.ValidationMessageFor(model => model.ReleaseDate)</div>

<div class="editor-label">

@Html.LabelFor(model => model.Genre)</div>

<div class="editor-field">

@Html.EditorFor(model => model.Genre)

@Html.ValidationMessageFor(model => model.Genre)</div>

<div class="editor-label">

@Html.LabelFor(model => model.Price)</div>

<div class="editor-field">

@Html.EditorFor(model => model.Price)

@Html.ValidationMessageFor(model => model.Price)</div>

<p><input type="submit" value="Create" /></p>

</fieldset>

}

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

這段代碼中使用了幾個HTML幫助器的方法來幫助簡化HTML標籤的書寫方法。Html.LabelFor幫助器用於顯示字段名（」Title」,」ReleaseDate」,」Genre」或者」Price」）。Html.EditorFor幫助器用於顯示一個提供給用戶輸入信息的HTML的<input>元素。Html.ValidationMessageFor幫助器用於顯示一個針對屬性的校驗信息。請注意咱們的視圖模板的頂部有一個「@model MvcMovie.Models.Movie」的聲明，該聲明將咱們的視圖模板中的「模型」強類型化成一個Movie類。運行應用程序，在瀏覽器中輸入「http://localhost:xx/Movies/Create」,瀏覽器中顯示如圖：

好，如今咱們修改一下代碼，使它成爲咱們的表單：

 

@model MvcMovie.Models.Movie

@{ ViewBag.Title = "追加電影信息";}

<h2>追加電影信息</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>

@using (Html.BeginForm()) {

@Html.ValidationSummary(true)

<fieldset>

<legend>電影</legend>

<div class="editor-label">標題</div>

<div class="editor-field">

@Html.EditorFor(model => model.Title) @Html.ValidationMessageFor(model => model.Title)</div>

<div class="editor-label">發行日期</div>

<div class="editor-field">

@Html.EditorFor(model => model.ReleaseDate)

@Html.ValidationMessageFor(model => model.ReleaseDate)</div>

<div class="editor-label">種類</div>

<div class="editor-field">

@Html.EditorFor(model => model.Genre)

@Html.ValidationMessageFor(model => model.Genre)</div>

<div class="editor-label">票價</div>

<div class="editor-field">

@Html.EditorFor(model => model.Price)

@Html.ValidationMessageFor(model => model.Price)</div>

<p><input type="submit" value="追加" /></p>

</fieldset>

}

<div> @Html.ActionLink("返回電影列表", "Index")</div>

修改完畢後從新運行程序，而後訪問「http://localhost:xx/Movies/Create」這個地址，瀏覽器中顯示如圖:

咱們已經實現了顯示追加數據所用表單的所需代碼。咱們的下一步是編寫代碼來進行表單提交到服務器後的處理。咱們將要獲取用戶在數據庫中輸入的信息而且將它們做爲一個新的Movie保存到數據庫中。請關注下一節！