In
this example we explain that how to bind multiple Select DropDownList with
CheckBoxes from database using jQuery in Asp.Net MVC Razor.or how to
Populate(Bind) Multiple Select DropDownList with CheckBoxes in MVC Razor.here
we use Bootstrap and jQuery to implement the Multi Select DropDownList With
CheckBoxes in MVC Razor.
Here
we demonstrate how to implement the multi select DropDownList or DropDownList
with CheckBoxes in MVC Razor.
using System.Configuration;
using System.Data.SqlClient;
using System.Collections.Generic;
public class GameModel
{
public List<SelectListItem> Games
{ get; set; }
public int[] GameIds { get; set; }
}
Controller:
public class EmployeeController : Controller
{
// GET: Employee
public ActionResult Index()
{
GameModel game = new GameModel();
game.Games = PopulateGames();
return View(game);
}
[HttpPost]
public ActionResult Index(GameModel game)
{
game.Games = PopulateGames();
if (game.GameIds != null)
{
List<SelectListItem>
selectedItems = game.Games.Where(p => game.GameIds.Contains(int.Parse(p.Value))).ToList();
ViewBag.Message = "Selected Games:";
foreach (var selectedItem in selectedItems)
{
selectedItem.Selected = true;
ViewBag.Message += "\\n" + selectedItem.Text;
}
}
return View(game);
}
private static List<SelectListItem>
PopulateGames()
{
List<SelectListItem> items
= new List<SelectListItem>();
string constr = ConfigurationManager.ConnectionStrings["Constring"].ConnectionString;
using (SqlConnection con
= new SqlConnection(constr))
{
string query = " SELECT GameName, GameId FROM Games";
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["GameName"].ToString(),
Value = sdr["GameId"].ToString()
});
}
}
con.Close();
}
}
return items;
}
}
View:
@model CheckBox_DropDownList_MVC.Models.GameModel
@{
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", "Employee", FormMethod.Post))
{
@Html.Label("Games:")
<br/>
<br/>
@Html.ListBoxFor(m =>
m.GameIds, Model.Games, 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