Asp.net MVC learning diary 8 (jquery and division view, View Details)

1. Create a class product and productrepository

Public class product
{
Public int productid {Get; set ;}
Public string name {Get; set ;}
Public double price {Get; set ;}
Public String description {Get; set ;}
Public String SKU {Get; set ;}
Public datetime createdate {Get; set ;}
Public bool instock {Get; set ;}
}

Public class productrepository
{
Public list <product> getproducts ()
{
List <product> Products = builder <product>
. Createlistofsize (20)
. Build ()
. Tolist ();

Return products;
}

Public Product getproductbyid (INT productid)
{
Product = builder <product>
. Createnew ()
. With (x => X. productid = productid)
. And (x => X. Description = @ "Hello World ")
. Build ();

Return product;
}
}

2. Add

Public actionresult product ()
{
Viewdata ["Products"] = new productrepository (). getproducts ();
Return view ();
}

Public actionresult productdetail (int id)
{
Viewdata ["product"] = new productrepository (). getproductbyid (ID );
Return view ();
}

Public actionresult getproductdetail (int id)
{
Viewdata ["product"] = new productrepository (). getproductbyid (ID );
Return view ();
}

3. Implement the product and productdetail classes and the getproductdetail branch classes

4. Add in product. aspx

<SCRIPT type = "text/JavaScript">

$ (Function (){
$ ('A. List-item'). Click (function (){
$ ("# Detail" pai.html ('');
$ ('# Detail'). Load ('<%: URL. Action ("getproductdetail") %>', {ID: This. ID });
Return false;
});
});
</SCRIPT>
<Style type = "text/CSS">
. List-item {cursor: pointer ;}
</Style>

<Div id = "detail"> </div>
<% List <product> Products = viewdata ["Products"] As list <product>;
Foreach (product in products)
{%>
<Div class = "display-field">
<%: String. Format ("{0: c}", product. Price) %>
<% = Html. actionlink (product. name, "productdetail", new {@ ID = product. productid}, new {@ ID = product. productid, @ class = "list-item"}) %>
</Div>
<% }%>

5. Add productdetail. aspx

<% Html. renderpartial ("getproductdetail"); %>

6. Add in getproductdetail. ascx

<%
Product P = viewdata ["product"] As product;
%>
<Div class = "display-label"> ID: </div>
<Div class = "display-field"> <%: P. productid %> </div>
<Div class = "display-label"> name: </div>
<Div class = "display-field"> <%: P. name %> </div>
<Div class = "display-label"> price: </div>
<Div class = "display-field"> <%: String. Format ("{0: c}", p. Price) %> </div>
<Div class = "display-label"> SKU: </div>
<Div class = "display-field"> <%: P. SKU %> </div>
<Div class = "display-label"> created: </div>
<Div class = "display-field"> <%: P. createdate %> </div>
<Div class = "display-label"> in Stock: </div>
<Div class = "display-field"> <%: P. instock %> </div>
<Div class = "display-label"> Desc: </div>
<Div class = "display-field"> <%: P. Description %> </div>
<HR/>