How to Create Radio Button in Asp.net mvc3 Razor Application

Here I will demonstrate how to use a Radio Button in an ASP.Net Mvc3 Razor File.

Content: Suppose we have a Razor file named Employee Details.

Where you have to fill in the required employee details. Now in this form we have a "Gender" field name.

You have already created your Model Classes and Controller Classes. So in the Razor file how you will create the Radio Button.

We already know that @Html.Editorfor is for taking input data i.e. Textbox and @Html.Label is for displaying the label control.

Now you have to type @Html.RadibuttonFor just like Fig 1 and give the necessary parameters like the code given below.

Fig 1



@Html.RadioButtonFor(model =>model.Gender,"Male",true) Male
@Html.RadioButtonFor(model =>model.Gender,"Female",false) Female

Here the Radiobutton takes 3 parameters.

1. The attribute of your Model Class. For mine it is gender.

2. The passing value when you click the particular RadioButton. For my case when you click the 1st RadioButton and click the Submit Button. In the database it will save "Male".

3. By default which RadioButton will be selected? For mine in the case that the first RadioButton name "Male" will be selected.

Here I am giving the complete code for the Razor File. I hope You will get some information from here.

@model CabAutomationSystem.Employee
@{
ViewBag.Title = "Create";
}
<h2>Create</h2>
<scriptsrc="@Url.Content("~/Scripts/jquery.validate.min.js")"type="text/javascript"></script>
<scriptsrc="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"type="text/javascript"></script>
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<legend>Employee</legend>

<divclass="editor-label">
@Html.LabelFor(model =>model.EmployeeName)
</div>
<divclass="editor-field">
@Html.EditorFor(model =>model.EmployeeName)
@Html.ValidationMessageFor(model =>model.EmployeeName)
</div>

<divclass="editor-label">
@Html.LabelFor(model =>model.EmployeeID)
</div>
<divclass="editor-field">
@Html.EditorFor(model =>model.EmployeeID)
@Html.ValidationMessageFor(model =>model.EmployeeID)
</div>

<divclass="editor-label">
@Html.LabelFor(model =>model.ProjectName)
</div>
<divclass="editor-field">
@Html.EditorFor(model =>model.ProjectName)
@Html.ValidationMessageFor(model =>model.ProjectName)
</div>

<divclass="editor-label">
@Html.LabelFor(model =>model.Gender)
</div>
<divclass="editor-field">
@*@Html.EditorFor(model =>model.Gender)*@
@Html.RadioButtonFor(model =>model.Gender,"Male",true) Male @Html.RadioButtonFor(model
=>model.Gender,"Female",false) Female
@Html.ValidationMessageFor(model =>model.Gender)<br/>

</div>

@*<div class="editor-label">
@Html.LabelFor(model =>model.Cab.BookTime )
</div>
<div class="editor-field">
@Html.EditorFor(model =>model.Cab.BookTime)
@Html.ValidationMessageFor(model =>model.Cab.BookTime)
</div>*@

<divclass="editor-label">
@Html.LabelFor(model =>model.Cab.JourneyTime )
</div>
<divclass="editor-field">
@Html.EditorFor(model =>model.Cab.JourneyTime)
@Html.ValidationMessageFor(model =>model.Cab.JourneyTime)
</div>

@*<div class="editor-label">
@Html.LabelFor(model =>model.Cab.BookId)
</div>
<div class="editor-field">
@Html.EditorFor(model =>model.Cab.BookId)
@Html.ValidationMessageFor(model =>model.Cab.BookId)
</div>*@
<p>
<inputtype="submit"value="Create"/>
</p>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>

Here I have described the Razor file according to my model classes. So if there are any requirements of RadioButton in your mvc3 razor application you can easily see this reference and implement in your application.

Here is the screenshot of my application.