Tag Archives: MVC

MVC3: Dynamically set row background color in a MVC WebGrid

The idea is to inject invisible div or hidden field with color value in the row which is supposed to be featured with specific class name.

 grid.Column("CompanyName", header: "Name", style: "name",
			format: (item) => new MvcHtmlString
				"<input type='hidden' class='color' value='#e0cca9' />" +
				"<input type='hidden' class='color' value='' />" +

Then on document load, grid reload, any form submission call JavaScript

function SetFeaturedRow() {
	$('.webgrid .color').each(function (index, element) {
		$(element).parent().parent().css('background-color', $(element).val());

MVC3 data-placeholder HTML5 attribute

I ran into an interesting problem this evening with a very quick fix. I’m using the very neat chosen Javascript plugin (link) to add some aesthetic and functional sugar to a website’s existing dropdowns.
Anyhow, adding default text support (e.g. “Please choose an option”) to a multiple select dropdown is achievable using data-placeholder like this:

<select data-placeholder="Choose a country..." style="width:350px;" multiple class="chzn-select"">

Problem is, I am using ASP.NET MVC’s helper syntax to create my dropdownlists and “data-placeholder” is invalid syntax due to the dash character. The following does not work:

@Html.DropDownListFor(m => m.SelectedProductIDs, Model.AvaliableProducts.ToSelectList("ID","Name"), 
                           new { @class = "chzn-select", data-placeholder="Please select a product" })

Happily, Microsoft pulled a rabbit out of the hat and as of MVC3 underscores in html attribute properties are automatically converted to dashes, meaning that this:

@Html.DropDownListFor(m => m.SelectedProductIDs, Model.AvaliableProducts.ToSelectList("ID","Name"), 
                           new { @class = "chzn-select", data_placeholder="Please select a product" })...

will generate something like this, with the place_holder converted to place-holder

<select class="chzn-select chzn-done" data-placeholder="Please select a product" id="SelectedProductIDs" name="SelectedProductIDs" style="display: none; ">

Original post: Hello (cruel) World

MVC3 Webgrid sorting and paging

Helpful Webgrid walk through: MSDN Magazine
My challenge was that after filtering rendered collection, when clicked any sorting link I was getting full collection back.
Useful info

“When WebGrid renders the paging links, it reuses the page URL and attaches a query string parameter with the page number, such as http://localhost:27617/Product/DefaultPagingAndSorting?page=3”

Inspect with Firebug and you will see what’s passed to the backend.


All I had to do was modify Index action adding ‘page‘ and ‘sort‘ parameters.

public ActionResult Index(int page = 0, string sort = null)

	if (page == 0 && string.IsNullOrWhiteSpace(sort))
		CurrentListing = new Listing();

MVC3 Webgrid – Custom column content

Notice that Street1 is rendered with ‘br’ as a string, not as HTML tag.
To fix that, Street2 uses MvcHtmlString.

var grid = new WebGrid(Model.Restaurants, rowsPerPage: 15, ajaxUpdateContainerId: "divListing");
@grid.GetHtml(columns: grid.Columns(
	grid.Column("CompanyName", "Name", style:"name"),
	grid.Column("Street", header: "Street1", format: (item) => item.StreetNumber + " " + item.Street + ", <br>" + item.PostalCode, style: "street"),
	grid.Column("Street", header: "Street2", style: "street",
		format: (item) => 
			new MvcHtmlString(
				item.StreetNumber + 
				" " + 
				item.Street + 
				(!string.IsNullOrWhiteSpace(item.Suite) ? ", Suite " + item.Suite : string.Empty) + 
				", <br />" + 
	grid.Column("Cousines", "Cousines", style:"cousine")

Thanks to: Ray Kuhnell
ASP.NET MVC3 webgrid conditional statement on column (if, if else loop)

MVC 3 Set CSS class based on controller name

string currentController = ViewContext.RouteData.GetRequiredString("controller");
string activeClass = "background-color: #fff";

<ul id="menu">
	<li><a href="<%=Url.Content("~/")%>" <% if(ViewContext.RouteData.GetRequiredString("controller") == "Home") {%>style="background-color: #fff;" <% } %>> Home</a></li>
	<li><%: Html.ActionLink("Profile", "Index", new { controller = "Profile", action = "Index", id = -1 }, new { style = currentController == "Profile" ? activeClass : string.Empty })%></li>
	<li><%: Html.ActionLink("Reports", "Index", new { controller = "Reports", action = "Index", id = -1 }, new { style = currentController == "Reports" ? activeClass : string.Empty })%></li>
	<li><%: Html.ActionLink("Contact", "Index", new { controller = "Contact", action = "Index", id = -1 }, new { style = currentController == "Contact" ? activeClass : string.Empty })%></li>