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
