In this
article will show how you can bind the checkbox list in asp.net mvc from
database and validate the bind checkbox list whether user have selected any
item or not using jQuery and javascript.
Some of my previous articles are as follows:
Some of my previous articles are as follows:
How
to Bind CheckBoxlist By Model Data and Get Selected Value In Controller in
asp.net MVC , CheckBoxList
Bind By Using XmlDataSource in Asp.Net, Get
All Checked Checkbox Value Using jQuery in Asp.Net CheckBoxList , MultiSelect
DropdownList Using jQuery in Asp.Net MVC and C#.Net , Validate
Selection Of Checkbox In GirdView Using Asp.net C# and jQuery | Force User To
Select One CheckBox Of GridView Before Submit in Asp.net Using javascript
, Group
CheckBox In C# WinForm.
So for this article first we will create a new table in
which we will add some values.
After this we will create a new asp.net mvc application and
add and entity file in which we will add the table object.
After this we will add a new model class file and add the
below code.
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MVC_Demos.Models
{
public class CheckBoxListModel
{
public List<StudentCheckBoxData>
CheckBoxListData { get; set; }
}
public class StudentCheckBoxData
{
public int Id { get; set; }
public string Name { get; set; }
}
}
|
After this we will add a controller class file and add the
bellow code into the controller class file.
using MVC_Demos.Models;
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace
MVC_Demos.Controllers
{
public class CheckBoxListController
: Controller
{
//
// GET: /CheckBoxList/
public ActionResult
Index()
{
CheckBoxListModel
_checkboxlistmodel = new CheckBoxListModel();
_checkboxlistmodel.CheckBoxListData = new List<StudentCheckBoxData>();
//Retrive data from entity table
DemoEntities
_demoentities = new DemoEntities();
var data =
_demoentities.StudentDetails.ToList();
//Bind data to model class
foreach (var item in data)
{
_checkboxlistmodel.CheckBoxListData.Add(new StudentCheckBoxData { Id
= item.Id, Name = item.Name });
}
return
View(_checkboxlistmodel);
}
}
}
|
In above code I have created the instance of the entity object table and assign it to the model class file.
Now we will create the view of the index action result, and
add the below code.
@model MVC_Demos.Models.CheckBoxListModel
@{
ViewBag.Title
= "Bind CheckBox List From DataBase
And Validate One Item Selection Using EntityFrameWork In Asp.Net MVC";
<script>
function
ValidateCheckBox() {
var chkDetail =
document.getElementsByName("checkboxlist");
var isValid = false;
for (var i = 0; i <
chkDetail.length; i++) {
if (chkDetail[i].checked) {
isValid = true;
break;
}
}
if (isValid == true) {
alert("Thank You : You
have selected a CheckBox button.");
return true;
}
else {
alert("Error : Pleae
select attlease one option");
return false;
}
}
</script>
}
<h2>CheckBox List</h2>
<br />
@foreach (var item in Model.CheckBoxListData)
{
<input type="checkbox" id="@item.Id" value="@item.Name" name="checkboxlist" />@item.Name
}
<br /><br />
<input type="button" value="Submit" onclick="javascript: return
ValidateCheckBox();" />
|
In above code I have created a javascript function. This function will validate weather the user have one item or not. Above code also shown hoe you can bind or generate the checkbox list.
Now we have done run the application to check the output.
0 comments:
Please let me know your view