Saturday 23 November 2013

HTML Helper Class in Razor View Engine in MVC


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