ASP. NET mvc2.0 allows you to add, delete, modify, and query data (continued)

3. Try. Create the product directory under the views directory and add the view. The view name corresponds to the method name (action name) in conreol.

Add the following code to the index view (these codes are all added, deleted, modified, and queried on the corresponding interface. Use Ajax + JSON to send data to action ):

$ (Function (){
// View Details
$ (". Showdetail"). Click (function (){
// Debugger;
VaR currenttr = $ (this). Parent (). Parent (); // The current row
VaR currenttd = $ ("# TDID", currenttr). Text (); // productid corresponding to the current row
VaR url = '<% = URL. Action ("detail") %> ';
Url = URL + "/" + currenttd;
// Alert (currenttd );
$. Ajax ({
URL: URL,
Type: "Post ",
Datatype: "JSON ",
Success: showdetailresult
})
});
Function showdetailresult (result ){
$ ("# Txtproductid"). Val (result. productid );
$ ("# Txtproductname"). Val (result. productname );
$ ("# Txtproductprice"). Val (result. productprice );
$ ("# Txtproductdate"). Val (result. productdatestr );
Easydialog. Open ({
Container: 'divproductdetail'
});
}
$ ("# Aclose"). Click (function (){
Easydialog. Close ();
});

// Delete
$ (". Del"). Click (function (){
VaR url = '<% = URL. Action ("delete") %> ';
VaR currenttr = $ (this). Parent (). Parent (); // The current row
VaR currenttd = $ ("# TDID", currenttr). Text (); // productid corresponding to the current row
Url = URL + "/" + currenttd;
// Alert (currenttd );
$. Ajax ({
URL: URL,
Type: "Get ",
Datatype: "JSON ",
Success: function (){
Currenttr. Remove ();
}
})
});

// Modify
VaR CTR; // current row
$ (". Modify"). Click (function (){
VaR currenttr = $ (this). Parent (). Parent (); // The current row
CTR = currenttr; // remove the current row after submission
// Debugger;
VaR currenttd = $ ("# TDID", currenttr). Text (); // productid corresponding to the current row
VaR url = '<% = URL. Action ("detail") %> ';
Url = URL + "/" + currenttd;
// Alert (currenttd );
$. Ajax ({
URL: URL,
Type: "Post ",
Datatype: "JSON ",
Success: showresult
})
});
Function showresult (result ){
$ ("# Txtmproductid"). Val (result. productid );
$ ("# Txtmproductname"). Val (result. productname );
$ ("# Txtmproductprice"). Val (result. productprice );
$ ("# Txtmproductdate"). Val (result. productdatestr );
Easydialog. Open ({
Container: 'vmodify'
});
}
$ ("# Aaclose"). Click (function (){
Easydialog. Close ();
});

// Submit
$ ("# Btnmodify"). Click (function (){
Easydialog. Close ();
VaR productid = $ ("# txtmproductid"). Val ();
VaR productname = $ ("# txtmproductname"). Val ();
VaR productprice = $ ("# txtmproductprice"). Val ();
VaR productdate = $ ("# txtmproductdate"). Val ();
VaR productdatestr = productdate;
VaR Product = {"productid": productid, "productname": productname, "productprice": parsefloat (productprice), "productdate": productdate, "productdatestr": productdatestr };
VaR url = '<% = URL. Action ("modify") %> ';
// Debugger;
$. Ajax ({
URL: URL,
Type: 'post ',
Datetype: 'json ',
Data: $. tojson (product ),
Contenttype: 'application/JSON; charset = UTF-8 ',
Success: function (){
Ctr. Remove ();
// Debugger;
Showaddresult (product );
}
});
});

// Add
$ ("# Btnadd"). Click (function (){
VaR productid = $ ("# txtnewproductid"). Val ();
VaR productname = $ ("# txtnewproductname"). Val ();
VaR productprice = $ ("# txtnewproductprice"). Val ();
VaR productdate = $ ("# txtnewproductdate"). Val ();

VaR Product = {"productid": parseint (productid), "productname": productname, "productprice": productprice, "productdate": productdate };
VaR url = '<% = URL. Action ("addproduct") %> ';
$. Ajax ({
URL: URL,
Type: 'post ',
Datetype: 'json ',
Data: $. tojson (product ),
Contenttype: 'application/JSON; charset = UTF-8 ',
Success: showaddresult
});
});
Function showaddresult (result ){
// Debugger;
VaR tr1 = '<tr id = "' + 1 + result. productid + '"> ';
VaR TD1 = '<TD align = "Left"> <a href = "#" class = "showdetail"> View Details </a> & nbsp; <a href = "#" id = "Del" class = "Del"> Delete </a> & nbsp; <a href = "#" id = "modify" class = "modify"> modify </a> </TD> ';
VaR td2 = '<TD id = "TDID">' + result. productid + '</TD> ';
VaR td3 = '<TD>' + result. productname + '</TD> ';
VaR td4 = '<TD>' + result. productprice + '</TD> ';
VaR td5 = '<TD>' + result. productdatestr + '</TD> ';
VaR tr2 = '</tr> ';
VaR TR = tr1 + TD1 + td2 + td3 + td4 + td5 + tr2;
$ (TR). appendto ('# TBL ');

$ (". Del"). Unbind ("click"). BIND ("click", function (){
VaR url = '<% = URL. Action ("delete") %> ';
VaR currenttr = $ (this). Parent (). Parent (); // The current row
VaR currenttd = $ ("# TDID", currenttr). Text (); // productid corresponding to the current row
Url = URL + "/" + currenttd;
// Alert (currenttd );
$. Ajax ({
URL: URL,
Type: "Get ",
Datatype: "JSON ",
Success: function (){
Currenttr. Remove ();
}
})
});

$ (". Showdetail"). Unbind ("click"). BIND ("click", function (){
VaR currenttr = $ (this). Parent (). Parent (); // The current row
VaR currenttd = $ ("# TDID", currenttr). Text (); // productid corresponding to the current row
VaR url = '<% = URL. Action ("detail") %> ';
Url = URL + "/" + currenttd;
// Alert (currenttd );
$. Ajax ({
URL: URL,
Type: "Post ",
Datatype: "JSON ",
Success: showdetailresult
})
});

$ (". Modify"). Unbind ("click"). BIND ("click", function (){
VaR currenttr = $ (this). Parent (). Parent (); // The current row
VaR currenttd = $ ("# TDID", currenttr). Text (); // productid corresponding to the current row
CTR = currenttr; // remove the current row after submission
VaR url = '<% = URL. Action ("detail") %> ';
Url = URL + "/" + currenttd;
// Alert (currenttd );
$. Ajax ({
URL: URL,
Type: "Post ",
Datatype: "JSON ",
Success: showresult
})
});
}
});

4. Interface display

<Br/>
<Div>
<Table id = "tabadd">
<Tr>
<TD> productid </TD>
<TD> <input type = "text" id = "txtnewproductid" class = "required"/> </TD>
<TD> productname: </TD>
<TD> <input type = "text" id = "txtnewproductname" class = "required"/> </TD>
</Tr>
<Tr>
<TD> productprice: </TD>
<TD> <input type = "text" id = "txtnewproductprice"/> </TD>
<TD> productdate: </TD>
<TD> <input type = "text" id = "txtnewproductdate"/> </TD>
<TD> <input type = "button" value = "add" id = "btnadd"/> </TD>
</Tr>
</Table>
</Div>

<Div>
<% List <testjquery. Models. Product> _ productlist = viewdata ["productlist"] As list <testjquery. Models. Product >;%>
<% IF (_ productlist! = NULL)
{
%>
<Table id = "TBL">
<Thead> <tr> <TD style = "width: 200px;"> operation </TD>
<TD style = "width: 50px;"> productid </TD>
<TD style = "width: 50px;"> productname </TD>
<TD style = "width: 50px;"> productprice </TD>
<TD style = "width: 150px;"> productdate </TD> </tr> </thead>
<Tbody>
<% Foreach (testjquery. Models. product TMP in _ productlist)
{%>
<Tr id = "<%: 1 + TMP. productid %>">
<TD align = "Left">
<A href = "#" class = "showdetail"> View Details </a> & nbsp;
<A href = "#" id = "Del" class = "Del"> Delete </a> & nbsp;
<A href = "#" id = "modify" class = "modify"> modify </a>
</TD>
<TD id = "TDID">
<%: TMP. productid %>
</TD>
<TD>
<%: TMP. productname %>
</TD>
<TD>
<%: TMP. productprice %>
</TD>
<TD>
<%: TMP. productdate %>
</TD>
</Tr>
<% }%>
<% }%>
</Tbody>
</Table>
</Div>

<! -- The details layer is displayed -->
<Div id = "divproductdetail" class = "hide_box" style = "display: none;">
<H4> <a id = "aclose" href = "javascript: void (0)" Title = "Close Window"> & times; </a> details </H4>
<Table>
<Tr>
<TD> productid: </TD>
<TD> <input type = "text" id = "txtproductid"/> </TD>
</Tr>
<Tr>
<TD> productname: </TD>
<TD> <input type = "text" id = "txtproductname"/> </TD>
</Tr>
<Tr>
<TD> productprice: </TD>
<TD> <input type = "text" id = "txtproductprice"/> </TD>
</Tr>
<Tr>
<TD> productdate: </TD>
<TD> <input type = "text" id = "txtproductdate"/> </TD>
</Tr>
</Table>
</Div>

<! -- Modify layer -->
<Div>
<Div id = "divmodify" class = "hide_box" style = "display: none;">
<H4> <a id = "aaclose" href = "javascript: void (0)" Title = "Close Window"> & times; </a> modify Information </H4>
<Table>
<Tr>
<TD> productid: </TD>
<TD> <input type = "text" id = "txtmproductid"/> </TD>
</Tr>
<Tr>
<TD> productname: </TD>
<TD> <input type = "text" id = "txtmproductname"/> </TD>
</Tr>
<Tr>
<TD> productprice: </TD>
<TD> <input type = "text" id = "txtmproductprice"/> </TD>
</Tr>
<Tr>
<TD> productdate: </TD>
<TD> <input type = "text" id = "txtmproductdate"/> </TD>
</Tr>
<Tr>
<TD> & nbsp; </TD>
<TD align = "center"> <input id = "btnmodify" type = "button" value = "Submit"/> </TD>
</Tr>
</Table>
</Div>
</Div>

5.: Source: http://download.csdn.net/source/3559195