Integrate ASP.NET MVC 3 into existing Web Forms applications

http://www.hanselman.com/blog/IntegratingASPNETMVC3IntoExistingUpgradedASPNET4WebFormsApplications.aspx

http://www.hanselman.com/blog/CreatingANuGetPackageIn7EasyStepsPlusUsingNuGetToIntegrateASPNETMVC3IntoExistingWebFormsApplications.aspx

http://www.hanselman.com/blog/UpdatingAndPublishingANuGetPackagePlusMakingNuGetPackagesSmarterAndAvoidingSourceEditsWithWebActivator.aspx

Pass html class attribute to html helper in asp.net mvc

Scenario

I want to assign css class name to a link rendered by Html.ActionLink html helper method

When i use class as a property of anonymous type to pass the value, I got compile exception as class is reserved key word in c#.

@Html.ActionLink("All", "Index", "Company", new { area = "Customer" }, new { class = "index" })

Solution

@class, use @ symbol to prefix class property name

@Html.ActionLink("All", "Index", "Company", new { area = "Customer" }, new { @class = "index" })

ImageButton (Link around image) in ASP.NET MVC

Scenario

I want to implement paging function to guide users through list of records. The idea is to use a link around a image, by clicking on that image, the link takes users to proper controller action. I try to use ActionLink Html helper method, but it render and close the entire tag.

@Html.ActionLink(" ", "Index", "Company", new { area = "Customer", filter = ViewBag.Filter, orderBy = ViewBag.OrderBy, sortDirection = ViewBag.SortDirection, pageNum = ViewBag.PageNum - 1 }, new { id = "_prevPageImg" })

<a href="/Customer/Company?filter=b&amp;orderBy=Telephone1&amp;sortDirection=Ascending&amp;pageNum=0" id="_prevPageImg"> </a>

Solution

1. Css background-image

#_nextPageImg
{
background-image: url("/Content/themes/base/images/jumpbarrewinddisabled_white.gif");
background-repeat:no-repeat;
background-position: center center;
display:inline-block;
height:9px;
width:8px;
}

2. Url.Action method

<a href="@Url.Action("Index", "Company", new { area = "Customer" })"><img src="/Content/themes/base/images/jumpbarforward_white.gif" alt="" /></a>

Html.BeginForm loses routeValues with FormMethod.GET

Scenario:

I have a list of companies on a page which provide search and sort function, and I want to make search works together with sort.

Search function is implemented as a text box inside a form.

@using (Html.BeginForm("Index", "Company", new { area = "Customer", orderBy = ViewBag.OrderBy, sortDirection = ViewBag.SortDirection }, FormMethod.Get))
{
<input id="findCriteria" type="text" maxlength="100" name="filter" value="@ViewBag.Filter" />
}

Sort function is implemented as links render in table header

@Html.ActionLink("Company Name", "Index", "Company", new { area = "Customer", filter = ViewBag.Filter, orderBy = "Name", sortDirection = sortDirection }, null)

Company list is a table outside and below the search form.

Form is rendered correctly with query string

<form action="/Customer/Company?orderBy=Name&amp;sortDirection=Descending" method="get">

But when i submit the form, routeValues/query string is lost.

http://localhost:60606/Customer/Company?filter=a

As you can see from the resulted URL, browser has stripped away the query string from the action URL, while we expected it to append to the query string instead.

Solution:

1. Use hidden fields to save route values

Put two hidden fields into search form to store route values, when the form is submitted the name and value of those hidden fields will be appended to the query string.

@Html.Hidden("orderBy", (string)ViewBag.OrderBy)
@Html.Hidden("sortDirection", ViewBag.SortDirection as SortDirection?)

2. Use JQuery to submit the form.

<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('form').submit(function () {
var $form = $(this);
if ($form.valid()) {
window.location.href = $form.attr('action') + '&filter=' + $('[name=filter]').val();
}
return false;
});
</script>