Question

我打算在剃刀视图的左侧显示一个约五列的员工列表，在选择任何员工（行）时，将员工的详细信息显示为右侧的只读部分视图 - 如图片如下。我希望稍后在另一个视图中重用详细信息表单来添加/更新记录。

我的控制器如下所示：

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);
        }    

    }
}

我的主要索引视图：

@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>

在我的列表中选择任何员工后，我的OnDataBound和OnRowSelect事件会将所选的EmployeeID发送到我的EmployeeDetails控制器方法。

我的偏见：

@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>

我的挑战：

我无法使用左侧列表中选择员工的模型信息填充我的详细信息部分视图。当我在debug中查看EmployeeDetails方法中的SelectedEmployee对象时，可以看到详细信息（姓氏，名字等），确认我的ajax方法运行良好。

我在这里做错了什么？另外，有没有更好的方法在mvc中的同一视图中显示列表和细节？

谢谢！

Answer 1

@Html.Partial("_EmployeeDetails")只调用_EmployeeDetails视图。此代码无法调用Controller _EmployeeDetails方法。

因此，根据需要，通过控制器访问视图

将@Html.Partial("_EmployeeDetails")更改为@Html.Action("_EmployeeDetails");

_EmployeeDetails操作可以选择Id参数。

@Html.Action("_EmployeeDetails", new { id = yourSelectedRowIdValue })

您可以找到所选的id并从_EmployeeDetails方法返回特定详细数据。

  public ActionResult _EmployeeDetails (int id)
        {
            // var employeeDetail = find _EmployeeDetail using by id                   
            return View (employeeDetail );
        }

MVC PartialView未填充模型详细信息

1 个答案: