Home > Industries > E-commerce
After so long, our project has made some progress, but we still haven't paid attention to our UI. It looks unfriendly, which will make our website not very eye-catching, today, we will improve our UI to make it look more friendly. First, let's find the _ layout. cshtml file under views/shared of the sportsstore. webui project and modify it as follows:
<! Doctype HTML> " UTF-8 " /> <Meta name = " Viewport " Content = " Width = device-Width " /> <Title> @ viewbag. Title </title> <link href = " ~ /Content/site.css " Type = " Text/CSS " Rel = " Stylesheet " /> </Head> <body> <Div id = " Header " > <Div Class = " Title " > Sports store </div> <Div id =" Categories " > We will put something useful here later </Div> <Div id = " Content " > @ Renderbody () </Div> </body>
Add style sheet
You must have noticed that ourCodeWe use a style sheet named site.css. It is automatically created by vs when we create an application. It is in the content folder of the sportsstore. webui project. Now we edit it and add the following code:
Body { Font-family :Cambria, Georgia, "Times New Roman" ; Margin : 0 ;} Div # header Div. Title, Div. Item H3, Div. Item H4, Div. Pager { Font : Bold 1em "Arial narrow", "Franklin Gothic Medium", Arial ;} Div # Header { Background-color : #444 ; Border-bottom : 2px solid #111 ;Color : White ;} Div # header Div. Title { Font-size : 2em ; Padding : . 6em ;} Div # Content { Border-left : 2px solid gray ; Margin-left : 9em ; Padding :1em ;} Div # categories { Float : Left ; Width : 8em ; Padding : . 3em ;} Div. Item { Border-top : 1px dotted gray ; Padding-top : . 7em ;Margin-bottom : . 7em ;} Div. Item: First-child { Border-top : None ; Padding-top : 0 ;} Div. Item h3 { Font-size : 1.3em ; Margin : 0 0. 25em 0 ;} Div. Item h4 { Font-size : 1.1em ; Margin : . 4em 0 0 0 ;} Div. Pager { Text-align : Right ; Border-top : 2px solid silver ; Padding : . 5em 0 0 0 ; Margin-top : 1em ;} Div. Pager { Font-size : 1.1em ; Color : #666 ; Text-Decoration : None ; Padding : 0. 4em 0. 4em ;} Div. Pager A: hover { Background-color : Silver ;}Div. Pager A. Selected { Background-color : #353535 ; Color : White ;}
Run your application and you will see the following results:
Create a partial view
To make our pages more beautiful and professional, we need to create a partial view, which is part of a page and can be reused by multiple pages, the most widely used are header and footer. Right-click the/views/shared folder and select add view and name it productsummary. Check the create as a partial view option, for example:
Partial View is no different from a regular view, except that it generates an HTML clip. Now, let's modify the partial view file:
@ Model sportsstore. domain. Entities. Product<DivClass="Item"> <H3> @ model. Name @ Model. Description<H4> @ model. Price. tostring ("C") </H4> </div>
We need to make some subtle changes to the previous list. cshtml file:
@ Model sportsstore. webui. Models. productslistviewmodel @ {viewbag. Title = " Products " ;} @ Foreach ( VaR P In Model. Products) {html. renderpartial ( " Productsummary " , P );} <Div Class = " Pager " > @ Html. pagelinks (model. paginginfo, X => URL. Action ( " List " , New {Page = X })) </Div>
Run your project and check the effect! In the next article, we will add a navigation function for our website. By filtering and classifying products, we can make user operations more flexible and simple, and fully reflect the features of the mvc4 architecture! Please follow up on my continued articles!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
