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
			(
				(item.IsFeatured)
				?
				"<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.

Paging
webgrid_paging
Sorting
webgrid_sorting

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();
	}
	else
	{
		TempData.Keep("CurrentListing");
	}

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 />" + 
				item.PostalCode)
	),
	grid.Column("Cousines", "Cousines", style:"cousine")
	));

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

MVC 3 Set CSS class based on controller name

<%
//Response.Write(ViewContext.RouteData.GetRequiredString("controller"));
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>
</ul>