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 )

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

Archives
Categories

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

Join 2 other followers

%d bloggers like this: