Creating Rich View Components in ASP.NET MVC
- by kazimanzurrashid
One of the nice thing of our Telerik Extensions for ASP.NET MVC is, it gives you an excellent extensible platform to create rich view components. In this post, I will show you a tiny but very powerful ListView Component. Those who are familiar with the Webforms ListView component already knows that it has the support to define different parts of the component, we will have the same kind of support in our view component. Before showing you the markup, let me show you the screenshots first, lets say you want to show the customers of Northwind database as a pagable business card style (Yes the example is inspired from our RadControls Suite) And here is the markup of the above view component. <h2>Customers</h2>
<% Html.Telerik()
.ListView(Model)
.Name("customers")
.PrefixUrlParameters(false)
.BeginLayout(pager =>
{%>
<table border="0" cellpadding="3" cellspacing="1">
<tfoot>
<tr>
<td colspan="3" class="t-footer">
<% pager.Render(); %>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<%})
.BeginGroup(() =>
{%>
<td>
<%})
.Item(item =>
{%>
<fieldset style="border:1px solid #e0e0e0">
<legend><strong>Company Name</strong>:<%= Html.Encode(item.DataItem.CompanyName) %></legend>
<div>
<div style="float:left;width:120px">
<img alt="<%= item.DataItem.CustomerID %>" src="<%= Url.Content("~/Content/Images/Customers/" + item.DataItem.CustomerID + ".jpg") %>"/>
</div>
<div style="float:right">
<ul style="list-style:none none;padding:10px;margin:0">
<li>
<strong>Contact Name:</strong>
<%= Html.Encode(item.DataItem.ContactName) %>
</li>
<li>
<strong>Title:</strong>
<%= Html.Encode(item.DataItem.ContactTitle) %>
</li>
<li>
<strong>City:</strong>
<%= Html.Encode(item.DataItem.City)%>
</li>
<li>
<strong>Country:</strong>
<%= Html.Encode(item.DataItem.Country)%>
</li>
<li>
<strong>Phone:</strong>
<%= Html.Encode(item.DataItem.Phone)%>
</li>
<li>
<div style="float:right">
<%= Html.ActionLink("Edit", "Edit", new { id = item.DataItem.CustomerID }) %>
<%= Html.ActionLink("Delete", "Delete", new { id = item.DataItem.CustomerID })%>
</div>
</li>
</ul>
</div>
</div>
</fieldset>
<%})
.EmptyItem(() =>{%>
<fieldset style="border:1px solid #e0e0e0">
<legend>Empty</legend>
</fieldset>
<%})
.EndGroup(() =>
{%>
</td>
<%})
.EndLayout(pager =>
{%>
</tr>
</tbody>
</table>
<%})
.GroupItemCount(3)
.PageSize(6)
.Pager<NumericPager>(pager => pager.ShowFirstLast())
.Render(); %>
As you can see that you have the complete control on the final angel brackets and like the webform’s version you also can define the templates. You can also use this component to show Master/Detail data, for example the customers and its order like the following:
I am attaching the complete source code along with the above examples for your review, what do you think, how about creating some component with our extensions?
Download: MvcListView.zip
