HTML Helper class in
Razor View Engine
(BeginForm,Label,Texbox,Submit button)
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.
Methods in HTML Helper Classes:-
Begin Form
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
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
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 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.
Figure 1
After click on submit button
Figure 2
In next article I will discuss the others controls using
html helper.
For any query you can mail me at
malhotra.isha3388@gmail.com
No comments:
Post a Comment