This article mainly introduces asp.net using the jquery template engine jtemplates to render the table example, we refer to the use of the
In ASP.net MVC, we are more free to control the HTML we want to display. Usually, you have to do a list of data. Then we can manually to spell a table out, but so sometimes for complex tables, that the JS code is more complex. We can use the template engine under JS to achieve this function. The next thing to introduce is jtemplates, which is also based on jquery.
The code is as follows:
<%@ Page language= "C #" inherits= "System.Web.Mvc.ViewPage"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<link href= "Content/default.css" rel= "stylesheet" type= "Text/css"/>
<script src= "Scripts/jquery-1.3.1.js" type= "Text/javascript" ></script>
<script src= "Scripts/jquery-jtemplates.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$.ajax ({
Type: "POST",
URL: ' <%=url.action ("Templetedata", "Home")%> ',
Data: "{}",
ContentType: "Application/json; Charset=utf-8 ",
DataType: "JSON",
Success:function (msg) {
Instantiate a template with data
ApplyTemplate (msg);
}
});
});
function ApplyTemplate (msg) {
$ (' #Container '). SetTemplate ($ ("#TemplateResultsTable"). html ());
$ (' #Container '). ProcessTemplate (msg);
}
</script>
<body>
<div id= "Container" > </div>
<%--Results Table Template--%>
<script type= "text/html" id= "templateresultstable" >
{#template MAIN}
<table cellpadding= "Ten" cellspacing= "0" >
<tr>
<th>Username</th>
<th>Password</th>
<th>Url</th>
<th>Email</th>
<th>PassportID</th>
</tr>
{#foreach $Tasuu}
{#includeROWroot = $T. UU}
{#/for}
</table>
{#/templatemain}
{#templateROW}
<trclass= "{#cyclevalues =[', ' Evenrow ']}" >
<td>{$T. Username.bold ()}</td>
<td>{$T .password}</td>
<td>{$T. Url.link ($T. Url)}</td>
<td>{$T. Email.link (' mailto: ' + $T. Email)}</td>
<td>{$T .passportid}</td>
</tr>
{#/templaterow}
</script>
</body>
Returning JSON data via Ajax, SetTemplate sets the template based on the ID, and then applytemplate it.
CS Code:
The code is as follows:
<summary>
Templetesthedata.
</summary>
<returns></returns>
Publicjsonresulttempletedata ()
{
Ilist<userentity>userlist=newlist<userentity> ()
{
Newuserentity () {username= "Tina", passportid=23433,email= "asdfa@asdf.com", password= "NKASD", url=
"Http://www.gefds.cn"}
, Newuserentity () {username= "Lucy", passportid=3444,email= "2v2@asdf.com", password= "V23SDA", url=
"Http://www.qqfsad.cn"}
};
Returnjson (userlist);
}
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
