How to Work with HTML Helper Methods?

In the previous section, you may have noticed a few lines in Listing 5-12 that are not familiar to you, such as the following line:

<li>@Html.ActionLink("Contact Us", "Contact", "Home")</li>

This is called an HTML helper method. The idea behind HTML helper methods is that you can encapsulate functionality into libraries to generate HTML markup that can then be reused across the web application. ASP.NET MVC 4 already includes a rich set of HTML helper methods, but you can also create your own.

Html is a property of type HtmlHelper in the ViewWebPage class. ViewWebPage encapsulates the properties and methods that are needed to render a view that uses ASP.NET Razor syntax. The Html property has a lot of methods that render different types of HTML snippets.

The @Html.ActionLink() helper method is used to create three HTML hyperlinks. The helper method takes the following three arguments (but it has nine overloads with different options):

• The text that will appear in the hyperlink.

• The action method.

• The controller where the action method is declared.

At runtime, the example HTML helper method will render the following:

<a href="/Home/Contact">Contact Us</a>.

Another important helper method is @Html.Partial(). This helper method is used to render a partial view inside the main view. For example:

<section id="login">
    @Html.Partial("_LoginPartial")
</section>

This code tells the view to render the HTML contained in the partial view named _LoginPartial.cshtml, shown in Listing 1. To use this helper method, you don’t need to specify the extension of the partial view.

Listing 1. Content of the Partial View _LoginPartial.cshtml

@if (Request.IsAuthenticated) {
    <text>
        Hello, @Html.ActionLink(User.Identity.Name, "Manage", "Account", routeValues: null,
        htmlAttributes: new { @class = "username", title = "Manage" })!
        @using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" })) {
            @Html.AntiForgeryToken()
            <a href="javascript:document.getElementById('logoutForm').submit()">Log off</a>
        }
    </text>
} else {
    <ul>
        <li>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes:
       new { id = "registerLink" })</li>
        <li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new {
       id = "loginLink" })</li>
    </ul>
}

Listing 1 includes some other helper methods, such as @Html.BeginForm(), which renders a <form> element, and @Html.AntiForgeryToken(), which generates a hidden form field (antiforgery token) that is validated when the form is submitted.