MVC Error on Displaying Data From Web API

Question

I am new to ASP.NET programming and I encounter some problem, maybe someone can help me to find the solution.

I followed and completed the procedure here BeginForm with IEnumerable. But when I tried to run my codes. Something error happens on browser. The error is:

The model item passed into the dictionary is of type 'System.Collections.Generic.List`1[ek_oms.Models.AddCategoryViewModel]', but this dictionary requires a model item of type 'ek_oms.Models.AddCategoryViewModel'.

Here's my related codes to that part.

Class:

public class AddCategoryViewModel
{
    public IEnumerable<CategoryViewModel> CurrentCategories { get; set; }
    public CategoryModel NewCategory { get; set; }
}

Partial codes in View:

@model ek_oms.Models.AddCategoryViewModel
@if (Model.CurrentCategories != null)
{
    foreach (var item in Model.CurrentCategories)
    {
        <tr>
            <td>@item.CategoryName</td>
            <td>
                @using (Html.BeginForm("CategoryDelete", "Admin", new { catID = item.Id }, FormMethod.Post, null))
                {
                    @Html.AntiForgeryToken()
                    @Html.ActionLink("Edit", "CategoryEdit", null, new { catID = item.Id }, new { @class = "btn btn-primary btn-xs" })
                    <button type="submit" class="btn btn-danger btn-xs" onclick="return confirm('Are you sure you want to delete record with Category = @item.CategoryName')">Delete</button>}
            </td>
        </tr>
    }
}

<div class="tab-content">
    @using (Html.BeginForm("Categories", "Admin", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { role = "form" }))
    {
        @Html.AntiForgeryToken()
        <div class="box box-primary">
            <!-- /.box-header -->
            <div class="box-body">
                <div class="box-header">
                    <h3 class="box-title">Add New Category</h3>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            @Html.EditorFor(model => model.NewCategory.CategoryName, new { htmlAttributes = new { @class = "form-control", id = "Category", @placeholder = @Html.DisplayNameFor(model => model.NewCategory.CategoryName) } })
                            @Html.ValidationMessageFor(model => model.NewCategory.CategoryName, "", new { @class = "text-danger" })
                        </div>
                        <div class="form-group">
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-footer">
                <button type="submit" class="btn btn-primary" id="submitAddCatBtn">Add</button>
            </div>
        </div>
    }
</div>

Controller:

public async Task<ActionResult> Categories()
{
    ViewBag.Message = TempData["Message"];
    ViewBag.CatUsedMessage = TempData["CatUsedMessage"];

    HttpResponseMessage responseMessage = await client.GetAsync(urlProducts + "/categories");
    if (responseMessage.IsSuccessStatusCode)
    {
        var responseData = responseMessage.Content.ReadAsStringAsync().Result;
        var categories = JsonConvert.DeserializeObject<List<AddCategoryViewModel>>(responseData);
        return View(categories);
    }
    return View("Error");
}

Can someone help me to this. I don't know the right term to start searching. Thanks.

User3250 · Accepted Answer · 2017-06-21T07:50:52.097

1

var categories = JsonConvert.DeserializeObject<List<AddCategoryViewModel>>(responseData);

Above line is the issue.

Your view is expecting just one AddCategoryViewModel object and not a List<AddCategoryViewModel>. As the error message clearly suggests.

So, change your code to return only one object if you are expecting just one from the api as below:

var categories = JsonConvert.DeserializeObject<AddCategoryViewModel>(responseData);

OR if you need more than one category Change your @model in view as below:

@model List<ek_oms.Models.AddCategoryViewModel>

In this case you will need to change your view code to handle Category list accordingly as below:

@foreach(var cat in Model)
{
    if (cat != null)//use cat in place of Model in your view
    {
      foreach (var item in cat.CurrentCategories)
      {
      }
    }
}

edited Jun 21 '17 at 07:50

answered Jun 21 '17 at 07:35

User3250

2,961
5
29
61

I update my code and modify my view to your second suggestion `@model List`,how can I change my view code to handle Category list? because the error is in that part now? thanks anyways to your answer :) – LeViNcE Jun 21 '17 at 07:42
The error is now on my beginform? How can I fix that? thanks. – LeViNcE Jun 21 '17 at 08:00
`List' does not contain a definition for 'NewCategory' and no extension method 'NewCategory' accepting a first argument of type 'List' could be found (are you missing a using directive or an assembly reference?)`. Its on part of my html.editorfor – LeViNcE Jun 21 '17 at 08:21
You need to understand what is going on here. You would find answers yourself. Check [here](https://stackoverflow.com/a/1987585/4868839) – User3250 Jun 21 '17 at 08:31
I've tried to comment out first my html.editorfor,,and here's another error. In this part `foreach (var item in cat.CurrentCategories)` i've got the error `System.NullReferenceException: 'Object reference not set to an instance of an object.' ` – LeViNcE Jun 21 '17 at 08:46
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/147230/discussion-between-user3250-and-levince). – User3250 Jun 21 '17 at 08:47
@LeViNcE Was issue with how you are getting the response from API. Pls mark as answer if it worked. Thanks. – User3250 Jun 21 '17 at 10:40

MVC Error on Displaying Data From Web API

1 Answers1