AutoComplete
Method and Cascading Dropdown in MVC3
AutoComplete
Method and Cascading Dropdown According the search method in MVC3.
I’m going to
create two tables in Entity frame work. Employee and Department Tables. Here
according the employee name search department will be cascade and displaying
the details in a web grid view.
Tables Data:
1)Employee:
Emp_Id int(pk)
Emp_Name varchar2(50)
Designation varchar2(50)
Emp_Email_Id varchar2(50)
Dept_Id int
2) Department
Dept_Id int(pk)
Dept_Name varchar2(50)
Name
of Connection sting for entity framework.
MVC3JoinsEntities db = new
MVC3JoinsEntities();
In Model
class I’m creating a two class for data searching employees.
Model Class:
public class EmployeeDept
{
public int
Employee_ID { get; set;
}
public string
Employee_Name { get; set;
}
public string
Emp_Designtion { get; set;
}
public string
Employee_Emial_ID { get; set; }
public int
Department_Id { get; set;
}
public string
Dept_Name { get; set;
}
}
public class SearchEmployee
{
public string
SearchType { get; set;
}
[Display(Name = "Search
Text")]
public string
searchText { get; set;
}
public int? Dept_Id {
get; set; }
}
Controller Class ::
Displaying
the results and search the employee name and display results.
public ActionResult
Index(SearchEmployee model)
{
var EmpList = (from
em in db.Employees
join dep in db.Departments on
em.Dept_Id equals dep.Dept_Id into gd
from gd2 in
gd.DefaultIfEmpty()
select new EmployeeDept
{
Employee_ID =em.Emp_Id,
Employee_Name =
em.Emp_Name,
Emp_Designtion =
em.Designation,
Employee_Emial_ID = em.Emp_Email_Id,
Department_Id =
gd2.Dept_Id,
Dept_Name =
gd2.Dept_Name,
});
Session["EmployeeList"] =
EmpList.ToList();
if (model.Dept_Id != null)
{
EmpList = EmpList.Where(m => m.Department_Id == model.Dept_Id
&& m.Employee_Name.Contains(model.searchText));
Session["EmployeeList"] =
EmpList.ToList();
}
TempData["EmployeeListSearchModel"]
= model;
ViewBag.EmpList = new SelectList(EmpSearchList(), "Value", "Text");
EmployeeDept emd = new
EmployeeDept();
var Dept = db.Departments.Select(dd => new { dd.Dept_Id, dd.Dept_Name });
@ViewBag.DeptList = new SelectList(Dept.AsEnumerable(), "Dept_Id", "Dept_Name",0);
return View();
}
public ActionResult
SearchModel(SearchEmployee model)
{
var EmpList = (from
em in db.Employees
join dep in
db.Departments on em.Dept_Id equals dep.Dept_Id into
gd
from gd2 in
gd.DefaultIfEmpty()
select new EmployeeDept
{
Employee_ID = em.Emp_Id,
Employee_Name =
em.Emp_Name,
Emp_Designtion =
em.Designation,
Employee_Emial_ID = em.Emp_Email_Id,
Department_Id =
gd2.Dept_Id,
Dept_Name =
gd2.Dept_Name,
});
Session["EmployeeList"] =
EmpList.ToList();
EmpList = EmpList.Where(m => m.Department_Id == model.Dept_Id
&& m.Employee_Name.Contains(model.searchText));
Session["EmployeeList"] =
EmpList.ToList();
return View();
}
public ActionResult
Search(SearchEmployee model)
{
SearchModel(model);
return RedirectToAction("Index",
model);
}
Employee Search
List :
private List<SelectListItem> EmpSearchList()
{
var options = new List<SelectListItem>();
options.Add(new SelectListItem
{ Value = "Emp_Name", Text = "Empire Name" });
options.Add(new SelectListItem
{ Value = "Dept_Id", Text = "Dept Id" });
return options;
}
Employee
Autosuggestions :
public JsonResult
AutocompleteSuggestions(string term, string Emp)
{
if (Emp != null && Emp != "")
{
int EmpId = Convert.ToInt32(Emp);
var suggestions = from u in
db.Employees
//join dd in db.Departments on u.Dept_Id equals dd.Dept_Id
where u.Emp_Id == EmpId
select u.Emp_Name;
var namelist = suggestions.Where(ml
=> ml.ToUpper().StartsWith(term.ToUpper())).Distinct();
return Json(namelist, JsonRequestBehavior.AllowGet);
}
else
{
var suggestions = from u in
db.Employees
select u.Emp_Name;
var namelist = suggestions.Where(ml
=> ml.ToUpper().StartsWith(term.ToUpper())).Distinct();
return Json(namelist, JsonRequestBehavior.AllowGet);
}
}
Department List cascading
According Autosuggestion of employee list:
public JsonResult
EmployeeDeptDropDownList(string DeptName)
{
var Dept = from m in db.Employees
join g in db.Departments on m.Dept_Id equals
g.Dept_Id
select new
{
Emp = m.Emp_Name,
DeptsName =
g.Dept_Name,
DeptId = g.Dept_Id,
};
var SelectedDept = Dept.Where(m =>
m.Emp.ToUpper().Equals(DeptName.ToUpper()));
return Json(SelectedDept, JsonRequestBehavior.AllowGet);
}
Dropdown List
Binding :
private void DeptList(EmployeeDept upd)
{
var Grade = db.Departments.Select(gz => new { gz.Dept_Id, gz.Dept_Name });
@ViewBag.EmpList = new SelectList(Grade.AsEnumerable(), "Dept_Id", "Dept_Name",
0);
}
View :
Index :
@{
ViewBag.Title = "Index";
}
<script type="text/javascript" src="@Url.Content("~/content/js/custom.js")"></script>
<script type="text/javascript" src="@Url.Content("~/content/js/jquery-ui-1.10.0.custom.js")"></script>
<style>
#main {
padding: 20px 20px 30px 0 !important;
}
.create {
margin: 20px 0 0 0px;
width: 100%;
}
.grid tr td:nth-child(7)
{
text-align: center;
}
.grid { margin:0 auto;}
.grid_footer {
margin-top: 25px;
}
.grid_footer1 {
margin-left: 50px;
margin-top: 20px;
}
.emp_row { width:100px;}
.emp_desig {width:150px;}
.mailid_row {width:120px;}
.dept_id_row {width:60px;}
.dept_name_row {width:80px;}
</style>
<div>
<div>
<h3>
Employee</h3>
@Html.Partial("SearchEmployeeList", TempData["EmployeeListSearchModel"])
</div>
<div id="umpire_tble">
@{
if (Session["EmployeeList"]
!= null)
{
<br
/>
<br />
var listOfProducts = (List<JoinsView.Models.EmployeeDept>)Session["EmployeeList"];
<div style="float: left; text-align: left; background-color: White; width: 80%">
</div>
var grid = new
WebGrid(source: (List<JoinsView.Models.EmployeeDept>)Session["EmployeeList"],
canPage: true, rowsPerPage: 5);
var columns = new
List<WebGridColumn>();
// The
column would be visible to all users
columns.Add(grid.Column("Employee_Name",
"Emp Name", canSort: true, style: "emp_row"));
columns.Add(grid.Column("Emp_Designtion",
"Employee Desig.", canSort: true, style: "emp_desig"));
columns.Add(grid.Column("Employee_Emial_ID",
"Emp Email Id.", canSort: true, style: "mailid_row"));
columns.Add(grid.Column("Department_Id",
"Dept Id", canSort: true, style: "dept_id_row"));
columns.Add(grid.Column("Dept_Name", "Dept
Name", canSort: true, style: "dept_name_row"));
// The column would be not display only to
users
// in the user role
var pager = grid.Pager(mode: WebGridPagerModes.All, numericLinksCount: 7,
firstText: "<< First",
previousText: "< Prev",
nextText: "Next
>",
lastText: "Last >>").ToString();
var newPager =
System.Text.RegularExpressions.Regex.Replace(pager,
"(\\d+) ", "<span class='current'>$1</span>");
var grid1 = grid.GetHtml(tableStyle: "grid", footerStyle: "grid_footer1", mode: WebGridPagerModes.All, numericLinksCount: 7,
firstText: "<< First",
previousText: "< Prev",
nextText: "Next >",
lastText: "Last >>",
columns: grid.Columns(grid.Columns(columns.ToArray()))).ToString();
grid1 = System.Text.RegularExpressions.Regex.Replace(grid1,
"<tfoot>([^<]*|<[^/]*|</[^t]*)*</tfoot>",
"");
@(new HtmlString(grid1))
<div class="grid_footer">
@(new HtmlString(newPager))
</div>
}
else
{
<div class="error_message_signin"
style="margin-left: 8px; margin-bottom: 8px;">
<span
style="color: #FF0000">@TempData["_RecordnotFoundMessage"]</span>
</div>
} }
</div>
</div>
Partial View For According to display
search by employee..
@model JoinsView.Models.SearchEmployee
@{
ViewBag.Title = "SearchEmployeeList.cshtml";
}
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#SearchText").focus(function () {
var Dept = $("#ddl").val();
$("#SearchText").autocomplete({
source: "/Employees/AutocompleteSuggestions/?Emp="
+ Dept,
minLength: 1,
select: function (event, ui) {
if (ui.item) {
$("#SearchText").val(ui.item.value);
//
$("form").submit();
var selectedValue = ui.item.value;
var url = "/Employees/EmployeeDeptDropDownList";
$.ajax({
type: "GET",
url: url,
data: { DeptName:
selectedValue },
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
var items = "";
var selectedDept = "";
$.each(result, function (i, val) {
items += "<option value='" + val.DeptName + "'>" + val.Dept + "</option>";
selectedDept = val.Dept;
});
$("#ddl option").each(function () {
if ($(this).text() ==
selectedDept) {
$(this).attr('selected',
'selected');
}
});
//$("form").submit();
}
});
}
}
});
});
});
</script>
<style>
.ui-autocomplete {
cursor: default;
max-height: 200px;
overflow-y: scroll;
width:150px;
overflow-x:auto;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the
menu to always be this tall
*/
* html .ui-autocomplete {
height: 200px;
}
</style>
@{ Html.EnableClientValidation(); }
@using (Html.BeginForm("Search", "Employees",
FormMethod.Post))
{
<table cellpadding="0"
cellspacing="0"
border="0"
id="umpire_list">
<tr>
<td
style="font-weight: bold;">
Search By </td>
<td
class="search_td1">
<label>Employee Name: </label>
@Html.TextBox("SearchText", null,
new { @class = "mr_bot_0",
id = "SearchText", style = "width: 170px; margin-right:10px;" })
</td>
<td
class="search_td">
<label> Deptartment:
</label>
@Html.DropDownListFor(model =>
model.Dept_Id, (IEnumerable<SelectListItem>)ViewBag.DeptList, "--Select--", new
{ id = "ddl", @onchange = "hideTextBox(this)", style = "width: 100px !important" })
</td>
<td
class="search_td"
valign=middle>
<input
id="search"
name="search"
onclick="return
validate();" type="submit" value="" class="search_icon" style="margin-left: 10px;margin-top:-7px;" />
</td>
</tr>
</table>
}
No comments:
Post a Comment