How to use #ListBox in Asp.Net #Mvc and get its text value with #Jquery
A ListBox is a graphical control element that allows the user to select one or more items from a
list contained within a static, multiple line text box. The user clicks inside the box on an item to select it,
sometimes in combination with the ⇧ Shift or Ctrl in order to make
multiple selections. "Control-clicking" an item that has already been
selected, unselects it.
----
*********************************---
-- sql query------------------------
use
test
-- create table course---
create table Course
(
CourseId int identity(1,1) primary key,
CourseName varchar(50) unique,
IsSelected bit
)
insert into Course values('.Net',1)
insert into Course values('Java',0)
insert into Course values('PHP',0)
insert into Course values('C++',0)
insert into Course values('Android',0)
---- *********************************---
select * from
Course
Steps
- Create a MVC 4 application and name it ControlInMVC.
- After naming it just click on the OK button. A new dialog wills then popup for selecting a template. Select Empty template and click the OK button.
- We will add a class with the name CourseViewModel in Model folder
Code for CourseViewModel.cs …………………………………………………
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace ControlinMvc.Models
{
public class CourseViewModel
{
public IEnumerable<SelectListItem> Courses { get; set; }
public IEnumerable<string> SelectedCourses
{ get; set; }
}
}
4. We will add a Ado.Net
Entity DataModel with the name Model1.edmx
in Model folder
5. We will add a Controller with the name ListBoxDemo
Code for ListBoxDemoController.cs …………………………………………………
using
ControlInMvc.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Text;
namespace
ControlInMvc.Controllers
{
public class ListBoxDemoController : Controller
{
//
// GET: /ListBoxDemo/
testEntities database = new testEntities();
[HttpGet]
public ActionResult Index()
{
CourseViewModel course =
CourseBind();
return View(course);
}
//
bind data course from table…………………
private CourseViewModel CourseBind()
{
List<SelectListItem> lc = new List<SelectListItem>();
foreach (Course ci in database.Courses)
{
SelectListItem cou = new SelectListItem
{
Text = ci.CourseName,
Value =
ci.CourseId.ToString(),
Selected = (bool)ci.IsSelected
};
lc.Add(cou);
}
CourseViewModel course = new CourseViewModel();
course.Courses = lc;
return course;
}
[HttpPost]
public ActionResult Index(IEnumerable<string>
SelectedCourses)
{
if (SelectedCourses ==
null)
{
ViewBag.msg= "you did not
selected any course";
}
else
{
StringBuilder sb = new StringBuilder();
sb.Append("you are
seleted "
+ string.Join(",", SelectedCourses));
ViewBag.msg= sb.ToString();
}
CourseViewModel course =
CourseBind();
return View(course);
}
}
}
6. How to add view with Index (highlighted yellow color) is given below
snapshot .
Code for Index.cshtml …………………………………………………
@model ControlInMvc.Models.CourseViewModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.7.1.intellisense.js"></script>
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" >
$(document).ready(function ()
{
$('#btnget').click(function ()
{
var course = [];
$('#SelectedCourses
:selected').each(function (i, v)
{
course[i] = $(v).text();
});
alert(course);
});
});
</script>
</head>
<body>
<div style="font-family:Verdana">
@using (Html.BeginForm())
{
<p>@Html.ListBoxFor(m
=> m.SelectedCourses, Model.Courses, new { size=8})</p>
<p>@ViewBag.msg</p>
@Html.Hidden("hidden1")
<p id="p1"></p>
<input type="submit" id="btnget" value="Submit" />
}
</div>
</body>
</html>
Result
No comments:
Post a Comment