如何调用带有部分视图的jQuery弹出窗口？

Question

在我的 MVC Web 应用程序中，我需要创建一个带有部分视图（包含 webgrid）的弹出窗口， 问题是部分视图数据没有显示在对话框上，我只看到标题。看来我的控制器调用也有问题，请注意我使用了动态模型创建，因为模型是在控制器中动态创建的，而不是现有模型，不知道如何使用这种类型的模型。谢谢你的帮助， 这是我的代码： 这是剃刀视图中的按钮： 这个 jQuery 代码：

  $(document).ready(function () {
            $("#GetEmp").click(function (event) {
                $("#popup").dialog({
                    width: 200,
                    hight: 400,
                    title: 'please select an employee',
                    modal: true,
                    open: function (event, ui) {
                        $(this).load("@Url.Action("Travel", "GetEmployee")");
                    }

                });
            });
        });

这是控制器代码：

    public class Employee
    {
        public string EmpName;
        public string EmpPhone;
        public string EmpNum;
    }

    [HttpPost]
    public ActionResult GetEmployee()
    {
        List<Employee> Emp = new List<Employee>
        {
               new Employee {  EmpName= "ScottGu", EmpPhone = "23232323", EmpNum="242342"},
               new Employee { EmpName = "Scott Hanselman", EmpPhone = "3435353", EmpNum="34535"},
               new Employee { EmpName = "Jon Galloway", EmpPhone = "4534535345345",   
                  EmpNum="345353"}

         };

        return PartialView("_EmpPartial", Emp );
    }

这是员工部分视图：请注意，我在模型中使用动态，因为模型是动态创建的。

 @model dynamic
 <ul>
 @foreach (var emp in Model) {
   <li>
     @emp.EmpName
   </li>   
   } 
  </ul>

您好，感谢您的快速响应，我试过了，删除 [HttpPost] 并将@foreach 更改为@foreach（模型中的var emp 作为列表）， 但编译时没有带有红色下划线。我必须在我的局部视图中保持@model 动态吗？

Answer 1

将您的控制器更改为：

public ActionResult GetEmployees()
{
    var employeeList = new EmployeeListViewModel {
        Emp = new List<Employee>
        {
           new Employee {  EmpName= "ScottGu", EmpPhone = "23232323", EmpNum="242342"},
           new Employee { EmpName = "Scott Hanselman", EmpPhone = "3435353", EmpNum="34535"},
           new Employee { EmpName = "Jon Galloway", EmpPhone = "4534535345345",   
              EmpNum="345353"}

        }
    };

    return Json(RenderPartialView("_EmpPartial", employeeList ));
}

protected string RenderPartialView(string partialViewName, object model = null)
        {
            if (ControllerContext == null)
                return string.Empty;

            if (string.IsNullOrEmpty(partialViewName))
                throw new ArgumentNullException("partialViewName");

            ModelState.Clear();//Remove possible model binding error.

            ViewData.Model = model;//Set the model to the partial view

            using (var sw = new StringWriter())
            {
                var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, partialViewName);
                var viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
                viewResult.View.Render(viewContext, sw);
                return sw.GetStringBuilder().ToString();
            }
        }

你的 jquery 会是这样的：

$(document).ready(function () {


      $("#GetEmp").click(function (event) {
        $.post('@Url.Action("Travel", "GetEmployee")', {}, function(resp){
             $('#popup').html(resp);
         });
                $("#popup").dialog({
                    width: 200,
                    hight: 400,
                    title: 'please select an employee',
                    modal: true,

                });
            });
        });

Answer 2

您将 Emp 作为视图模型传递，它不是动态对象，因此您不应在视图中使用 dynamic。我会在视图中使用@model List<Employee>。

另外，为了加载内容，您正在执行$(this).load("@Url.Action("Travel", "GetEmployee")");，它将向您的服务器发送一个 GET 请求，但是您将 [HttpPost] 属性分配给了您的控制器，因此它不会提供一个 get 请求。我会删除[HttpPost]。

更新：

更好的解决方案是像这样创建一个 ViewModel 类：

namespace Travelmvc.ViewModels
{
    public class EmployeeListViewModel
    {
        public List<Employee> Emp { get; set; }
    }
}

在我的项目中，我喜欢创建一个 ViewModels 目录来放置我的所有视图模型。有些人只是将 ViewModels 放在 Models 目录中。根据您放置 ViewModel 的位置，您必须调整上面的命名空间。

您还需要在控制器文件的顶部添加以下行，以便控制器了解您的 ViewModel：

using Travelmvc.ViewModels;

然后你会在你的控制器中这样使用它：

public ActionResult GetEmployee()
{
    var employeeList = new EmployeeListViewModel {
        Emp = new List<Employee>
        {
           new Employee {  EmpName= "ScottGu", EmpPhone = "23232323", EmpNum="242342"},
           new Employee { EmpName = "Scott Hanselman", EmpPhone = "3435353", EmpNum="34535"},
           new Employee { EmpName = "Jon Galloway", EmpPhone = "4534535345345",   
              EmpNum="345353"}

        }
    };

    return PartialView("_EmpPartial", employeeList );
}

您的视图将如下所示：

@using Travelmvc.ViewModels
@model EmployeeListViewModel
<ul>
@foreach (var employee in Model.Emp) {
   <li>
     @employee.EmpName
   </li>   
} 
</ul>

更新 2：

如果您需要使用动态对象将数据传递给视图，您可以使用已经存在的名为 ViewBag 的对象。然后你的控制器看起来像这样：

using Travelmvc.Models;

public ActionResult GetEmployee()
{
    ViewBag.Emp = new List<Employee>
    {
       new Employee {  EmpName= "ScottGu", EmpPhone = "23232323", EmpNum="242342"},
       new Employee { EmpName = "Scott Hanselman", EmpPhone = "3435353", EmpNum="34535"},
       new Employee { EmpName = "Jon Galloway", EmpPhone = "4534535345345",   
              EmpNum="345353"}

    };

    return PartialView("_EmpPartial");
}

using 指令实际上会位于控制器文件的顶部。

你的视图不会是强类型的，它看起来像这样：

@using Travelmvc.Models
<ul>
@foreach (var employee in ViewBag.Emp as List<Employee>) {
   <li>
     @employee.EmpName
   </li>   
} 
</ul>

为了让它工作，你的控制器和你的视图都需要知道 Employee 类，因此using 指令。您可能需要根据放置 Employee 类的位置来调整命名空间。在上面的代码中，我假设你把它放在 Models\Employee.cs 中：

namespace Travelmvc.Models
{
    public class Employee
    {
        public string EmpName { get; set; }
        public string EmpPhone { get; set; }
        public string EmpNum { get; set; }
    }
}

更新 3：

这是我将使用的 JavaScript。我会在打开对话框之前执行加载，并且只有在加载成功时才会打开它。

$(document).ready(function () {
    $("#GetEmp").click(function (event) {
        $("#popup").load('@Url.Action("GetEmployee", "Travel")', function (responseText, textStatus, XMLHttpRequest) {
            if (textStatus == "error") {
                alert("Error");
            } else {
                $(this).dialog({
                    width: 200,
                    hight: 400,
                    title: 'please select an employee',
                    modal: true });
            }
        });
    });
});