HTML Helper Class in
Razor View Engine in MVC
(Radio Button, Password, TextArea)
In previous article I discussed about the HTML Helper class and we created some control
using this class. In this article I am continuing this topic and will discuss
about the others controls and continue with the previous example which I used
in my last article.
Note:-Before
reading this article kindly goes through the previous article.
RadioButton
This HTML
Helper method is used to create Radio Button. This method returns radio button
input element. In this method we pass id and name to the radio button method as
a first parameter. In second value we pass the value which will be accessed
when form submitted.
For example:-
@Html.RadioButton("rgender","Male")
In this example rgender is id and name for this control
and Male is the value which accessed on form submitted.
If you want to by default select any value then you can
also pass third parameter as true which represent the value as selected.
For
example:-
@Html.RadioButton("rgender","Male",true)
Password
This HTML Helper method is used to create TextBox having
password type. In this method we pass the id and name to this control.
For example:-
@Html.Password("pass")
In this example pass is id and name in this example.
TextArea
This HTML Helper method is used to create multiline
Textbox.
In this method we pass id and name.
For
example:-
@Html.TextArea("intro")
In this example intro is id and name for this control.
Complete
Example
Following is
the example in which I am using all control and fetching their value into
another view
Create home
controller and index view
@{
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>@Html.Label("Gender")
</td>
<td>
@Html.RadioButton("rgender", "Male", true)<span>Male</span>
@Html.RadioButton("rgender", "Female")<span>Female</span>
</td>
</tr>
<tr>
<td>@Html.Label("Enter your Password")</td>
<td>@Html.Password("pass")</td>
</tr>
<tr>
<td>@Html.Label("Re-Enter your Password")</td>
<td>@Html.Password("pass")</td>
</tr>
<tr>
<td>@Html.Label("Brief Introduction about yourself")</td>
<td>@Html.TextArea("intro")</td>
</tr>
<tr>
<td></td>
<td>@Html.TextBox("sub_button", "Full Name", new { type = "submit" })
</td>
</tr>
</table>
}
</body>
</html>
Now create
another view name hello and in this method pass control value as parameter and
either store it in database or print it. I am just printing this value on
screen.
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, string rgender, string pass, string intro)
{
Response.Write("Hello "+fname +
" " + lname+"<br/>
Your Gender is "+rgender+"<br/> Your Password is "+pass+"<br/>
Your Brief Introduction is "+intro);
return View();
}
}
}
Output of
this code as follows:-
Figure 1
Now press
button full name and you will get following output
Figure 2
Hope you
enjoyed the article. In my article I will discuss more control
No comments:
Post a Comment