Unsure how to proceed with placing model data into view MVC

See more:

C#

MVC

Hello,

I'm fairly new to MVC (On and Off user) and I'm struggling to understand how to get the data from the Model into the View.

In my controller I have method which runs the following code:

     var jsonClient = new WebClient();
    jsonClient.Credentials = new NetworkCredential(ApiUsername.apiUsername, ApiPassword.apiPassword);
    jsonClient.Headers.Set("Content-Type", "application/json");
    jsonClient.Headers.Set("Accept", "application/json");
    //Engine Info
    var radWatchList = jsonClient.DownloadString("http://APIURL:XXXX/api/watchlists/Radiology/alerts/active");
    var radAlertsToModel = JsonConvert.DeserializeObject<DashboardModel>(radWatchList).Data;

    return PartialView("~/Views/Radiology/RadPartialViews/RadiologyAlerts.cshtml");
}

Here is my model class

namespace Rhapsody_DashboardV6.Models
{
    public class DashboardModel
    {
        [JsonProperty("data")]
        public Data Data { get; set; }

        [JsonProperty("error")]
        public object Error { get; set; }
    }

    public class Data
    {
        [JsonProperty("alertCount")]
        public long AlertCount { get; set; }

        [JsonProperty("highestSeverity")]
        public string HighestSeverity { get; set; }

        [JsonProperty("alerts")]
        public Alert[] Alerts { get; set; }
    }

    public partial class Alert
    {
        [JsonProperty("id")]
        public long Id { get; set; }

        [JsonProperty("alertName")]
        public string AlertName { get; set; }

        [JsonProperty("alertMnemonic")]
        public string AlertMnemonic { get; set; }

        [JsonProperty("alertDescription")]
        public string AlertDescription { get; set; }

        [JsonProperty("timestamp")]
        public string Timestamp { get; set; }

        [JsonProperty("state")]
        public string State { get; set; }

        [JsonProperty("severity")]
        public string Severity { get; set; }

        [JsonProperty("componentInfo")]
        public ComponentInfo ComponentInfo { get; set; }

        [JsonProperty("parameters")]
        public Parameter[] Parameters { get; set; }
    }

    public partial class ComponentInfo
    {
        [JsonProperty("id")]
        public long Id { get; set; }

        [JsonProperty("name")]
        public string Name { get; set; }

        [JsonProperty("folderPath")]
        public string FolderPath { get; set; }
    }

    public partial class Parameter
    {
        [JsonProperty("id")]
        public long Id { get; set; }

        [JsonProperty("displayName")]
        public string DisplayName { get; set; }

        [JsonProperty("value")]
        public string Value { get; set; }
    }

}

Now if I place a break point on the following piece of code:

var radAlertsToModel = JsonConvert.DeserializeObject<DashboardModel>(radWatchList).Data;

I can see that it has correctly populated the model properties correctly with all the relevant API responses. At this point, I would originally have used a ViewBag which works perfectly, however, from reading up, Viewbag appears to be fairly poorly received by the MVC community and that I should be looking to do this through a ViewModal class.

I want to pass this data to a Partial View as I have an AJAX script running which refreshes the Partial View every 30 seconds so that it updates the view with any new data from the API.

This is the code in the partial view:

@model IEnumerable<Rhapsody_DashboardV6.Models.Alert>
<div class="radAlertsMainPanel">
    <div class="panel panel-default radAlertPanel">
        <div class="panel-body">
            <label>Active Alerts: </label>
            <div>
                @foreach (var item in Model)
                {
                    @Html.DisplayFor(modelItem => item.Id);
                    @Html.DisplayFor(modelItem => item.AlertDescription);
                    @Html.DisplayFor(modelItem => item.AlertMnemonic);
                    @Html.DisplayFor(modelItem => item.AlertName);
                }
            </div>
        </div>
    </div>
</div>

And this is the View the partial view will be "embedded" on:

@{
    ViewBag.Title = "Radiology Dashboard";
}

@model Rhapsody_DashboardV6.Models.Alert



<div id="radDashboard" class="radDashboard">
    <div id="radTitle" class="radTitle">
        <h1>Radiology Dashboard class="fas fa-x-ray"></h1>
    </div>
</div>

<div class="radIntStatDiv">
    <div id="radIntStat" class="radIntTitle">
        <h4>Interface Status</h4>
    </div>
</div>

<div class="grid">
    <span class="grid-item" id="TEST1"></span>
    <span class="grid-item" id="TEST2"></span>
    <span class="grid-item" id="TEST3"></span>
    <span class="grid-item" id="TEST4"></span>
    <div>

    </div>

</div>
<div class="radAlertsDiv">
    <div id="radAlerts">
        <h4>Radiology Alerts</h4>
    </div>
</div>

<div class="radAlerts">
    <div>
        <div id="RadiologyAlerts"></div>
    </div>
</div>


<div>
    <div>
        <div id="RadiologyInterfaceStatistics"></div>
    </div>
</div>
@Scripts.Render("~/Content/JavaScript/Radiology/radiologyPartialViews.js")

Within the console within Google Chrome it simply states a 500 error without much more information for this partial view.

I'm unsure what next steps I need to take in order to get this data into the Partial View.


If someone could point me in the right direction, or give me some tips in what I'm doing wrong It would be appreciated.

Many Thanks!

What I have tried:

I have looked at a number of StackOverflow pages, and also been following the MVC tutorial on Microsoft, but have been unsuccessful.