In this article, we will learn how to create strongly typed checkbox list in ASP.NET MVC application, let's learn step by step about it.
Step 1 : Create an ASP.NET MVC Application.
Now let's start with a step by step approach from the creation of simple ASP.NET MVC application as in the following:- "Start", then "All Programs" and select "Microsoft Visual Studio 2015".
- "File", then "New" and click "Project..." then select "ASP.NET Web Application Template", then provide the Project a name as you wish and click on OK .
Step 2 : Add Model class
Right click on model folder of created MVC application project and add class named CheckBoxModel.cs.CheckBoxModel.cs
public class CheckBoxModel { public int Value { get; set; } public string Text { get; set; } public bool IsChecked { get; set; } } public class CheckBoxList { public List<CheckBoxModel> CheckBoxItems { get; set; } }
Step 3 : Add Controller
Right click on Controllers folder of created MVC application and add Controller named HomeController.cs.HomeController.cs
public class HomeController : Controller { // GET: Home public ActionResult Index() { //Creating object of CheckBoxList model class CheckBoxList ChkItems = new CheckBoxList(); //Additng items to the list List<CheckBoxModel> ChkItem = new List<CheckBoxModel>() { new CheckBoxModel {Value=1,Text="ASP.NET",IsChecked=true }, new CheckBoxModel {Value=1,Text="C#",IsChecked=false }, new CheckBoxModel {Value=1,Text="MVC",IsChecked=false }, new CheckBoxModel {Value=1,Text="Web API" ,IsChecked=false}, new CheckBoxModel {Value=1,Text="SignalR",IsChecked=false }, new CheckBoxModel {Value=1,Text="SQL" ,IsChecked=false}, }; //assigning records to the CheckBoxItems list ChkItems.CheckBoxItems = ChkItem; return View(ChkItems); } }
Step 4: Add View
Right click on View folder of created MVC application project and add empty view named Index.cshtml. Now open the Index.cshtml view and write the following code into the view@model BindCheckBoxListInMVC.Models.CheckBoxList
@{
ViewBag.Title = "www.compilemode.com";
}
<div class="form-horizontal">
<h4>Select your favourite Subjects</h4>
@foreach (var item in Model.CheckBoxItems)
{
<input id="chk@(item.Value)"
type="checkbox"
value="@item.Value"
checked="@item.IsChecked" />
@item.Text <br />
}
</div>
Summary
I hope this article is useful for all readers, if you have a suggestion then please contact me.
Don't Forget To
- Subscribe my YouTube Chanel Compile Mode
- Subscribe free email alert of compilemode.com
- Like Facebook page .
- Follow on Twitter.
- Share to your friends
Post a Comment