Refreshing content in an .net core mvc partial view

Question

I'm using .net core 2.0 (preview2) to build a MVC web app. What I'm trying to do is to have a part of the web page to refresh on a certain interval, so that new data will be loaded. (For the purpose of this example, it's just the output DateTime.Now)

Here's what I've got so far:

index.cshtml (Main View)

<div id="content">
    @Model.name
    <br />
    @Model.city
    <div id="employee">@Html.Partial("Employee")</div>
</div>

<script>
    $(document).ready(function () {
        var url = "@(Html.Raw(Url.Action("Index", "Employee")))";
        $("#employee").load(url);

        setInterval(function () {
            var url = "@(Html.Raw(Url.Action("ActionName", "Employee")))";
            $("#employee").load(url);
        }, 1000); //Refreshes every  second

        $.ajaxSetup({ cache: false });  //Turn off caching
    });
</script>

HomeController.cs (Controller1)

using System;
using Microsoft.AspNetCore.Mvc;
using DemoApp.Models;

namespace DemoApp.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            CustomersViewModel customers = new CustomersViewModel();
            customers.name = "John";
            customers.city = "New York";

            return View(customers);
        }
     }
}

CustomerViewModel.cs (Model 1)

using System;

namespace DemoApp.Models
{
    public class CustomersViewModel
    {
        public string name { get; set; }
        public string city { get; set; }
    }
}

Employee.cshtml (Partial view)

@model EmployeeViewModel
<div id="employeeContent">
    Hello Employees!
    <br />
    @Model.employeeName
    <br />
    @Model.employeeCity
    <br />
    @Model.time
</div>

EmployeeViewModel.cs (Model 2)

using System;

namespace DemoApp.Models
{
    public class EmployeeViewModel
    {
        public string employeeName { get; set; }
        public string employeeCity { get; set; }
        public string time { get; set; }
    }
}

EmployeeController.cs (Controller2)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using DemoApp.Models;

namespace DemoApp.Controllers
{
    public class EmployeeController : Controller
    {
        public IActionResult Index()
        {
            EmployeeViewModel evm = new EmployeeViewModel();
            evm.employeeName = "Jack";
            evm.employeeCity = "Los Angeles";
            evm.time = DateTime.Now.ToString();
            return View();
        }
    }
}

As you can see, I'm trying to show data from the logic in Index() from the EmployeeController inside the partial view. To check if it works, the current date/time should be showed.

With this state, I get the error:

InvalidOperationException: The model item passed into the ViewDataDictionary is of type 'DemoApp.Models.CustomersViewModel', but this ViewDataDictionary instance requires a model item of type 'DemoApp.Models.EmployeeViewModel'.

I tried a lot of different things I found here, but actually nothing really helped. Sure, I avoided the error message, but then I wasn't able to load any data into the partial view.

Where do I go from here, what am I missing?

EDIT: This is not an exact duplicate at all. The duplicate link refers to something in MVC, but not in .net core MVC, where @Html.Action doesn't exist. But the link did help :-)

can you try to use
@Html.Action("Index","Employee")
instead – hasan Jul 13 '17 at 22:40 — hasan, Jul 13 '17 at 22:40
and return View(evm) in action which returns partial view – hasan Jul 13 '17 at 22:42 — hasan, Jul 13 '17 at 22:42
@Html.Action doesn't exist in .net core – Pandora Jul 14 '17 at 10:53 — Pandora, Jul 14 '17 at 10:53

score 0 · Answer 1 · answered Jul 13 '17 at 19:29

0

You need to change your EmployeeController:

public class EmployeeController : Controller
{
    public PartialViewResultIndex()
    {
        EmployeeViewModel evm = new EmployeeViewModel();
        evm.employeeName = "Jack";
        evm.employeeCity = "Los Angeles";
        evm.time = DateTime.Now.ToString();
        return PartialView("Employee", evm);
    }
}

answered Jul 13 '17 at 19:29

Abdullah

307
2
6
16

Tried it, but getting the same error still, maybe there's something with "
@Html.Partial("Employee")
" not okay? (added a screenshot) – Pandora Jul 13 '17 at 21:21
Yeah, what is happening is you are trying to render partial view inside "index" view. But model passed to index view is of CustomersViewModel. What you can do is remove partial tag as you are loading it later. Make above div like this:
– Abdullah Jul 14 '17 at 12:48

Refreshing content in an .net core mvc partial view

1 Answers1