rajeeshcv.com

Sharing my knowledge

MVC - Rendering view elements in a specified order

In my current project, I had to render elements in the view based on a setting provided by the model(basically it is a configurable thing). Few clients need view element to be rendered in a particular order and few others in a different way. What we did was, saved this elements order in a settings file which could be changed based on the clients. Then created an extension to render this based on the order.

This is what was I was trying to explain. for  Client 1 the “Login section” to be displayed first followed by “Password reminder section

image

For Client 2 , these sections needs be ordered differently

image

In order to achieve this, I came up with an HtmlHelper extension

/// <summary>
/// Renders the render items in the provided sequence order.
/// </summary>
/// <param name="htmlHelper">The HTML helper which is extended.</param>
/// <param name="sequenceOrder">The order in which items to be rendered. Sequence starts at an index of 0.</param>
/// <param name="renderItems">The items to be rendered in order.</param>
/// <remarks>
/// Values in the sequence order should match with the total number of render items. 
/// Invalid sequnce numbers are ignored.
/// </remarks>
public static void OrderBy(this HtmlHelper htmlHelper, int[] sequenceOrder, params Action<HtmlHelper>[] renderItems)
{
    if (sequenceOrder != null && renderItems != null)
    {
        foreach (var sequnce in sequenceOrder)
        {
            // CHeck whether the sequence is with inthe bounds
            if (sequnce < renderItems.Length && sequnce >= 0)
            {
                renderItems[sequnce].Invoke(htmlHelper);
            }
        }
    }
    else if (renderItems != null)
    {
        // If the sequence order is not provided, render it in normal order in which items are declared.
        foreach (var renderItem in renderItems)
        {
            renderItem.Invoke(htmlHelper);
        }
    }
    else
    {
        // Do Nothing
    }
}

In the view, you could do

<% Html.OrderBy(this.Model.LoginDisplayOrder, (html) => { %>
    <div class="container"></div>                
    <% Html.RenderPartial("LoginSection", this.Model); %>
<% }, (html) => { %>
    <div class="container"></div>
    <% Html.RenderPartial("ReminderPassword", this.Model); %>
<% }); %>

Here Model.LoginDisplayOrder is just an array of integers in which the items to be rendered. Hope this will help.

It’s better to automate, instead of checklists

In my day to day activities I have seen many checklists like

  1. Code review checklist
  2. Source control check-in checklist
  3. Developer checklist
All these are good because it helps to reduce failures but does everyone follow these all the time???. Sometimes I(or any developer) forgot to go through the checklist due to many reasons like time constraints, lack of concentration etc… and I don’t think we should blame anyone for missing this because - “We all are humans and we tends to forget”. Only way we could reduce these mistakes is to automate!!! wherever possible. In my current project, all the aspx page should have direction(dir) attribute in the html tag as part of the localization work. As usual an email checklist for localizing an aspx page was sent to all the developers, out of that one item was to include “dir” attribute whenever they add new aspx file. Everybody followed this in the initial stages but later everybody forgot about this requirement, which caused extra hours of effort to fix it in all the pages. It could have been avoided if we had a automated process which verifies this. In order to automate one way is to write a custom MSBuild task which could verify whether a aspx file has “dir” attribute, if it doesn’t fails build (this whole idea came from http://blogs.msdn.com/b/simonince/archive/2009/07/10/enforcing-unobtrusive-javascript.aspx). If you want to learn about writing a custom MSBuild task, I suggest  - http://msdn.microsoft.com/en-us/library/t9883dzc.aspx So below the code which creates this custom MS Build task

Read more...

JQueryUI Datepicker in ASP.Net MVC

Datepicker is nice and cool plugin for displaying the calendar with ease. It is very easy to use JQuery plugin, it comes as part of JQueryUI library, so if you want to use this – first download JQueryUI from http://jqueryui.com/download and also download JQuery(http://docs.jquery.com/Downloading_jQuery) if you haven’t done yet. For e.g. if you have a form like one below

<% using(Html.BeginForm()){%>
  <fieldset>
    <legend>Event Information</legend>
     <p>
        <label for="EventName">Event Name:</label>
        <%= Html.TextBox("EventName")%>
            </p>
            <p>
            <label for="StartDate">Start Date:</label>
            <%= Html.TextBox("StartDate")%>
            </p>
            <p>
            <label for="EndDate">End Date:</label>
            <%= Html.TextBox("EndDate")%>
            </p>
            <p>
                <input type="submit" value="Save" />
            </p>
  </fieldset>
<% }%>

and you want to attach datepicker to “StartDate” and “EndDate” input fields,

Read more...

ASP.Net MVC – Conditional rendering Partial Views with Action<T> delegate

This is an update to my previous post regarding conditional rendering partial views, in that I used the internal implementation of the Html.RenderPartail(…) method to create the Html extension. Later I found a simple way to achieve the same using Action<T> delegate

<p>Partial rendering with Action Methods</p>        
<% Html.PartialIf(this.Model.Exists, html => html.RenderPartial("MyPartialView")); %>

If you look at the “PartialIf” implementation, it is simple, cleaner than the previous technique I have mentioned in my post.

public static void PartialIf(this HtmlHelper htmlHelper, bool condition, Action<HtmlHelper> action)
{
    if (condition)
    {
        action.Invoke(htmlHelper);
    }
}

That’s it :)

ASP.Net MVC - Conditional rendering Partial Views

Update : Later I found a cleaner and simple approach to do the same – read this post ASP.Net MVC – Conditional rendering Partial Views with Action<T> delegate

Following my previous post about Conditional Rendering, one of my colleague asked me how to render the partial view based on a condition.

Normal way of doing this is

<p>Normal partial rendering based on condition</p>           
<% if(this.Model.Exists)
 {
     Html.RenderPartial("MyPartialView");
 } %>

I am not sure about any other technique for rendering partial view conditionally other than this (correct me if I am wrong :) ).

Then I thought about copying the pattern I have used in my previous post and came up with this code which could conditionally render partial views and you could use the Html extension like below, which more clean than the previous

<% Html.PartialIf(this.Model.Exists, "MyPartialView"); %>

Read more...