在本節中,您将開始修改為電影控制器所新加的操作方法和視圖。然後,您将添加一個自定義的搜尋頁。
在浏覽器位址欄裡追加/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>操作方法。
<input type="submit" value="Save" />
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
注意,視圖模闆在檔案的頂部有 <code>@model MvcMovie.Models.Movie </code>的聲明,這将指定視圖期望的模型類型為<code>Movie</code>。
運作該應用程式,然後浏覽URL,/Movies。單擊Edit連結。在浏覽器中檢視頁面源代碼。HTML Form中的元素如下所示:
</form>
被<code><form></code> HTML 元素所包括的 <code><input></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><label></code>元素。下面是生成的視圖:
@Html.ActionLink("Create New", "Create")
<table>
<tr>
<th>
Title
</th>
ReleaseDate
Genre
Price
<th></th>
</tr>
@foreach (var item in Model) {
<td>
@Html.DisplayFor(modelItem => item.Title)
</td>
@Html.DisplayFor(modelItem => item.ReleaseDate)
@Html.DisplayFor(modelItem => item.Genre)
@Html.DisplayFor(modelItem => 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 })
</table>
運作該應用程式,然後轉到 /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")
<input type="submit" value="Filter" />
下面的示例展示了添加後, Views\Movies\SearchIndex.cshtml 檔案的一部分:
@using (Html.BeginForm()){
<code>Html.BeginForm Helper</code>建立開放<code><form></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,如需轉載請自行聯系原作者