• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

jQueryTemplateswithASP.NETMVC

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

In my three previous blogs, I’ve shown how to use Templates in your ASPX website.

Now, I will show one real-world example which you may use it in your daily work of developing applications with ASP.NET MVC and jQuery.

In the following example I will use Pubs database so that I will retrieve values from the authors table. To access the data, I’m using Entity Framework.

Let’s pass throughout each step of the scenario:

1. Create new ASP.NET MVC Web application

2. Add new View inside Home folder but do not select a master page, and add Controller for your View

3. BODY code in the HTML

<body>
<div>
<h1>Pubs Authors</h1>
<div id="authorsList"></div>
</div>
</body>

As you can see in the body we have only one H1 tag and a div with id authorsList where we will append the data from database.

4. Now, I’ve created Pubs model which is connected to the Pub database and I’ve selected only the authors table in my EDMX model. You can use your own database.

5. Next, lets create one method of JsonResult type which will get the data from database and serialize it into JSON string.

public JsonResult GetAuthors()
{
pubsEntities pubs = new pubsEntities();
var authors = pubs.authors.ToList();
return Json(authors, JsonRequestBehavior.AllowGet);
}

So, I’m creating object instance of pubsEntities and get all authors in authors list. Then returning the authors list by serializing it to JSON using Json method. The JsonRequestBehaviour.AllowGet parameter is used to make the GET requests from the client become allowed. By default in ASP.NET MVC 2 the GET is not allowed because of security issue with JSON hijacking.

6. Next, lets create jQuery AJAX function which will call the GetAuthors method. We will use $.getJSON jQuery method.

<script language="javascript" type="text/javascript">
$(function () {
$.getJSON("GetAuthors", "", function (data) {
$("#authorsTemplate").tmpl(data).appendTo("#authorsList");
});
});
</script>

Once the web page is downloaded, the method will be called. The first parameter of $.getJSON() is url string in our case the method name. The second parameter (which in the example is empty string) is the key value pairs that will be send to the server, and the third function is the callback function or the result which is going to be returned from the server.

Inside the callback function we have code that renders data with template which has id #authorsTemplate and appends it to element which has #authorsList ID.

7. The jQuery Template

<script id="authorsTemplate" type="text/html">
<div >>

As you can see, I have tags containing fields (au_lname, au_fname… etc.) that corresponds to the table in the EDMX model which is the same as in the database.

One more thing to note here is that I have printMessage(state) function which is called inside ${ expression/function/field } tag.

The printMessage function

<script language="javascript" type="text/javascript">
function printMessage(s) {
if (s=="CA") return "The author is from California";
else return "The author is not from California";
}
</script>

So, if state is “CA” print “The author is from California” else “The author is not from California”

HERE IS THE COMPLETE ASPX CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Database Example :: jQuery Templates</title>
<style type="text/css">
body
{
font-family:Verdana,Arial,Courier New, Sans-Serif;
color:Black;
padding:2px, 2px, 2px, 2px;
background-color:#FF9640;
}
.author
{
display:block;
float:left;
text-decoration:none;
border:1px solid black;
background-color:White;
padding:20px 20px 20px 20px;
margin-top:2px;
margin-right:2px;
font-family:Verdana;
font-size:12px;
width:200px;
height:70px;}
.address
{
font-style:italic;
color:Blue;
font-size:12px;
font-family:Verdana;
}
.author_hover {background-color:Yellow;}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
function printMessage(s) {
if (s=="CA") return "The author is from California";
else return "The author is not from California";
}
</script>

<script id="authorsTemplate" type="text/html">
<div >>

So, in the complete example you also have the CSS style I’m using to stylize the output of my page.

Here is print screen of the end result displayed on the web page:

You can download the complete source code including examples shown in my previous blog posts about jQuery templates and PPT presentation from my last session I had in the local .NET UG meeting in the following DOWNLOAD LINK.

Do let me know your feedback.

Regards,
Hajan

 

出处:http://weblogs.asp.net/hajan/archive/2010/12/15/jquery-templates-with-asp-net-mvc.aspx


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap