Tutorial :Cleaner way of conditionally rendering part of a view in asp.net mvc2



Question:

I have an inline style I want to apply to a partial view based on a parameter passed in to it via the ViewDataDictionary.

My ascx look like this -

<div <% if ((bool)ViewData["Visible"] == false) { %> style="display:none;" <% } %>>    ...  </div>  

Is there a cleaner way to do this?

Edit:
Just to clarify, this is a partial view which is already using strongly typed model. So, I needed a way of passing extra information to the partial view which I couldn't have in the model because it was actually being called for each entry of a collection container in the model for my containing view.


Solution:1

You could contain it within a conditional operator:

<div <%= !(bool)ViewData["Visible"] ? "style='display:none;'" : "" %>>    ...  </div>  

I've not got an MVC project open to test, but the following work in standard ASP.Net. The following will be shown:

<div id="foo" <%= "a" == "b" ?       "style='display:none;'" : "" %> />  

And this will have the style correctly set:

<div id="foo" <%= "a" == "a" ?       "style='display:none;'" : "" %> />  


Solution:2

All the answers presented will work, I however prefer to wrap any 'if' logic in a helper So this is an amalgamation on all answers so far.. (I don't have VS in front of me, but this is what I would do)

public static string DisplayDivStyle(this Htmlhelper helper, bool visible)  {    return visible ? String.Empty: "style=\"display:none\"" ;   }  

then use like so..

<div <%= Html.DisplayDivStyle((bool)ViewData["Visible"])%>>  

In general, if visibility is a constant display requirement, then wire it in the view models (like uriDium suggests) otherwise for the ad-hoc cases I'd say ViewData is perfect.


Solution:3

You could create a custom model for the view where the flag is in the model.

so you could do a plain and simple

<% if (Model.Visible) { %>  <div id='foo'></div>  <% } %>  

And your custom class which wraps the original model:

public class MyCustomModel   {    private Original model {get; set;}    private bool visible {get; set;}      public class MyCustomModel(Original model)    {      this.model = model;    }  }  

Then you create the wrapper in your controller and pass it to your view like normal. Then in the top of your view change the type of your model to your custom type. Like

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MVCApp.ViewModels.YourCustomModel>" %>  

Excuse my syntax, it is probably not 100%. You get the idea though.


Solution:4

Another alternative that you can do is to create a model and pass it to your partial class. For example:

View model class:

using System;  using System.Web;  ...  namespace Sample {  public class MyViewModel      {         public bool Visible { get; set; }         public string DivInline { get { return !Visible ? "style=\"display:none\"" : String.Empty; } }      }  }  

In your controller:

public ActionResult ShowPage()  {       var myViewModel = new myViewModel();       myViewModel.Visible = true;       return View(myViewModel);  }  

In your View:

<%@Page .... Inherits="System.Web.Mvc.ViewPage<SampleNS.MyViewModel>"%>  ...  <div <%= Model.DivInline %>>  ...  </div>  

Please take note that this is not tested, but you get the theory :)

Hope this helps!


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »