MVC Project Practice, implementing SPORTSSTORE-05 in a three-tier architecture, enabling navigation

Source: Internet
Author: User

Sportsstore is the MVC project demonstrated in the master ASP. NET MVC3 Framework (third edition), which covers many aspects of MVC, including: Using di containers, URL optimization, navigation, paging, shopping carts, orders, product management, image uploads ... is a good MVC practice project, but the project is not developed in a multi-layered framework, and there is a distance from the real project. This series will attempt to implement the Sportsstore project in a multi-layered framework and implement some functions in its own way.

This article is the fifth in the series, including:

8. Navigation

8. Navigation

Create Navcontroller, derived from Basecontroller:

usingSystem.Collections.Generic;usingSystem.Linq;usingSYSTEM.WEB.MVC;usingMYSPORTSSTORE.IBLL;usingNinject;namespacemysportsstore.webui.controllers{ Public classNavcontroller:basecontroller {[Inject] PublicIproductservice Productservice {Get;Set; }  PublicNavcontroller () { This.        Adddisposableobject (Productservice); }         PublicPartialviewresult Menu (stringCategory =NULL) {viewbag.selectedcategory=category; IEnumerable<string> Categories =productservice.loadentities (P=true). Select (p = = p.category). Distinct (). (P =p); returnPartialview (categories); }    }}

Why are there category parameters?

In order to highlight the currently clicked, Selected category. The category trajectory here is:


→ Front view click on the category name and assign the category name to the routing variable category
The menu () method of the →nav controller receives the category, puts it in the viewbag, and returns it back to the front view
→ Front-end view when traversing all classification names, if the current category name is the same as in ViewBag, add a CSS for the current category, highlighting


You need to assign a default value to the category because category is null before clicking on the category name.

In the Nav/menu.cshtml section view, you need to pass the category and page to the Nav () method in the product controller:

@model ienumerable<string>@Html. ActionLink ("Home","List","Product") @foreach (varLinkinchModel) {@Html. RouteLink (Link,New{controller ="Product", action ="List", category = link, page =1},        New{@class = link = = viewbag.selectedcategory?"selected":NULL})}

The Load Categories section view is displayed in _layout.cstml under views/shared:

<! DOCTYPE html>"Utf-8"/> <meta name="Viewport"Content="Width=device-width"/> <title> @ViewBag .title</title> <link href="@Url. Content ("~/content/site.css")"Rel="stylesheet"Type="Text/css"/>"Header"> <divclass="title"> Sporting Goods store </div> </div> <div id="Categories">@{html.renderaction ("Menu","Nav");} </div> <div id="content">@RenderBody ()</div>@Scripts. Render ("~/bundles/jquery") @RenderSection ("Scripts", Required:false)    </body>


Depending on the routing parameters passed by click Classification, in the product controller's Nav method, you also need to consider the category, and then filter the collection. Also, consider that the category is null when you do not click the navigation category name:

usingSYSTEM.WEB.MVC;usingMYSPORTSSTORE.IBLL;usingMySportsStore.WebUI.Models;usingNinject;namespacemysportsstore.webui.controllers{ Public classProductcontroller:basecontroller {[Inject] PublicIproductservice Productservice {Get;Set; }  PublicProductcontroller () { This.        Adddisposableobject (Productservice); }         Public intPageSize =4;  PublicViewResult List (stringCategoryintpage =1)        {            intTotalCount =0; Productslistviewmodel ViewModel=NewProductslistviewmodel () { Products= Productservice.loadpageentities (p = = Category = =NULL?true: P.category = = Category, p = p.id, PageSize, page, outTotalCount,true), Paginginfo=NewPaginginfo () {currentpage = page, ItemsPerPage = PageSize, TotalItems = Category = =NULL? Productservice.count (p =true): Productservice.count (p = p.category = =category)}, Currentcategory=category}; returnView (ViewModel); }    }}

Above, the Currentcategory attribute is added to the view model Productslistviewmodel, and this attribute value is to be given to the paging:

usingSystem.Collections.Generic;usingMysportsstore.model;namespacemysportsstore.webui.models{ Public classProductslistviewmodel { PublicIenumerable<product> Products {Get;Set; }  PublicPaginginfo Paginginfo {Get;Set; }  Public stringcurrentcategory {Get;Set; } }}

In the pagination section of the product/list.cshtml view, you need to assign the Currentcategory value to the routing variable category:

@model mysportsstore.webui.models.productslistviewmodel@{viewbag.title="List"; Layout="~/views/shared/_layout.cshtml";} @foreach (varIteminchmodel.products) {Html.renderpartial ("prductsummary", item);}<divclass="Pager">@Html. Pagelinks (model.paginginfo, x= Url.action ("List",New{page = x, category =model.currentcategory}))</div>

Run:

To make the URL look better, consider the URL in the following scenario:

When you run the default page
When you click on paging
When you click the Navigation category
Click on the Navigation category, then click on the paging

The adjustment URL is:

routes. MapRoute (NULL,                "",//match an empty URL, such as "/"                New{controller ="Product", action ="List", category = (string)NULL, page =1}            ); Routes. MapRoute (NULL,                "Page{page}",//Match "/page1" when clicking on paging                New{controller ="Product", action ="List", category = (string)NULL},                New{page =@"\d+"}//Constrain page to number            ); Routes. MapRoute (NULL,                "{category}",//Match "/soccer" when clicking on the navigation category                New{controller ="Product", action ="List", page =1}            ); Routes. MapRoute (NULL,                "{category}/page{page}",//Match "/soccer/page1" when clicking on the Navigation category, when clicking on paging                New{controller ="Product", action ="List"},                New{page =@"\d+"}            );


Run:

"MVC Project Practice, implementing Sportsstore in a three-tier architecture" series includes:

MVC project Practice, in the three-tier architecture implementation of SPORTSSTORE-01,EF Code first modeling, DAL layer and other MVC project practices, in the three-tier architecture implementation of the Sportsstore-02,dbsession layer, the BLL Layer MVC Project Practice, Implementing MVC project practices such as the Sportsstore-03,ninject controller factory in the three-tier architecture, implementing SportsStore-04 under the three-tier architecture, implementing the page-out MVC project practice, implementing SportsStore-05 under the three-tier architecture, Implementation of the Navigation MVC Project practice, the implementation of SportsStore-06 in the three-tier architecture, implementation of the shopping Cart MVC project, implementation of SPORTSSTORE-07 in the three-tier architecture, implementation of the Order Submission MVC Project practice, in the three-tier architecture to achieve SportsStore-08, Deploying to an IIS server

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.