Asp.net MVC learning diary 9 (jquer usage mode pop-up details)

Preparations:

Http://nyromodal.googlecode.com/files/nyromodal-1.6.2.zip, download the jqueryplug-in this address

1. Import jquery. nyroModal-1.6.2.min.js and content/nyromodal.full.css

<SCRIPT src = ".../scripts/jquery-1.6.2.min.js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = ".../scripts/jquery. nyroModal-1.6.2.min.js" type = "text/JavaScript"> </SCRIPT>
<Link href = ".../../content/nyromodal.full.css" rel = "stylesheet" type = "text/CSS"/>
<Link href = ".../../content/site.css" rel = "stylesheet" type = "text/CSS"/>

2. The product class and productrepository class are still required.

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;
}
}

3. Add action to homecontroller:

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

[Httppost]
Public jsonresult _ getproductdetail (int id)
{
Product P = new productrepository (). getproductbyid (ID );
Return JSON (P );
}

4. Add in product. aspx

<SCRIPT type = "text/JavaScript">

$ (Function (){

$ ("# Detail" detail .css ('visibility ', 'den den ');
$ ("# Detail" detail .css ('position', 'absolute ');

$ ('A. List-item'). Click (function (){
$ ("# Detail" pai.html ('');
$. Post ('_ getproductdetail', {ID: This. ID },
Function (data ){
Showproduct (data );
$. Nyromodalmanual ({URL: '# detail', minheight: 150,
Minwidth: 300, width: 300, height: 150
});
});

Return false;
});
});

Function showproduct (data ){
$ ("# Detail" pai.html (
Formatline ('id', Data. productid) +
Formatline ('name', Data. Name) +
Formatline ('price', Data. Price) +
Formatline ('sku ', Data. SKU) +
Formatline ('created ', Data. createdate) +
Formatline ('in stocks', Data. instock) +
Formatline ('desc', Data. description)
);
}
Function formatline (Label, value ){
Return '<Div class = "display-label">' + label + ': </div> <div>' + value + '</div> ';
}
</SCRIPT>
<Style type = "text/CSS">
. List-item {cursor: pointer; color: Blue ;}
</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) %>-
<A id = "<% = product. productid %>" class = "list-item"> <% = product. name %> </a>

</Div>
<% }%>

 

Access http: // localhost: 13811/home/product, view the list, and click the product name. The details are displayed in the displayed mode.