Error using partial view, javascript and viewbag foreach

Question

I'm trying to load a partial view using JavaScript, in turn the partial view will have a View Bag", to loop through. All is working well, until I try to render the partial view I get an "object Object" error, if I remove the View bag loop the partial view loads

Controller

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

Partial View

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

  </tr>

JS File

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

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

Answer 1

Quick Solution

Based on your controller code below

[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 would be an instance of List<ServiceCategoryField>, but you convert it to List<string> in the partial view

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

so you got the error. Assuming that PropertyName is the property of ServiceCategoryField with the value that you want to display inside <td> tags, you need to convert ViewBag.m to List<ServiceCategoryField> in the partial view as below

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

  </tr>

Alternative Solution

The previous solution requires converting ViewBag.m and it could produce runtime errors if you convert ViewBag.m to the wrong type. You can avoid the conversion in the partial view by using this alternative solution.

The first thing to do is creating a model class that will be used by the partial view, let's say the class name is ServiceDetailsViewModel and it has Count and Images property

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

Create an instance of ServiceDetailsViewModel, assign the properties, and pass model to the partial view in the controller. I assume PropertyName is a string and c.PropertyName is where the image in the partial view comes from

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

Set ServiceDetailsViewModel as the model by using the below syntax at the top of your partial view code

@model ServiceDetailsViewModel

and loop through Model.Images as below

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