We have completed most of the work on the website, but there are some navigation functions, home pages, and shop browsing pages added to the site.
Create a shopping cart summary view
We hope to see the quantity in the shopping cart on the page of the whole site.
You can easily create a partial view and add it to the website layout,
As we can see above, the shoppingcart controller contains an action method named cartsummary and returns the segment view.
//
//Get:/shoppingcart/cartsummary
[Childactiononly]
PublicActionresult cartsummary ()
{
VaRCart = shoppingcart. getcart (This. Httpcontext );
Viewdata ["Cartcount"] = Cart. getcount ();
ReturnPartialview ("Cartsummary");
}
Right-click the action method, or right-click the views/shoppingcart folder and choose create new view and name it cartsummary. Check the create branch view check box.
The cartsummary branch view is very simple. It only links to the index of shoppingcart and displays the quantity in the current shopping cart.CodeAs follows:
@ Html. actionlink ("Cart ("+ Viewdata ["Cartcount"] +")","Index","Shoppingcart",New{Id ="Cart-status"})
The segment view can be included on any page of the website. You can use the HTML. renderaction method. Renderaction must specify the action name. Here is cartsummary and the Controller name. Here is shoppingcart.
@ Html. renderaction ("Cartsummary","Shoppingcart")
Before adding this branch view to the layout, we need to create a genre menu so that we can update the site. Master at one time.
Create a branch view of the genre menu
By adding a genre menu on the page, it is easier for users to navigate within the site.
We can use the preceding steps to create the branch view of the genre menu and add the two branch views together to the layout of the site. First, add the genremenu Controller Method to storecontroller.
//
//Get:/store/genremenu
[Childactiononly]
PublicActionresult genremenu ()
{
VaRGenres = storedb. genres. tolist ();
ReturnPartialview (genres );
}
This method returns the list of genres, which are used to generate menus in the view created later.
Note: we added the [childactiononly] annotation in the Action method, which means that we can only access this action through the Division view, which can prevent access through browsing/store/genremenu, this is not necessary for the branch view, but it is a good practice because we want our Controller method to be used in the desired way, here we also return a partial view instead of a common view, which is used to tell the view engine that layout is not required for this view and will be included in other views.
Create a division view and use a strongly typed genre as the model type. Use the list template.
Update the generated view to display a list.
@ Model ienumerable <mvcmusicstore. Models. Genre>
<Ul id ="Categories">
@ Foreach (VaRGenreInModel)
{<Li> @ html. actionlink (genre. Name,
"Browse","Store",
New{Genre = genre. name },Null)
</LI>
}
</Ul>
Update the site layout to display our branch view
Now, you can add the branch view to the layout, in/views/shared/_ layout. in cshtml, HTML is called. the renaderaction () method can call the Division view and add both the Division views to the layout, as shown below:
<! Doctype HTML>
<HTML>
<Head>
<Title> @ viewbag. Title </title>
<Link href = " @ URL. Content ( " ~ /Content/site.css " ) " Rel = " Stylesheet "
Type = " Text/CSS " />
<SCRIPT src = " @ URL. Content ( " ~ /Scripts/jquery- 1.4 . 4 . Min. js " ) "
Type = " Text/JavaScript " > </SCRIPT>
</Head>
<Body>
<Div id =" Header " >
<H1>
<A href = " / " > ASP. net mvc music store </a> <Ul id = " Navlist " >
<Li Class = " First " > <A href = " @ URL. Content ( " ~ " ) " Id = " Current " > Home </a> </LI>
<Li> <a href = " @ URL. Content ( " ~ /Store/ " ) " > Store </a> </LI>
<Li>
@ {Html. renderaction ( " Cartsummary " , " Shoppingcart " );}
</LI>
<Li> <a href = " @ URL. Content ( " ~ /Storemanager/" ) " > Admin </a> </LI>
</Ul>
</Div>
@ {Html. renderaction ( " Genremenu " , " Store " );}
<Div id = " Main " >
@ Renderbody ()
</Div>
<Div id = " Footer " >
Built with <a href = " Http://asp.net/mvc " > ASP. NET MVC 3 </A>
</Div>
</Body>
</Html>
Update the store browse page
The browsing page of the store is not very good now. We update this page to display the album in a better layout, and update our view as follows.
@ Model mvcmusicstore. Models. Genre
@ {Viewbag. Title =" Browse albums " ;}
<Div Class = " Genre " >
<H3>
<Em> @ model. Name </em> albums
<Ul id = " Album-list " >
@ Foreach ( VaR AlbumIn Model. albums)
{<Li> <a href = " @ URL. Action ( " Details " , New {id = Album. albumid }) " >
" @ Album. Title " Src = " @ Album. albumarturl " />
<Span> @ album. Title </span> </a> </LI>}
</Ul>
</Div>
Here, we will use URL. action instead of HTML. actionlink to display formatting information, including the artist's illustration.
Note: We will display the album cover. This information is stored in the data and can be edited through storemanager. You are also welcome to add your illustrations.
Now, when we browse the genre, we will see an album with a cover shown in a grid.
Update the homepage to display best-selling albums
We hope to add the best-selling albums on the home page to improve sales. We will add some content in homecontroller to achieve this, and then add some additional images to make it better.
First, add a navigation attribute to our album to let EF know the associated information. The last line in the album is newly added.
Public VirtualGenre genre {Get;Set;}
Public VirtualArtist {Get;Set;}
Public VirtualList <orderdetail> orderdetails {Get;Set;}
Note: a generic set is used here. You need to use using before the code to reference the system. Collections. Generic namespace.
First, we will add the storedb field and reference the musicstore. Models namespace, similar to other controllers.
Then, we add the following method in homecontroller to query the database and find the best-selling records based on orderdetails.
PrivateList <album> gettopsellingalbums (IntCount)
{
//Group the Order details by album and return
//The albums with the highest count
ReturnStoredb. albums
. Orderbydescending (A => A. orderdetails. Count ())
. Take (count)
. Tolist ();
}
This is a private method, because we do not want to directly access it. In order to simply write it in homecontroller, we may need to move it to the background logic service during actual development.
Here, we update the index to access the previously defined method, query the top five sales albums, and pass them to the view.
PublicActionresult index ()
{
//Get most popular albums
VaRAlbums = gettopsellingalbums (5);
ReturnView (albums );
}
The complete code is as follows:
Using System;
Using System. Collections. Generic;
Using System. LINQ;
Using System. Web;
Using System. Web. MVC;
Using Mvcmusicstore. models;
Namespace Mvcmusicstore. Controllers
{
Public Class Homecontroller: Controller
{
Private Models. musicstoreentities storedb = New Models. musicstoreentities ();
//
// Get:/home/
Public Actionresult index ()
{
// Get most popular albums
VaR Albums = gettopsellingalbums ( 5 );
Return View (albums );
}
Private List <album> gettopsellingalbums ( Int Count)
{
// Group the Order details by album and return
// The albums with the highest count
Return Storedb. albums
. Orderbydescending (A => A. orderdetails. Count ())
. Take (count)
. Tolist ();
}
}
}
Finally, we need to update the index view of our home controller and add the access model to the album list. At this time, we need to add a header and a promotion section.
@ Model list <mvcmusicstore. Models. album>
@{
Viewbag. Title = " ASP. net mvc Music Store " ;
}
<Div id = " Promotion " >
</Div>
<H3>
<Em> fresh </em> off the grill <Ul id = " Album-list " >
@ Foreach (VaR Album In Model)
{<Li> <a href = " @ URL. Action ( " Details " , " Store " ,
New {Id = Album. albumid }) " >
" @ Album. Title " Src = " @ Album. albumarturl " />
<Span> @ album. Title </span> </a> </LI>
}
</Ul>
Now, when you runProgramWe will see the updated home page with the best-selling albums and our promotion information.
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
