Rendering pre-formatted HTML in MVC 2 (2 of 2)

As noted here, I was struggling with how to do somewhat complex formatting – but have that same formatting be available from several views and partial views. Well, I tried the other technique I was thinking of, that was leveraging DisplayTemplates. I don’t know if this is the right way to do this, but it seems somewhat proper/straight-forward, and it works well.

First, here is how I consume these DisplayTemplates – nice and clean!

MyQueue.asx:

<%: Html.DisplayFor(model=>item.t_Customer, "CustomerNameTemplate") %>

<br />

<%: Html.DisplayFor(model=>item.t_Customer, "CustomerAddressBriefTemplate") %>

 

BrowseGrid.ascx:

<%: Html.DisplayFor(model=>item.t_Customer, "CustomerNameTemplate") %>

<br />

<%: Html.DisplayFor(model=>item.t_Customer, "CustomerAddressLongTemplate") %>

So those .ascx files are partial views in various Views sub-folders. What the heck is it doing though? Well, the first argument needs a lambda expression, but I need to pass the partial view a t_Customer object. So the calling convention there is kind of weird. I declare "model" as if I’m going to use it, but end up passing it item.t_Customer instead. That second argument is a ‘template’ name that you can use. Templates are stored for a specific view – or in my case, in /Views/Shares/DisplayTemplates – this is a built-in feature of ASP.NET MVC 2 (and I assume greater?):

image

Inside those DisplayTemplates is where the magic happens. To keep things simple, I strongly-type the display template – so that it errors out if you pass in the wrong data structure. Here is the CustomerAddressBriefTemplate.ascx (which just shows the city, state, and zip):

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<SederSoftware.CrmWebSite.Support.Data.It_Customer>" %>

<% if (string.IsNullOrWhiteSpace(Model.City))

   {

       if (string.IsNullOrWhiteSpace(Model.State))

        {%>

            (No Customer Location)

<%      }

       else

        { %>

            <%: Model.State + " " + Model.ZIPCode%>

<%      } %>

<%  }

    else

    {

        if (string.IsNullOrWhiteSpace(Model.State))

        {%>

            <%: Model.City + " " + Model.ZIPCode%>

<%      }

        else

        { %>

            <%: Model.City + ", " + Model.State + " " + Model.ZIPCode %>

<%  }

}%>

 

Likewise, here is all that nasty code that does the logic for formatting the customer first, last, and company name in CustomerNameTemplate.ascx:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<SederSoftware.CrmWebSite.Support.Data.It_Customer>" %>

<% if (string.IsNullOrWhiteSpace(Model.CompanyName))

    {

        if (string.IsNullOrWhiteSpace(Model.FirstName) && string.IsNullOrWhiteSpace(Model.LastName))

        {%>

            <a href="<%: Url.Action("Details", "Customer")%>" class="customer"

                title="Click here to view the details of this customer">

                    (No Customer Information)</a>

<%      }

        else

        { %>

            <a href="<%: Url.Action("Details", "Customer")%>" class="customer"

                title="Click here to view the details of this customer">

            <%: Model.LastName + ", " + Model.FirstName%></a>

<%      } %>

<%  }

    else

    {

        if (string.IsNullOrWhiteSpace(Model.FirstName) && string.IsNullOrWhiteSpace(Model.LastName))

        {%>

            <a href="<%: Url.Action("Details", "Customer")%>" class="customer"

                title="Click here to view the details of this customer">

            <%: Model.CompanyName %></a>

<%      }

        else

        { %>

            <a href="<%: Url.Action("Details", "Customer")%>" class="customer"

                title="Click here to view the details of this customer">

            <%: Model.LastName + ", " + Model.FirstName%></a> <i>(<%: Model.CompanyName %>)</i>

<%      }

    }

%>

In the end, this worked pretty well. Even better, I can now just use that .DisplayFor() anywhere I need to output the formatted customer name or address!

Tagged with: , , , ,
Posted in .NET 4.0, ASP.NET, ASP.NET MVC, Entity Framework, Uncategorized
5 comments on “Rendering pre-formatted HTML in MVC 2 (2 of 2)
  1. Mike says:

    Rob, I think you will be getting a hefty performance penalty especially in MVC 2.

    I was thinking more of data annotation route, although not 100% positive if adding HTML tags to the text will be properly rendered…

    With data annotation you’d extend the existing class, add a read-only property and do your manipulations there… Then on your page you’d do DisplayFor that read-only property.

    Here is an example of how I did minus HTML formatting…

    [MetadataType(typeof(AddressMetadata))]
    public partial class Address
    {
    [DisplayName("Address")]
    public string AddressFull
    {
    get
    {
    StringBuilder sb = new StringBuilder();
    sb.Append(Address1.Trim());
    if (!string.IsNullOrEmpty(Address2))
    {
    sb.Append(", ");
    sb.Append(Address2.Trim());
    }
    if (!string.IsNullOrEmpty(Address3))
    {
    sb.Append(", ");
    sb.Append(Address3.Trim());
    }

    sb.Append(", ");
    sb.Append(City.Trim());

    sb.Append(", ");
    sb.Append(StateCode.Trim());
    sb.Append(" ");
    sb.Append(ZipCode.Trim());

    return sb.ToString();
    }
    }
    }

    Like

  2. Mike says:

    I give up…. code ?

    Like

    • Rob Seder says:

      Yeah, WordPress drives me nuts with the formatting.

      But Mike, I’m not following what you mean above. I need to render out actual HTML, with even Html helpers. Like Url.Action() or Html.ActionLink. How can i do that if I’m all the way back in the model? It seems that since this UI-specific, and because it needs to have understanding of which controllers do what, the “code” (in whatever form that might be) needs to be in the View or potentially a ViewModel – right? I’m relatively new to MVC, so I want to understand if I’m missing something – thanks!! 🙂

      Like

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Archives
Categories

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 9 other followers

%d bloggers like this: