《Entity Framework 6 Recipes》中文翻譯系列 (21) -----第四章 ASP.NET MVC中使用實體框架之在頁面中創建查詢和使用ASP.NET URL路由過慮

翻譯的初衷以及為什么選擇《Entity Framework 6 Recipes》來學習，請看本系列開篇

4.2. 構建一個搜索查詢

　　搜索數據是幾乎所有應用的一個基本功能。它一般是動態的，因為用戶可能使用提供的任何一個條件，或者一個也不使用。所以，我們在下面討論實現這個基本功能的一些細節。

問題

　　你想在ASP.NET MVC4中使用實體框架構建一搜索頁面。

 

解決方案

　　假設你有如圖4-14所示的模型，在這個解決方案中，我們打算使用三個基本的部分來構建搜索頁：

　　　　1、一張用於構造查詢參數的表；

　　　　2、一個用於在Razor視圖中呈現結果的WebGrid;

　　　　3、一個包含視圖邏輯的Cotroller;

　　在數據庫中，你有一張Customer表，它存儲所有客戶的Name,City和State信息。Customer表的數據模型（架構）如圖4-14所示。

 

圖4-14 一個包含Customer 實體的模型

　　 

 　　在Customer視圖模型被創建之后，我們需要使用Razor來編寫視圖。在這個視圖中，我們使用WebGrid控件來顯示Customer記錄。如代碼清單4-5所示。

代碼清單4-5. 在MVC Razor視圖中使用WebGrid

@model EntityFrameworkRecipe2.ViewModels.CustomerVM

@{
    Layout = null;
}

@{
    ViewBag.Title = "Customer";
    WebGrid grid = new WebGrid(canPage:false,canSort:false);
    grid.Bind(Model.Customers, 
              autoSortAndPage: false
    ); 
}

@using (Html.BeginForm())
{
<table>
    <tr>
        <td>
            Name
        </td>    
        <td>
            @Html.TextBoxFor(model => model.Name)
        </td>
    </tr>
    <tr>
        <td>
            City
        </td>
        <td>
            @Html.TextBoxFor(model => model.City)
        </td>
    </tr>
    <tr>
        <td>
            State
        </td>
        <td>
            @Html.TextBoxFor(model => model.State)
        </td>
    </tr>
    <tr>            
        <td colspan="2">
            <input type="submit" id="search" title="Search" value="Search" />
        </td>
    </tr>
</table>
<div id="searchResults">
        <!-- placeHolder for search results -->
        @grid.GetHtml(
            fillEmptyRows: true,
            alternatingRowStyle: "alternate-row",
            headerStyle: "grid-header",
            footerStyle: "grid-footer",
            columns: new [] {
                grid.Column("Name"),
                grid.Column("City"),
                grid.Column("State")
        })
</div>
}

　　一旦視圖編寫好，我就開始在Controller中編寫支持Get和Post方式的查詢功能。我們打算將從數據庫中獲取的Customer數據放到 view modle中，實現如代碼清單4-6所示.

代碼清單4-6. 獲取數據代搜索頁測試

 public class CustomerController : Controller
    {
        public ActionResult Search()
        {
            using (var db = new CustomerEntities())
            {
                var customer = db.Customers.ToList();
                var data = new CustomerVM()
                {
                    Customers = customer
                };
                return View(data);
            }
        }
        [HttpPost]
        public ActionResult Search(CustomerVM customerVmValue)
        {
            using (var db = new CustomerEntities())
            {
                var customerSearchResults = from customerRec in db.Customers
                                             where ((customerVmValue.Name == null) || (customerRec.Name == customerVmValue.Name.Trim()))
                                             && ((customerVmValue.City == null) || (customerRec.City == customerVmValue.City.Trim()))
                                             && ((customerVmValue.State == null) || (customerRec.State == customerVmValue.State.Trim()))
                                             select new
                                             {
                                                 Name = customerRec.Name
                                                 ,
                                                 City = customerRec.City
                                                 ,
                                                 State = customerRec.State
                                             };
                List<Customer> lstCustomer = new  List<Customer>();
                foreach (var record in customerSearchResults)
                {
                    Customer customerValue = new Customer();
                    customerValue.Name = record.Name;
                    customerValue.City = record.City;
                    customerValue.State = record.State;
                    lstCustomer.Add(customerValue);
                }
                customerVmValue.Customers = lstCustomer;
                return View(customerVmValue);
            }
        }
    }

 

 　　你在你的瀏覽器中，頁面呈現如圖4-15所示：

圖4-15 瀏覽器中呈現的視圖

 

原理

 　　在頁面的第一小節中（請看代碼清單4-5），我們使用table來格式化查詢字段，這里沒有花俏的技術，我們只是提供了獲取三個查詢字段:Name,City和State的結構。他們的值（或者沒有），將用於查詢按鈕被點擊了之后Controller的查詢（Search)動作方法.因此，這些參數會成為查詢的過慮條件。

　　接下來，我們使用HtmlHelper在WebGrid控件中顯示結果集。數據源使用view model。這里需要注意，我們創建了兩個模型，一個用於從數據庫中獲取數據，一個用於視圖頁收集查詢參數，和呈現結果集。

　　我們使用Linq to entities來查詢數據模型中的Customer實體，where從句和參數確定了我們的查詢過濾。在視圖中，我們將查詢參數Name,City和State映射到 HtmlHelper中的文本框。將Name屬性映射到文件框Name，依次類推。

　　我們使用控件WebGrid來顯示結果集，它被綁定到CustomerVM.Customers列表，它是專門用來獲取查詢結果集的。

　　代碼清單4-6中所展示的controller代碼，從數據庫中獲取數據，並在第一次加載視圖和點擊查詢按鈕后填充視圖。我們使用了本地數據庫.mdf文件並在Customer表中填充了記錄。

 

 

4.3. 使用ASP.NET的URL路由過慮

問題

　　你想使用MapRoute來簡化你的URLs，同時你想憑借這位路由在Razor視圖引擎中過濾結果集。

解決方案

　　假設你有如圖4-16的模型，我們已經對產品以及它們的目錄建模，用實體類型Product來表示產品。在一個典型的電商網站中，我們需要按目錄對產品進行分類。我們要避免在URLs中暴露類似 "/Product/Index?Category=Tents"這樣的查詢字符串。雖然這樣會使編程簡單一些，但無益於搜索引擎優化。我們需要看起像 “/Producs/Tents"這樣的URLs.

圖4-6  一個包含products和它們的categories

　　我們能通過路由得到對搜索引擎友好的URL，路由一般在Global.asax的Application_Start()事件處理函數中創建。代碼清單4-7演示了為Product控制器添加一條路由。

代碼清單4-7. 在Global.asax中創建一條路由

protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();

            WebApiConfig.Register(GlobalConfiguration.Configuration);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteTable.Routes.MapRoute("Product", "{controller}/{name}",
                                new { controller = "Product", action = "Index" }
                            );
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
            AuthConfig.RegisterAuth();
        }

　　在代碼清單4-8所示的Index視圖中，我們使用category name綁定到Product controller中的Inde動作方法的name參數，如代碼清單4-7所示。我們使用代碼清單4-9中的代碼獲取category name參數的值，並通過視圖處理結果集。圖4-17和圖4-18分別展示了呈現Tents目錄下產品的視圖頁面，和Cooking Equipment目錄下產品的視圖頁面。

代碼清單4-8. Index視圖代碼，它顯示通過目錄過濾后的產品

@model IEnumerable<EntityFrameworkRecipe3.ViewModels.ProductVM>

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <table>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.CategoryName)
            </th>
            <th></th>
        </tr>
    
    @foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.CategoryName)
            </td>
        </tr>
    }
    
    </table>
</body>
</html>

代碼清單4-9. Controller代碼，使用通過Category Name過濾后的Product數據填充模型

public class ProductController : Controller
    {
        //
        // GET: /Product/

        public ActionResult Index(string name)
        {
            using (var db = new ProductEntities())
            {
                var query = from productRec in db.Products
                            join categoryRec in db.Categories
                            on productRec.CategoryId
                            equals categoryRec.CategoryId
                            where categoryRec.Name == name
                            select new
                            {
                                Name = productRec.Name
                                ,
                                CategoryName = categoryRec.Name
                            };
                List<ProductVM> lstProduct = new List<ProductVM>();
                foreach(var record in query)
                {
                    ProductVM productValue = new ProductVM();
                    productValue.Name = record.Name;
                    productValue.CategoryName = record.CategoryName;
                    lstProduct.Add(productValue);
                }
                return View(lstProduct);
            }
        }

    }

圖4-17 使用路徑“/Product/Tents"，得到Tents目錄類別的產品集

圖4-18 使用路徑“/Product/cooking Equipment"得到cooking Equipment目錄類別的產品集

 

原理

　　在Global.asax中 Applicate_Start()事件處理函數中，我們為之前的"/Product/Index?name=category"映射了路由 "/Product/{name}".在Product controller中，我們使用MapRoute中的路由key,name，過濾結果集，通過給定的目錄過濾產品。

 

　　至此，第四章結束，感謝你的閱讀。下一篇，我們將進入第五章的學習。

 

 

實體框架交流QQ群:  458326058，歡迎有興趣的朋友加入一起交流

謝謝大家的持續關注，我的博客地址：http://www.cnblogs.com/VolcanoCloud/