Search Engine in MVC3 or
AutoComplete Method
and Cascading Dropdown in MVC3 Or AutoComplete And Search Data And Display in
View
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:
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