In this example we explain that how to bind
Multiple Select Dropdown List with Checkboxes in MVC Razor View. Or how to bind
multi select Dropdown List with checkbox from database using MVC.or how to bind
or populate Multiple Select List box with checkboxes from database in MVC
Razor.
public class HobbiyModel
{
public List<SelectListItem>
Hobby { get; set;
}
public int[] HobbyIds { get;
set; }
}
Controller:
public class FruitController
: Controller
{
public ActionResult Index()
{
HobbiyModel
Hobbiy = new HobbiyModel();
Hobbiy.Hobby = PopulateHobbiy();
return
View(Hobbiy);
}
[HttpPost]
public ActionResult Index(HobbiyModel
Hobbiy)
{
Hobbiy.Hobby = PopulateHobbiy();
if
(Hobbiy.HobbyIds != null)
{
List<SelectListItem> selectedItems =
Hobbiy.Hobby.Where(p => Hobbiy.HobbyIds.Contains(int.Parse(p.Value))).ToList();
ViewBag.Message = "Selected Hobbiys:";
foreach
(var selectedItem in
selectedItems)
{
selectedItem.Selected = true;
ViewBag.Message += "\\n" + selectedItem.Text;
}
}
return
View(Hobbiy);
}
private
static List<SelectListItem> PopulateHobbiy()
{
List<SelectListItem> items = new List<SelectListItem>();
string
constr = ConfigurationManager.ConnectionStrings["Constring"].ConnectionString;
using
(SqlConnection con = new SqlConnection(constr))
{
string
query = " SELECT HobbyName, HobbyId FROM
Hobbiy";
using
(SqlCommand cmd = new
SqlCommand(query))
{
cmd.Connection = con;
con.Open();
using
(SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
items.Add(new SelectListItem
{
Text = sdr["HobbyName"].ToString(),
Value = sdr["HobbyId"].ToString()
});
}
}
con.Close();
}
}
return
items;
}
}
View:
@model
CheckBox_DropDownList_MVC.Models.HobbiyModel
@{
Layout = null;
}
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
<style type="text/css">
body
{
font-family:
Arial;
font-size:
10pt;
}
</style>
</head>
<body>
@using (Html.BeginForm("Index",
"Fruit", FormMethod.Post))
{
@Html.Label("Hobbys:")
<br/>
<br/>
@Html.ListBoxFor(m => m.HobbyIds,
Model.Hobby, new { @class = "listbox" })
<br/>
<br/>
<input type="submit" value="Submit"/>
}
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
rel="stylesheet"
type="text/css"/>
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function
() {
$('.listbox').multiselect({
includeSelectAllOption: true
});
});
</script>
@if (ViewBag.Message != null)
{
<script type="text/javascript">
window.onload = function () {
alert("@ViewBag.Message");
};
</script>
}
</body>
</html>
0 comments:
Post a Comment