I intend to display a list of employees with about five columns on the left side of my razor view, and on selecting any employee (row), display details of the employee as a readonly partial view on the right - as in the image below. My wish is to reuse the details form later in another view to add/update records.
My controller is shown below:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Mymvc.Controllers
{
public class EmpController : Controller
{
private readonly MyEntities _db = new MyEntities();
private IEnumerable<vEmployee> _Employees;
// GET: Employee
public ActionResult Index()
{
ViewData["ModuleName"] = "Active Employees";
ViewData["deptIDList"] = _db.lu_Department.OrderBy(e => e.Dept);
ViewData["jobTitleIDList"] = _db.lu_JobTitle.OrderBy(e => e.JobTitle);
ViewData["genderList"] = _db.lu_Gender.OrderBy(e => e.Gender);
ViewData["ethnicityList"] = _db.lu_Ethnicity.OrderBy(e => e.Ethnicity);
ViewData["nationalityList"] = _db.lu_Nationality.OrderBy(e => e.Nationality);
ViewData["staffLocationList"] = _db.lu_StaffLocation.OrderBy(e => e.StaffLocation);
ViewData["notchList"] = _db.lu_EmploymentGradeNotch.OrderBy(e => e.Notch);
ViewData["salutationList"] = _db.lu_Salutation.OrderBy(e => e.Title);
return View();
}
public ActionResult EmployeeDetails(int employeeID = 0)
{
vEmployee SelectedEmployee = null;
ViewData["deptIDList"] = _db.lu_Department.OrderBy(e => e.Dept);
ViewData["jobTitleIDList"] = _db.lu_JobTitle.OrderBy(e => e.JobTitle);
ViewData["genderList"] = _db.lu_Gender.OrderBy(e => e.Gender);
ViewData["ethnicityList"] = _db.lu_Ethnicity.OrderBy(e => e.Ethnicity);
ViewData["nationalityList"] = _db.lu_Nationality.OrderBy(e => e.Nationality);
ViewData["staffLocationList"] = _db.lu_StaffLocation.OrderBy(e => e.StaffLocation);
ViewData["notchList"] = _db.lu_EmploymentGradeNotch.OrderBy(e => e.Notch);
ViewData["salutationList"] = _db.lu_Salutation.OrderBy(e => e.Title);
try
{
if (employeeID == 0)
employeeID = _db.Employees.OrderBy(m => m.EmployeeNumber).First().EmployeeID;
if (_Employees == null)
_Employees = GetEmployees();
SelectedEmployee = _Employees.First(e => e.EmployeeID == employeeID);
}
catch (Exception e)
{
var msg = e.Message;
}
return View(SelectedEmployee);
}
private IEnumerable<vEmployee> GetEmployees()
{
IEnumerable<vEmployee> emp = (from e in _db.Employees
join c in _db.Contacts on e.EmployeeID equals c.EmployeeID
join g in _db.lu_EmploymentGradeNotch on e.NotchID equals g.NotchID
join u in _db.lu_Salutation on c.SalutationID equals u.TitleID into sal
from u in sal.DefaultIfEmpty()
join s in _db.lu_SUBDepartment on e.SubDeptID equals s.SubDeptID into sde
from s in sde.DefaultIfEmpty()
join l in _db.lu_StaffLocation on e.StaffLocationID equals l.StaffLocationID into cl
from cm in cl.DefaultIfEmpty()
join t in _db.lu_Ethnicity on c.EthnicityID equals t.EthnicityID into eth
from et in eth.DefaultIfEmpty()
join n in _db.lu_Nationality on c.NationalityID equals n.NationalityID into nt
from nt1 in nt.DefaultIfEmpty()
where c.ContactTypeID == 1 && e.EmploymentStatusID == 1
select new vEmployee
{
EmployeeID = e.EmployeeID,
EmployeeNumber = e.EmployeeNumber,
DeptID = e.DeptID,
SubDeptID = e.SubDeptID,
JobTitleID = e.JobTitleID,
ReportsToID = e.ReportsToID,
NotchID = g.NotchID,
HireDate = e.HireDate,
StaffLocationID = e.StaffLocationID,
FirstName = c.FirstName,
LastName = c.LastName,
MiddleName = c.MiddleName,
FullName = c.FirstName + (c.MiddleName == null ? "" : " " + c.MiddleName) + " " + c.LastName + " (" + u.Title + ")",
SalutationID = c.SalutationID,
GenderID = c.GenderID,
EthnicityID = c.EthnicityID,
NationalityID = c.NationalityID,
Photograph = e.Photograph
})
.AsEnumerable()
.OrderBy(m => m.EmployeeNumber)
.ThenBy(m => m.FirstName);
return emp;
}
public ActionResult ActiveEmployees_Read([DataSourceRequest] DataSourceRequest request)
{
_Employees = GetEmployees();
return Json(_Employees.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);
}
}
}
My Main Index view:
@using Mymvc.Models
@model Mymvc.Models.vEmployee
@using System.Collections
<div class="col col-xs-6">
@(Html.Kendo().Grid<vEmployee>()
.Name("EmployeesList")
.Columns(columns =>
{
columns.Bound(p => p.EmployeeNumber).Width(35);
columns.Bound(p => p.FirstName).Width(60);
columns.Bound(p => p.LastName).Width(60);
columns.ForeignKey(p => p.JobTitleID, (IEnumerable)ViewData["jobTitleIDList"], "JobTitleID", "JobTitle")
.Width(60);
columns.ForeignKey(p => p.DeptID, (IEnumerable)ViewData["deptIDList"], "DeptID", "Dept")
.Width(60);
})
.Events(e => e.Change("Grid_OnRowSelect"))
.Events(e => e.DataBound("Grid_OnDataBound"))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(15)
.ServerOperation(false)
.Events(events => events.Error("grid_error")) // Handle the "error" event
.Model(model =>
{
model.Id(m => m.EmployeeID);
model.Field(m => m.EmployeeID).Editable(false);
})
.Read(read => read.Action("ActiveEmployees_Read", "Employee"))
)
.Filterable()
.Pageable()
.Sortable()
.Selectable()
)
</div>
@Html.Partial("_EmployeeDetails");
<script type="text/javascript">
Grid_OnDataBound = function (e) {
var grid = $("#EmployeesList").data("kendoGrid");
grid.select(e.sender.tbody.find("tr:first"));
}
Grid_OnRowSelect = function (e) {
var data = this.dataItem(this.select());
var empID = data.id;//IMP
$.ajax({
url: '/Employee/EmployeeDetails',
type: "GET",
//dataType: "JSON",
data: { 'employeeID': empID }
});
}
</script>
Upon selecting any employee on my list my OnDataBound and OnRowSelect events send the selected EmployeeID to my EmployeeDetails controller method.
My PartialView:
@model Mymvc.Models.vEmployee
@using System.Collections
<div class="col col-xs-6">
@using (Html.BeginForm("EmployeeDetails", "Employee"))
{
<div class="container">
<div class="col-md-8 well">
<div class="form-horizontal">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div id="updateMsg" class="demo-section k-content"></div>
<div class="form-group">
@Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-5">
@Html.TextBoxFor(model => model.LastName, new { style = "width: 400px" })
@Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-5">
@Html.TextBoxFor(model => model.FirstName, new { style = "width: 400px" })
@Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.MiddleName, htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-5">
@Html.TextBoxFor(model => model.MiddleName, new { style = "width: 400px" })
@Html.ValidationMessageFor(model => model.MiddleName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.SalutationID, htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-2">
@Html.DropDownListFor(model => model.SalutationID, new SelectList((IEnumerable)ViewData["salutationList"], "TitleID", "Title"))
@Html.ValidationMessageFor(model => model.SalutationID, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.GenderID, htmlAttributes: new { @class = "control-label col-md-2 col-md-offset-2" })
<div class="col-md-1">
@Html.DropDownListFor(model => model.GenderID, new SelectList((IEnumerable)ViewData["genderList"], "GenderID", "Gender"))
@Html.ValidationMessageFor(model => model.GenderID, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.NationalityID, htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-1">
@Html.DropDownListFor(model => model.NationalityID, new SelectList((IEnumerable)ViewData["nationalityList"], "NationalityID", "Nationality"))
@Html.ValidationMessageFor(model => model.NationalityID, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.EthnicityID, htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-1">
@Html.DropDownListFor(model => model.EthnicityID, new SelectList((IEnumerable)ViewData["ethnicityList"], "EthnicityID", "Ethnicity"))
@Html.ValidationMessageFor(model => model.EthnicityID, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Photograph, htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-5">
@Html.TextBoxFor(model => model.Photograph, new { style = "width: 180px" })
@Html.ValidationMessageFor(model => model.Photograph, "", new { @class = "text-danger" })
</div>
</div>
</div>
<style>
.demo-section {
text-align: center;
line-height: 4em;
}
</style>
</div>
</div>
}
</div>
My Challenge:
I cannot populate my details partialview with model information on selecting an employee on the left list. When I view the SelectedEmployee object in the EmployeeDetails method in debug, the details (lastname, firstname, etc.) can be seen confirming my ajax method is working well.
What am I doing wrong here? Also, is there a better method of presenting list and detail in the same view in mvc?
Thanks!
@Html.Partial("_EmployeeDetails")
only call _EmployeeDetails view. This code cannot call Controller
_EmployeeDetails
method.
So, as you need , Access the view through the controller
Change @Html.Partial("_EmployeeDetails")
to @Html.Action("_EmployeeDetails");
_EmployeeDetails action can be take selected Id parameter.
@Html.Action("_EmployeeDetails", new { id = yourSelectedRowIdValue })
You can find the selected id and return from the _EmployeeDetails method spesific detail data.
public ActionResult _EmployeeDetails (int id)
{
// var employeeDetail = find _EmployeeDetail using by id
return View (employeeDetail );
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.