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

Advertisements

ASP.NET AJAX / Microsoft AJAX is dead?

While reading the book “Programming Microsoft ASP.NET MVC by Dino Esposito (May 14, 2010)”, I learned client side data binding.

The technology mentioned in the book is Microsoft Ajax / ASP.NET Ajax and the Sys.UI.DataView component. I want to try it out myself, but i can barely find any documentation online, not to mention any official.

After google for “Is asp.net ajax dead?”, I find lots of blog posts to indicate that Jquery is the first choice right now.

If anyone is interested in the original posts, below is the link.

http://stephenwalther.com/blog/archive/2010/03/16/microsoft-jquery-and-templating.aspx

http://weblogs.asp.net/toddanglin/archive/2010/04/19/microsoft-ajax-client-library-is-dead-long-live-jquery.aspx

http://jclaes.blogspot.com/2010/04/state-of-client-side-aspnet-ajax-40.html

http://encosia.com/understanding-jquerys-impact-on-microsoft-and-asp-net/

http://stackoverflow.com/questions/4250637/is-the-asp-net-ajax-library-dead

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>