天天看點

Asp.Net MVC4入門指南(6):驗證編輯方法和編輯視圖

在本節中,您将開始修改為電影控制器所新加的操作方法和視圖。然後,您将添加一個自定義的搜尋頁。

在浏覽器位址欄裡追加/Movies, 浏覽到Movies頁面。并進入編輯(Edit)頁面。

<a href="http://powertoolsteam.blog.51cto.com/attachment/201301/24/2369428_13589999794nT1.png"></a>

Edit(編輯)連結是由Views\Movies\Index.cshtml視圖中的<code>Html.ActionLink</code>方法所生成的:

<a href="http://powertoolsteam.blog.51cto.com/attachment/201301/24/2369428_1358999979EzFG.png"></a>

在上圖中所生成的連結是http://localhost:xxxxx/Movies/Edit/4預設的路由 (在App_Start\RouteConfig.cs 中設定) 使用的 URL 比對模式為: <code>{controller}/{action}/{id}</code>。是以,ASP.NET 将http://localhost:xxxxx/Movies/Edit/4轉化到<code>Movies</code> 控制器中<code>Edit</code>操作方法,參數<code>ID</code>等于 4 的請求。檢視App_Start\RouteConfig.cs檔案中的以下代碼。

您還可以使用QueryString來傳遞操作方法的參數。例如,URL: http://localhost:xxxxx/Movies/Edit?ID=4還會将參數<code>ID</code>為 4的請求傳遞給<code>Movies</code>控制器的<code>Edit</code>操作方法。

<a href="http://powertoolsteam.blog.51cto.com/attachment/201301/24/2369428_1358999980dX65.png"></a>

打開<code>Movies</code>控制器。如下所示的兩個<code>Edit</code>操作方法。

            &lt;input type="submit" value="Save" /&gt;

&lt;/fieldset&gt;

}

&lt;div&gt;

@Html.ActionLink("Back to List", "Index")

&lt;/div&gt;

@section Scripts {

@Scripts.Render("~/bundles/jqueryval")

注意,視圖模闆在檔案的頂部有 <code>@model MvcMovie.Models.Movie </code>的聲明,這将指定視圖期望的模型類型為<code>Movie</code>。

運作該應用程式,然後浏覽URL,/Movies。單擊Edit連結。在浏覽器中檢視頁面源代碼。HTML Form中的元素如下所示:

&lt;/form&gt;

被<code>&lt;form&gt;</code> HTML 元素所包括的 <code>&lt;input&gt;</code> 元素會被發送到,form的<code>action</code>屬性所設定的URL:/Movies/Edit。單擊Edit按鈕時,from資料将會被發送到伺服器。

下面的代碼顯示了<code>Edit</code>操作方法的<code>HttpPost</code>處理:

如果form發送的值不是有效的值,它們将重新顯示在form中。Edit.cshtml視圖模闆中的<code>Html.ValidationMessageFor</code> Helper将用來顯示相應的錯誤消息。

<a href="http://powertoolsteam.blog.51cto.com/attachment/201301/24/2369428_1358999980Ksrv.png"></a>

十進制字段可能需要逗号,而不是小數點。作為臨時的修複,您可以向項目根 web.config 檔案添加的全球化設定。下面的代碼示範設定為美國英語的全球化文化設定。

在本節中,您将添加一個搜尋電影流派或名稱的<code>SearchIndex</code>操作方法。這将可使用/Movies/SearchIndex URL。該請求将顯示一個 HTML 表單,其中包含輸入的元素,使用者可以輸入一部要搜尋的電影。當使用者送出窗體時,操作方法将擷取使用者輸入的搜尋條件并在資料庫中搜尋。

通過将<code>SearchIndex</code>操作方法添加到現有的<code>MoviesController</code>類開始。該方法将傳回一個視圖包含一個 HTML 表單。如下代碼:

查詢在這一點上,隻是定義,并還沒有執行到資料上。

如果<code>searchString</code>參數包含一個字元串,可以使用下面的代碼,修改電影查詢要篩選的搜尋字元串:

現在,您可以實作<code>SearchIndex</code>視圖并将其顯示給使用者。在<code>SearchIndex</code>方法内單擊右鍵,然後單擊添加視圖。在添加視圖對話框中,指定你要将<code>Movie</code>對象傳遞給視圖模闆作為其模型類。在架構模闆清單中,選擇清單,然後單擊添加.

<a href="http://powertoolsteam.blog.51cto.com/attachment/201301/24/2369428_1358999981wvm5.png"></a>

當您單擊添加按鈕時,建立了Views\Movies\SearchIndex.cshtml視圖模闆。因為你選中了架構模闆的清單,Visual Studio 将自動生成清單視圖中的某些預設标記。架構模版建立了 HTML 表單。它會檢查<code>Movie</code>類,并為類的每個屬性建立用來展示的<code>&lt;label&gt;</code>元素。下面是生成的視圖:

    @Html.ActionLink("Create New", "Create")

&lt;table&gt;

&lt;tr&gt;

&lt;th&gt;

Title

&lt;/th&gt;

ReleaseDate

Genre

Price

&lt;th&gt;&lt;/th&gt;

&lt;/tr&gt;

@foreach (var item in Model) {

&lt;td&gt;

@Html.DisplayFor(modelItem =&gt; item.Title)

&lt;/td&gt;

@Html.DisplayFor(modelItem =&gt; item.ReleaseDate)

@Html.DisplayFor(modelItem =&gt; item.Genre)

@Html.DisplayFor(modelItem =&gt; item.Price)

@Html.ActionLink("Edit", "Edit", new { id=item.ID }) |

@Html.ActionLink("Details", "Details", new { id=item.ID }) |

@Html.ActionLink("Delete", "Delete", new { id=item.ID })

&lt;/table&gt;

運作該應用程式,然後轉到 /Movies/SearchIndex。追加查詢字元串到URL如<code>?searchString=ghost</code>。顯示已篩選的電影。

<a href="http://powertoolsteam.blog.51cto.com/attachment/201301/24/2369428_1358999981RAxl.png"></a>

如果您更改<code>SearchIndex</code>方法的簽名,改為參數<code>id</code>,在Global.asax檔案中設定的預設路由将使得: <code>id</code>參數将比對<code>{id}</code>占位符。

原來的<code>SearchIndex</code>方法看起來是這樣的:

修改後的<code>SearchIndex</code>方法将如下所示:

您現在可以将搜尋标題作為路由資料 (部分URL) 來替代QueryString。

<a href="http://powertoolsteam.blog.51cto.com/attachment/201301/24/2369428_1358999982rMDl.png"></a>

但是,每次使用者想要搜尋一部電影時, 你不能指望使用者去修改 URL。是以,現在您将添加 UI頁面,以幫助他們去篩選電影。如果您更改了的<code>SearchIndex</code>方法來測試如何傳遞路由綁定的 ID 參數,更改它,以便您的<code>SearchIndex</code>方法采用字元串<code>searchString</code>參數:

打開Views\Movies\SearchIndex.cshtml檔案,并在 <code>@Html.ActionLink("Create New", "Create")</code>後面,添加以下内容:

Title: @Html.TextBox("SearchString")

         &lt;input type="submit" value="Filter" /&gt;

下面的示例展示了添加後, Views\Movies\SearchIndex.cshtml 檔案的一部分:

     @using (Html.BeginForm()){    

<code>Html.BeginForm Helper</code>建立開放<code>&lt;form&gt;</code>标記。<code>Html.BeginForm </code>Helper将使得, 在使用者通過單擊篩選按鈕送出窗體時,窗體Post本Url。運作該應用程式,請嘗試搜尋一部電影。

<a href="http://powertoolsteam.blog.51cto.com/attachment/201301/24/2369428_1358999983v1rB.png"></a>

<code>SearchIndex</code>沒有<code>HttpPost</code> 的重載方法。你并不需要它,因為該方法并不更改應用程式資料的狀态,隻是篩選資料。

您可以添加如下的<code>HttpPost SearchIndex</code> 方法。在這種情況下,請求将進入<code>HttpPost SearchIndex</code>方法,<code>HttpPost SearchIndex</code>方法将傳回如下圖的内容。

<a href="http://powertoolsteam.blog.51cto.com/attachment/201301/24/2369428_1358999983HucP.png"></a>

但是,即使您添加此<code>HttpPost</code><code>SearchIndex</code> 方法,這一實作其實是有局限的。想象一下您想要添加書簽給特定的搜尋,或者您想要把搜尋連結發送給朋友們,他們可以通過單擊看到一樣的電影搜尋清單。請注意 HTTP POST 請求的 URL 和GET 請求的URL 是相同的(localhost:xxxxx/電影/SearchIndex)— — 在 URL 中沒有搜尋資訊。現在,搜尋字元串資訊作為窗體字段值,發送到伺服器。這意味着您不能在 URL 中捕獲此搜尋資訊,以添加書簽或發送給朋友。

解決方法是使用重載的<code>BeginForm</code> ,它指定 POST 請求應添加到 URL 的搜尋資訊,并應該路由到 HttpGet <code>SearchIndex</code> 方法。将現有的無參數<code>BeginForm</code> 方法,修改為以下内容:

<a href="http://powertoolsteam.blog.51cto.com/attachment/201301/24/2369428_1358999984fFJ9.png"></a>

現在當您送出搜尋,該 URL 将包含搜尋的查詢字元串。搜尋還會請求到 <code>HttpGet SearchIndex</code>操作方法,即使您也有一個<code>HttpPost SearchIndex</code>方法。

<a href="http://powertoolsteam.blog.51cto.com/attachment/201301/24/2369428_1358999984OHmN.png"></a>

如果您添加了<code>HttpPost </code>的<code>SearchIndex</code>方法,請立即删除它。

接下來,您将添加功能可以讓使用者按流派搜尋電影。将<code>SearchIndex</code>方法替換成下面的代碼:

這版的<code>SearchIndex</code>方法将接受一個附加的<code>movieGenre</code>參數。前幾行的代碼會建立一個<code>List</code>對象來儲存資料庫中的電影流派。

下面的代碼是從資料庫中檢索所有流派的 LINQ 查詢。

下面的代碼示範如何檢查<code>movieGenre</code>參數。如果它不是空的,代碼進一步指定了所查詢的電影流派。

在<code>TextBox </code>Helper之前添加 <code>Html.DropDownList </code>Helper到Views\Movies\SearchIndex.cshtml檔案中。添加完成後,如下面所示:

    @using (Html.BeginForm("SearchIndex","Movies",FormMethod.Get)){    

Genre: @Html.DropDownList("movieGenre", "All")  

           Title: @Html.TextBox("SearchString")  

運作該應用程式并浏覽 /Movies/SearchIndex。按流派、 按電影名,或者同時這兩者,來嘗試搜尋。

<a href="http://powertoolsteam.blog.51cto.com/attachment/201301/24/2369428_1358999985M1Ah.png"></a>

在這一節中您修改了CRUD 操作方法和架構所生成的視圖。您建立了一個搜尋操作方法和視圖,讓使用者可以搜尋電影标題和流派。在下一節中,您将看到如何将屬性添加到<code>Movie</code>模型,以及如何添加一個初始設定并自動建立一個測試資料庫。

本文轉自 powertoolsteam 51CTO部落格,原文連結:http://blog.51cto.com/powertoolsteam/1125390,如需轉載請自行聯系原作者