ASP.NET MVC and Repeater

Article here: http://haacked.com/archive/2008/05/03/code-based-repeater-for-asp.net-mvc.aspx

My response – we have a repeater already, works fine with MVC and is easy to style and add paging, sorting, etc… thanks to my good friend jQuery…

 

At the top to setup jQuery:

$(document).ready(function(){
        $("#barTable").tablesorter()
            .tablesorterPager(
            {
                container: $("#pager"),
                size : 5,
                positionFixed:false
        });
    });

 

at the bottom to setup the pager:

 

<div id="pager" class="pager">
<img src="/FooWeb/Content/Images/jQueryGrid/first.png" class="first"/>
        <img src="/FooWeb/Content/Images/jQueryGrid/prev.png" class="prev"/>
        <input type="text" class="pagedisplay"/>
        <img src="/FooWeb/Content/Images/jQueryGrid/next.png" class="next"/>
        <img src="/FooWeb/Content/Images/jQueryGrid/last.png" class="last"/>
        <select class="pagesize">
            <option selected="selected"  value="5">5</option>
            <option value="10">10</option>
        </select>

    </div>

Now the guts of the matter:

 

<table id="barTable" class="tablesorter">
    <thead>
        <tr>
            <th>
                Type
            </th>
            <th>
                ServiceProvidedDate
            </th>
            <th>
                DateInput
            </th>
            <th>
                Amount
            </th>
            <th>
                AmountPaid
            </th>
            <th>
                EnteredBy
            </th>
        </tr>
    </thead>
    <tbody>
        <asp:Repeater ID="BarRepeater" runat="server" OnItemDataBound="ShowBarItems">
            <ItemTemplate>
                <tr>
                    <td>
                        <%#Eval("ShortDesc")%>
                    </td>
                    <td>
                        <%#Eval("ServiceProvidedDate", "{0:d}")%>
                    </td>
                    <td>
                        <%#Eval("DateInput", "{0:d}")%>
                    </td>
                    <td>
                        <%#Eval("Amount", "{0:C}")%>
                    </td>
                    <td>
                        <%#Eval("AmountPaid", "{0:C}")%>
                    </td>
                    <td>
                        <%#Eval("UserName")%>
                    </td>
                </tr>
            </ItemTemplate>
        </asp:Repeater>
    </tbody>
</table>

Need databinding events?

<asp:Repeater ID="BarRepeater" runat="server" OnItemDataBound="ShowBarItems">

Nothing new needed.

Hook it up in the View code behind:

public partial class BarView: System.Web.Mvc.ViewUserControl<IList<Core.Domain.Bar>>
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (ViewData.Count > 0)
            {
                BarRepeater.DataSource = ViewData;
                BarRepeater.DataBind();
            }
        }

        protected void ShowBarItems(Object sender, RepeaterItemEventArgs e)
        {
            if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
            {
                var bar= e.Item.DataItem as Bar;
                if (bar!= null)
                {
                    ((Repeater)e.Item.FindControl("BarItemRepeater")).DataSource = bar.BarItems;
                    e.Item.FindControl("BarItemRepeater").DataBind();

                    if (bar.BarStatus == Core.EnumClasses.BarStatus.S)
                    {
                        var EditLink = e.Item.FindControl("EditLink") as HyperLink;
                        if (EditLink != null)
                            EditLink.NavigateUrl = string.Format("/FooWeb/Bar.mvc/EditExistingBar/{0}",bar.BarID);

                        var CompleteLink = e.Item.FindControl("CompleteLink") as HyperLink;
                        if (CompleteLink != null)
                            CompleteLink.NavigateUrl = string.Format("/FooWeb/Bar.mvc/CompleteBar/{0}", bar.BarID);

                        var CompleteAndPrintLink = e.Item.FindControl("CompleteAndPrintLink") as HyperLink;
                        if (CompleteAndPrintLink != null)
                            CompleteAndPrintLink.NavigateUrl = string.Format("/FooWeb/Bar.mvc/CompleteAndPrintBar/{0}", bar.BarID);

                    }
                }
            }
        }
    }

Learn more about the jQuery tablesorter here:

http://tablesorter.com/docs/

Advertisements

2 thoughts on “ASP.NET MVC and Repeater

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s