Html Helper Class

By

What is HTML Helper

In MVC, many helper methods are added to create HTML control perfectly. As in Web Application we use control class to create control in asp.net, here we use HTML helper classes. But these methods are very light weight as they not maintain any viewstate and return as string.

Begin Form in HTML Helper

As in HTML we use Form method in which we assign action, method etc here we use BeginForm to implement this task.
Syntax for Begin Form:- 
 @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    { 
         
    
    }
In this method index is an action name, home is a controller name and formMethod Enum is used to set method which we already discussed in my previous article. We add all control in this opening and closing braces.

Label in HTML Helper

Label is used to show data on screen
Syntax of Label @Html.Label("Enter your First Name")
It will simply create a label which shows the message

Textbox in HTML Helper

Textbox method is used to create a textbox in screen. We pass id and name as string to this method.
For example:-
@Html.TextBox("fname")
In this method fname is worked as id and name for this control.

Submit Button in HTML Helper

In html helper there is no separate method to create submit button. As we know that in html we create submit button using input tag, similarly here we use textbox method to create submit button. To make it submit button we have to pass the type as submit.
For example:-
@Html.TextBox("sub_button","Button Text",new{type="submit"})
In this example sub_button is name and id of the button. Button Text is the text which you want to print on button and type submit represent that it is button.

Complete Example using these controls

Following is the example using these controls which I discussed in this article.
Create home controller and action index. In this view I have created two textbox and submit button using html helper classes.

  
 @{
    Layout = null;
   
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    
    @using (Html.BeginForm("hello", "Home", FormMethod.Post))
    {
    
        <table>
            <tr>
                <td>@Html.Label("Enter your first name")</td>
                <td>@Html.TextBox("fname")</td>
            </tr>
             <tr>
                <td>@Html.Label("Enter your Last name")</td>
                <td>@Html.TextBox("lname")</td>
            </tr>
             <tr>
                <td></td>
                <td>@Html.TextBox("sub_button","Full Name",new{type="submit"})

                   
                </td>
            </tr>
        </table>  
    }
    
</body>
</html>
Now create another action name hello in which fetch these controls value and show the full name


  
  using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcApplication6.Controllers
{
    public class HomeController : Controller
    {
       
        public ActionResult Index()
        {
           
            return View();
        }

        public ActionResult hello(string fname, string lname)
        {
            Response.Write("Hello "+fname + " " + lname);
            return View();
        
        }
    }
}
Now first execute the index view and fill the data in textbox and click on submit button.

After click on submit button
In next article I will discuss the others controls using html helper.


No comments:

Post a Comment