Using Web Helpers in Razor – ASP.NET MVC 3 Beta

Posted by: Malcolm Sheridan , on 10/22/2010, in Category ASP.NET MVC
Views: 58314
Abstract: The following article demonstrates how to use the Microsoft Web Helpers library in ASP.NET MVC 3 Beta.
The ASP.NET MVC team has recently released ASP.NET MVC 3 Beta. There have been some big changes in this release since MVC 2, and the biggest in my opinion has been the inclusion of the Razor View Engine. Razor simplifies your HTML mark-up and makes the code more readable. Razor contains the HTML helpers you know and love, such as Html.TextBox and Html.TextBoxFor. Well they have recently released a new library full of helpers and it is called the Microsoft Web Helpers library. This can be downloaded through NuPack. NuPack is a free open source package manager that makes it easy for you to find, install, and use .NET libraries in your projects. This article will show you how to download the library and start using some of these new helpers. This code also works in WebMatrix if you're using it.
Before moving on, you need to download ASP.NET MVC 3 Beta and NuPackClick here to download and install them using the Microsoft Web Platform Installer.
Open Visual Studio 2010 and create a new ASP.NET MVC 3 Web Application (Razor) project. The new MVC 3 Beta dialog can be seen in Figure 1.
image_1
Figure 1: The new ASP.NET MVC 3 Beta Project dialog allows you to choose which view engine you want to work with.
Choose Razor as the view engine and click OK.
The next step is to download the Microsoft Web Helpers library through NuPack. Follow these steps to do this:
Step 1: Right click the website and choose Add Package Reference. See Figure 2.
image_2
Figure 2: The Add Package option from right-clicking the website.
Step 2: The Add Package Reference dialog will open. Search for Microsoft in the search box in the top right corner. Upon completion you'll see microsoft-web-helpers option. Select that option and click Install. See Figure 3:
image_1
Figure 3: Choose microsoft-web-helpers and click install to get started.
Step 3: Click ‘Close’ to return to the project
 
Check the references and you'll see that the library has been added to the project. Figure 4 displays the new reference.
 
image_3
 
Figure 4: A new reference to the System.Web.Helpers assembly
Now it's time to start coding! Some of the new helpers added are:
 
  • Twitter - allows you to search or display a Twitter profile
  • Bing - search a website through Bing
  • AntiForgery - renders anti forgery tokens to stop CSRF attacks
 
 
Twitter
 
The Twitter helper allows you to search on Twitter or display a profile. To search on Twitter use the following code:
@Twitter.Search("wdx")
 
To search a profile use the following code:
 
@Twitter.Profile("malcolmsheridan")
 
Figure 5 shows you the Twitter helper.
 
image_4
 
Figure 5: Twitter search on your website.
 
Bing
 
The Bing helper allows you to search Bing from your website. Just type in a search and the results are displayed on the page. Here's the code:
@Bing.SearchBox("http://www.asp.net")
The only parameter is the site you want to perform the search on. Figure 6 displays the results.
image_5
 
Figure 6: Bing searching enabled on your website
 
 
AntiForgery
 
The AntiForgery helper renders a unique hidden field in your form to defend yourself from CSRF attacks. A Salt value can be passed as the only parameter if you have multiple forms on your page that you want protected independently from each other. Here's the code below:
 
<form action="post" action="/Home/SomeAction">
      @AntiForgery.GetHtml()
</form>     
 
Adding Salt looks like this:
 
<form action="post" action="/Home/SomeAction">
      @AntiForgery.GetHtml("someSaltValue")
</form>
 
Figure 7 shows the result of the unique token.
 
 
Figure 7: The unique hidden field that is generated by the AntiForgery helper.
 
As you can see these helpers are new to the Microsoft.Web.Helpers library and can be used in ASP.NET MVC 3 Beta as well as WebMatrix Beta 2. There are existing helpers that are great for you to know, so I'll cover them in a future article.
The entire source code of this article can be downloaded over here
Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles
Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET, a Telerik Insider and a regular presenter at conferences and user groups throughout Australia and New Zealand. Being an ASP.NET guy, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with jQuery and JavaScript. He also writes technical articles on ASP.NET for SitePoint and other various websites. Follow him on twitter @malcolmsheridan


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Neon on Sunday, November 21, 2010 7:23 AM
Can you write about reCaptcha helper in MVC 3 RC.
How validate in registration form.
Comment posted by Malcolm Sheridan on Sunday, November 21, 2010 7:28 PM
@Neon
I will do that.
Comment posted by Malcolm Sheridan on Saturday, November 27, 2010 10:35 PM
@Neon
Here you go. http://www.dotnetcurry.com/ShowArticle.aspx?ID=611
Comment posted by Neon on Sunday, November 28, 2010 7:37 AM
Thank you,Malcolm Sheridan.Very nice and simple explanation.
Comment posted by Neon on Sunday, November 28, 2010 7:44 AM
Thank you,Malcolm Sheridan.Very nice and simple explanation.
Comment posted by Mike Barlow on Friday, February 18, 2011 3:36 PM
When I tried this I got the following Error:
The type or namespace name 'SimpleMembershipProvider' could not be found (are you missing a using directive or an assembly reference?)

I had to references to WebMatrix.Data and WebMatrix.WebData.
Comment posted by amal on Wednesday, March 16, 2011 12:02 AM
hi Malcolm Sheridan,
can u explain how can we use fileuploader for multiple files..

this is my code for singe file...

var image = WebImage.GetImageFromRequest();
    
            if (image != null)
            {
                WebImage thumbimage = image;
                var filename = Path.GetFileName(image.FileName);
                if (image.Width > 600)
                {
                    image.Resize(500, ((500 * image.Height) / image.Width));
                }
                if (thumbimage.Width > 50)
                {
                    thumbimage.Resize(50, ((50 * image.Height) / image.Width));
                }
                image.Save(Path.Combine("~/Content/uploads", filename));
                thumbimage.Save(Path.Combine("~/Content/images/uploads", "thumb" + filename));
                
                filename = Path.Combine("~/Content/uploads", filename);
                model.ImageUrl = Url.Content(filename);
            }
            return View(model);

Comment posted by social27 on Monday, April 11, 2011 2:10 AM
hi Malcolm Sheridan,

i am working on mvc3 project using Razor view engine.

i have to apply dynamically classes on div.

my syntax is given below:



@{
    View.Title = "About Us";
}


<h2>About</h2>
@using(Html.BeginForm("About","HomeController")){

    int section = 0;
    if (section == 0)
    {
    <div class="student">
    }
    else
    {
    <div class="teacher">
    }

   </div>

  
    }



At runtime it gives below error:

Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.

Parser Error Message: The using block is missing a closing "}" character.  Make sure you have a matching "}" character for all the "{" characters within this block, and that none of the "}" characters are being interpreted as markup.


Source Error:

Line 5:    
Line 6:  <h2>About</h2>
Line 7:  @using(Html.BeginForm("About","HomeController")){
Line 8:  
Line 9:      int section = 0;



how we can handle such dynamic design conditions.

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel