Developing Web 2.0 Portal using Asp.Net MVC, Microsoft Ajax Client Templates and jQuery with drag and drop widget personalization – Part 3

In this series:
1. Introduction
2. Part 1 – Portal Core Functionality
3. Part 2 – Drag and Drop Widget Personalization
4. Part 3 – Building Widget Gallery
5. Part 4 – Introduce Tabs and Users
6. Part 5 – Enhancements and Conclusion

Working portal at: http://aspspider.info/lakkakula/local.aspx

In this post we will see how to render widget gallery and touch a little bit on CSS. CSS has limited set of keywords on which almost all web pages on the internet are being rendered. As a web programmer every body should spend some to time learning and understanding CSS.

At the beginning of my career I worked as a Desktop Publishing Designer for a short while (Don’t ask me why).  What I use to do is; to take a well designed magazine and try to re-produce a page with same results using PageMaker and Photoshop. After repetitive reworks I started to understand the original designer’s intent and how to design good pages for magazines. Finally I have applied the knowledge I’ve gained to my real work on web development for designing elegant web pages.

Widget gallery is straight forward to implement. Just get the list of (n) widgets per page and render them on the top section of the page, like:

We would do this by reusing a client template:

<div id=”wizGallery”>
<div class=”left-nav”>
<input type=”text” value=”Search for widgets” style=”width: 150px;“ />
<button>Go</button>
<ul> <li class=”selected”><a href=”#”>Widget Gallery</a></li>
<li><a href=”#”>Cool Widgets</a></li>
<li><a href=”#”>New Feed Widget</a></li>
</ul>
</div>
<div class=”wiz-lib” style=”float:left;“>
<a href=”#” class=”wiz-close” >X</a>
<h4 style=”margin-left:10px”>Widget Gallery</h4>
<a href=”#” class=”prev” title=”Previous Page” onclick=”javascript:getGallery(‘prev’);” ><</a>
<div style=”float:left;margin-right:5px; width:690px; overflow:hidden;“ sys:attach=”dataview” dataview:data=”{{gallery}}” class=”sys-template”>
<div class=”wiz-holder”>
<img code:if=”icon!=”” sys:src=”{{‘../../Content/images/’ + icon}}” /><br />
<span>{{name}}</span><br />
<a href=”#” class=”link-button”>Add</a>
<a href=”#” class=”link-button”>Preview</a>
</div>
</div>
<a href=”#” class=”next” title=”Next Page” onclick=”javascript:getGallery(‘next’);”>></a>
</div>

</div>

Here is the CSS for Widget Gallery:

#wizGallery{border-bottom:1px solid #ccc; border-top:1px solid #ccc; background-color:#000;display:block; padding:0px; width:1000px; height:150px; color:#fff; display:none; float:left; }
.left-nav{padding:10px;width:200px;height:130px;background-color:#2E2E2E;float:left;}
.left-nav ul{line-height:30px;list-style-position:inside;}
.left-nav li.selected {background-color:#424242;}
.left-nav li.selected a{font-size:14px;font-weight:bold;text-decoration:none;color:#fff; }
.left-nav a{font-size:14px;font-weight:bold;text-decoration:none; }
.left-nav a:visited{ }
.left-nav a.selected:visited{ }
.page-options{list-style:none;width:265px; }
.page-options li {float:left;padding:0px;margin:0px; }
.page-options li a, .page-options li a:visited{color:#000;text-decoration:none;padding:2px 10px 2px 10px;margin-right:15px;border:1px solid #fff;background-color:#ccc; }
.page-options li a.selected, .page-options li a:hover {color:#fff;background-color:#666; }
.wiz-lib{width:775px}
.wiz-lib .wiz-close {float:right;color:Red; text-decoration:none; padding:10px 5px;}
.wiz-lib .prev {float:left;text-decoration:none;padding:38px 10px;margin-left:10px;margin-right:10px;background-color:#2e2e2e}
.wiz-lib .next {float:left;text-decoration:none;padding:38px 10px;background-color:#2e2e2e}
.wiz-lib .wiz-holder{float:left;display:block;background-color:#424242; padding:5px; margin-right:10px; width:75px; }
.wiz-lib .wiz-holder img{margin-left:auto; margin-right:auto; float:none;}
.wiz-lib .wiz-holder span{overflow:hidden;}

Server Code:

1 public class LocalController : Controller

2 {

3 IWidget repoWidget;

4 public JsonResult WidgetGallery(int page)

5 {

6 var wiz = repoWidget.WidgetGallery(page);

7 return Json(wiz);

8 }

9 }

repository method:

1 public object WidgetGallery(int page)

2 {

3 return (from wizBase in db.WidgetBases

4 select new {

5 id = wizBase.Id,

6 name = wizBase.Name,

7 icon = wizBase.Icon

8 }).Skip((page-1) * 7).Take(7).ToList();

9 }

Client Code:

1 <script language=“javascript” type=“text/javascript”>

2 var gallery = [];

3 var gallery_page = 1;

4

5 $(function() {

6 getGallery(‘first’); //get first page

7 });

8

9 function getGallery(way) {

10 if (way == ‘next’)

11 gallery_page = gallery_page + 1;

12 else

13 gallery_page = gallery_page – 1;

14

15 if (gallery_page == 0) gallery_page = 1;

16

17 $.getJSON(‘/Local/WidgetGallery?page=’ + gallery_page, null, function(json) {

18 Sys.Observer.clear(gallery);

19 Sys.Observer.addRange(gallery, json);

20 });

21 };

22 </script>

When page loads getGallery(‘first’); //get first page javascript method makes an ajax call to Local controller’s WidgetGallery action. This loads first page JSON to gallery[] array.

Only important thing to notice here is the following lines:

18 Sys.Observer.clear(gallery);

19 Sys.Observer.addRange(gallery, json);

When previous or next page is requested from controller; line 18 clears existing values in gallery[] array and line 19 re-fills with new values. This actions are really magical, because Sys.Observer automatically re-binds the changes in gallery[] to our template. That is all we have to do, really!

Ain’t that cool? 🙂

Advertisement