DEV Community

Cover image for A Detailed Explanation on Radio Button Helper and CheckBox Helper in MVC
Harshal Suthar
Harshal Suthar

Posted on • Originally published at ifourtechnolab.com

A Detailed Explanation on Radio Button Helper and CheckBox Helper in MVC

What is HTML Helper?

MVC provides the HTML Helper class that offers HTML controls in the razor view. HTML helper are methods that return data in the form of string. It binds the model with the view and passes a value from model properties to view and vice versa while submitting the form. There is no server-side control for this, so we have to use the HTML helper class.

RadioButton Helper

What is a RadioButton?

RadioButton is normally connected with the same group name. Users can select only one radio button at a time in the same group. We cannot select multiple radio buttons in the same group.

In MVC there are two ways to create RadioButton using HTML Helper

  • RadioButtonFor
  • RadioButton

RadioButtonFor

HTML.RadioButtonFor is strongly-typed control that is restricted to model property. we need to add a model name on top of the view. Strongly-typed checks for all the errors in code at the compile-time and saves our application not getting errors at run time.

Syntax

@Html.RadioButtonFor()

Example

 @Html.RadioButtonFor(m => m.Gender,"Male")
 @Html.RadioButtonFor(m => m.Gender,"Female")
Enter fullscreen mode Exit fullscreen mode

RadioButton

HTML.RadioButton is loosely-typed control that is not restricted to a model property. The HTML.RadioButton is not attached with any model you must pass a string with the same name as the model property to avoid the error at runtime.

Syntax

@Html.RadioButton()

Example


 Male: @Html.RadioButton("Gender","Male")  
 Female: @Html.RadioButton("Gender","Female") 

Enter fullscreen mode Exit fullscreen mode

We have to create a project for demonstrating of RadioButton.

Now we need to create a form model. Here I am creating a servey class for a model.

Right-click on the Models folder and add a class for a model.

ServeyFrom.cs


namespace Dynamicappendpartial.Models
{
public class SurveyForm
 {
public int id { 
get; 
set;
 }
[Display(Name = "Name")]
public string U_Name { 
get; 
set;
}
public string Gender { 
get; 
 set;
}
[Display(Name = "ContactNo")]
public long Contact_no { 
get; 
set;
}
}
}

Enter fullscreen mode Exit fullscreen mode

Right-click on the controller folder and add the controller for the model class we have created and add the following code inside the controller.

Read More: How To Upload And Return Files In Asp.net Mvc?

SurveyFormsController


using System;
using System.Collections.Generic;
using System.Data;
using Dynamicappendpartial.Models;

namespace Dynamicappendpartial.Controllers
{
public class SurveyFormsController: Controller
{
private PartialDbContext db = new PartialDbContext();
public ActionResult Create()
{
return View();
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "id,U_Name,Gender,Contact_no")] SurveyForm surveyForm)
{
if (ModelState.IsValid)
{
db.SurveyForms.Add(surveyForm);
 db.SaveChanges();
return RedirectToAction("Index");
}
return View(surveyForm);
}  
}
}

Enter fullscreen mode Exit fullscreen mode

Right-click on the method name and add the view to create the method. After adding view run the application.

Image description

In our Form, we require a radio button for gender instead of a text box. we need to modify the view code and add the radio button for Gender.

Create.cshtml


@model Dynamicappendpartial.Models.survey form

@using (Html.BeginForm()) 
{
@Html.AntiForgeryToken()<div class="form-horizontal"><h4>SurveyForm</h4>
<hr>@Html.ValidationSummary(true, "", new { @class = "text-danger" })<div class="form-group">@Html.LabelFor(model => model.U_Name, htmlAttributes: new { @class = "control-label col-md-2" })<div class="col-md-10">@Html.EditorFor(model => model.U_Name, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.U_Name, "", new { @class = "text-danger" })</div></div>
<div class="form-group">@Html.LabelFor(model => model.Gender, htmlAttributes: new { @class = "control-label col-md-2" })<div class="col-md-10">@Html.RadioButtonFor(model => model.Gender, "Male") Male @Html.RadioButtonFor(model => model.Gender, "Female") Female @Html.ValidationMessageFor(model => model.Gender, "", new { @class = "text-danger" })</div></div>
<div class="form-group">@Html.LabelFor(model => model.Contact_no, htmlAttributes: new { @class = "control-label col-md-2" })<div class="col-md-10">@Html.EditorFor(model => model.Contact_no, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Contact_no, "", new { @class = "text-danger" })</div></div>
<div class="form-group"><div class="col-md-offset-2 col-md-10"><input class="btn btn-default" type="submit" value="Submit"></div></div></div>
}
<div>@Html.ActionLink("Back to List", "Index")</div>

Enter fullscreen mode Exit fullscreen mode

Now run the application and see the view is working as we excepted.

Image description

CheckBox Helper

What is a CheckBox?

A checkBox is normally used to select multiple values. A checkbox is similar to a radio button but in a checkbox, we can select multiple values, and is shown as a square box.

In MVC, there are two ways to create CheckBox using HTML Helper

  • CheckBoxFor
  • CheckBox

CheckBoxFor

HTML.CheckBoxFor is strongly-typed control that is restricted to model property. we need to add a model name on top of the view. Strongly-typed checks for all the errors in code at the compile-time and saves our application not getting errors at run time.

Syntax

@Html.CheckBoxFor()

Example

@Html.CheckBoxFor(m => m.ASP.NET MVC)
@Html.CheckBoxFor(m => m.NET Core)
@Html.CheckBoxFor(m => m.JAVA)
@Html.CheckBoxFor(m => m.Angular)

Enter fullscreen mode Exit fullscreen mode

CheckBox

HTML.CheckBox is loosely-typed control that is not restricted to a model property. The HTML.CheckBox is not attached with any model you must pass a string with the same name as the model property to avoid the error at runtime. It doesn’t check errors at run time.

Syntax

@Html.CheckBox()

Example


@Html.CheckBox("ASP.NET MVC", true)
@Html.CheckBox("NET Core", false)

@Html.CheckBox("JAVA", false)
@Html.CheckBox("Angular", false)

Enter fullscreen mode Exit fullscreen mode

We have to create a project for demonstrating CheckBox.

To Understand checkbox helper, we are using the following table

Image description

Searching for Reliable ASP.Net Development Company?

Our requirement is when we select the checkbox and click on submit button then we get all the checkbox values to append with some string. Show in the below image.

Image description

And if we do not select any city and click on submit button we get the following screen.

Image description

Use the following SQL script to create table User_City and insert data in the table.


CREATE TABLE User_City
(
  ID INT IDENTITY PRIMARY KEY,
  C_Name NVARCHAR(100) NOT NULL,
  IsSelected BIT NOT NULL
)
Insert into User_City values ('Pune', 0)
Insert into User_City values ('Ahmedabad', 0)
Insert into User_City values ('Cuttack', 1)
Insert into User_City values ('Mumbai', 0)
Insert into User_City values ('Bangalore', 0)
Insert into User_City values ('Delhi', 0)
Insert into User_City values ('Hyderabad', 1)

Enter fullscreen mode Exit fullscreen mode

Add the ADO.NET data model to retrieve data from the database in our application.

Image description

Create Controller

Right-click on the controller folder and add the controller for the model class we have created and add the following code inside the controller.


using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.Mvc;
using Dynamicappendpartial.Models;

namespace Dynamicappendpartial.Controllers
{
public class User_CityController : Controller
{
private Entities db = new Entities();

[HttpGet]
public ActionResult Index()
{
return View(db.User_City.ToList());
}
[HttpPost]
public string Index(IEnumerable<user_city> user_Cities)
{
if(user_Cities.Count(x => x.IsSelected) == 0)
{
 return "You have not select any city";
}
else
{
StringBuilder sb = new StringBuilder();
sb.Append("Your selected city is -");
foreach(User_City user_City in user_Cities)
{
if(user_City.IsSelected)
{
sb.Append(user_City.C_Name + " , ");
}
}
sb.Remove(sb.ToString().LastIndexOf(" , "), 1);
return sb.ToString();
}
}
}
}
</user_city>

Enter fullscreen mode Exit fullscreen mode

Right-click on the index method and add the index view. Add the following code inside the index view

@model List<dynamicappendpartial.models.user_city>
@{
ViewBag.Title = "Index";
}
@using (Html.BeginForm())
{


for (var i = 0; i < Model.Count(); i++)
{<table><tbody><tr><td> </td></tr></tbody><tbody><tr><td> </td><td>
@Html.HiddenFor(it => it[i].ID)
@Html.HiddenFor(it => it[i].C_Name)
@Html.DisplayFor(it => it[i].C_Name)</td><td> </td><td>
@Html.CheckBoxFor(it => it[i].IsSelected, new { Style = "vertical-align:3px ; margin-left:2px;}" })</td><td> </td></tr><tr><td> </td></tr></tbody></table>
}
<input id="Submit1" type="submit" value="submit">
}
</dynamicappendpartial.models.user_city>

Enter fullscreen mode Exit fullscreen mode

Now run the application and test our requirement it will be working as we excepted.

Image description

Conclusion

Here in this blog, we learned the usage of RadioButton and CheckBox using HTML Helper in MVC application. We have also gone through various types with real-time example.

Top comments (0)