MVC PartialView未填充模型詳細信息

Question

我打算顯示在我的剃鬚刀視圖左側顯示約5列的員工列表，並選擇任何員工（行），將員工的詳細信息顯示爲只讀部分在右側查看 - 如下圖所示。我希望在稍後的另一個視圖中重新使用細節表單來添加/更新記錄。

我控制器如下圖所示：

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事件所選擇的僱員發送到我的EmployeeDetails控制器方法。

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

我的挑戰：

我不能填充我的細節與模型信息partialview在左邊的列表中選擇僱員。當我在調試中的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方法spesific詳細數據返回。

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