使用局部视图、javascript 和 viewbag foreach 时出错答案

【问题标题】：Error using partial view, javascript and viewbag foreach使用局部视图、javascript 和 viewbag foreach 时出错
【发布时间】：2014-11-27 14:17:24
【问题描述】：

我正在尝试使用 JavaScript 加载局部视图，而局部视图将有一个“视图包”以循环访问。一切都运行良好，直到我尝试渲染部分视图我得到一个“object Object”错误，如果我删除视图包循环部分视图加载

控制器

[HttpPost]
        public ActionResult ServiceDetails(int id )
        {
            int count = 0;

           var m = from c in db.ServiceCategoryFields
                    where c.serviceTypeID == id
                    select c;
            ViewBag.count  = count;
            ViewBag.m = m.ToList();
            return PartialView(m.ToList());
        }

局部视图

<table style ="width:100% ">
     <tr>
     @foreach (var image in (List<String>)ViewBag.m)
    {
        <td>
           @image
        </td>
     }  

  </tr>

JS 文件

type: "POST",
            success: function (data) {

                display.html('');
                display.html(data);
            },
            error: function (reponse) {
                alert("JS Error : " + reponse.toString());
            }

【问题讨论】：

你的局部视图有模型吗？
显示器包含什么？它应该是包含部分视图的 div。像这样： var display = $("MySelector"). ajax 调用之前的设置。
在使用display.html(data); 渲染它之前你会得到什么响应？
可能是因为有转换错误？ LINQ 查询是返回字符串列表还是复杂对象列表？我还建议使用 OR 模型或 viewbag，而不是两者。
ServiceCategoryField 类是什么样的？

标签： javascript jquery asp.net-mvc asp.net-mvc-4 viewbag

【解决方案1】：

快速解决方案

基于您下面的控制器代码

[HttpPost]
public ActionResult ServiceDetails(int id )
{
    int count = 0;

    var m = from c in db.ServiceCategoryFields
            where c.serviceTypeID == id
            select c;
    ViewBag.count  = count;
    ViewBag.m = m.ToList();
    return PartialView(m.ToList());
}

ViewBag.m 将是 List<ServiceCategoryField> 的一个实例，但您在局部视图中将其转换为 List<string>

@foreach (var image in (List<String>)ViewBag.m)

所以你得到了错误。假设PropertyName 是ServiceCategoryField 的属性，其值要显示在<td> 标签内，则需要在部分视图中将ViewBag.m 转换为List<ServiceCategoryField>，如下所示

<table style ="width:100% ">
    <tr>
    @foreach (var image in (List<ServiceCategoryField>)ViewBag.m)
    {
        <td>
           @image.PropertyName
        </td>
    }  

  </tr>

替代解决方案

之前的解决方案需要转换 ViewBag.m，如果您将 ViewBag.m 转换为错误的类型，它可能会产生运行时错误。您可以通过使用此替代解决方案来避免局部视图中的转换。

首先要做的是创建一个模型类，它将被局部视图使用，假设类名为ServiceDetailsViewModel，它具有Count 和Images 属性

public class ServiceDetailsViewModel
{
    public int Count { get; set; }
    public List<string> Images { get; set; }
}

创建ServiceDetailsViewModel 的实例，分配属性，并将model 传递给控制器中的局部视图。我假设PropertyName 是一个字符串，而c.PropertyName 是部分视图中image 的来源

[HttpPost]
public ActionResult ServiceDetails(int id )
{
    int count = 0;

    var m = from c in db.ServiceCategoryFields
            where c.serviceTypeID == id
            select c.PropertyName;

    ServiceDetailsViewModel model = new ServiceDetailsViewModel();
    model.Count  = count;
    model.Images = m.ToList();

    return PartialView(model);
}

使用部分视图代码顶部的以下语法将ServiceDetailsViewModel 设置为模型

@model ServiceDetailsViewModel

并循环遍历Model.Images，如下所示

<table style ="width:100% ">
    <tr>
    @foreach (var image in Model.Images)
    {
        <td>
           @image
        </td>
    }  
    </tr>

【讨论】：