Question

在我的MVC网页应用中，我需要创建一个带有部分视图（包含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 \ temp），但是它没有用红色下划线编译。我必须在部分视图中保持@model动态吗？

Answer 1

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

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

<强>更新

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

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

在我的项目中，我喜欢创建一个ViewModels目录，在其中放置所有视图模型。有些人只是将ModelModels放在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 });
            }
        });
    });
});

Answer 2

将您的控制器更改为：

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,

                });
            });
        });

如何使用局部视图调用jQuery弹出窗口？

2 个答案: