CODEWITHSUNDEEP
c#jsonasp.net-mvc
wharter1980
wharter1980

Reputation: 41

MVC Use Json to get Data and append to table

I'm trying to call a web API and use json to bind the data to a table. When I run the debugger in Chrome it tells me it is getting a 404 error. When i call the API through a URL it is working fine. I think the problem is the script I am running in the view.

Here is my code

Controller

    public class WorkspaceController : Controller
{
    // GET: Portal/Workspace
    public ActionResult Index()
    {
        return View();
    }

    [HttpGet]
    public JsonResult GetData()
    {
        var contactId = 3311;

        List<WorkItemActiveGridModel> collection = new List<WorkItemActiveGridModel>();

        HttpClient httpClient = new HttpClient { BaseAddress = new Uri(string.Format("{0}://{1}", Request.Url.Scheme, WebConfigurationManager.AppSettings[ConfigurationKeys.DataServicesUri])) };
        httpClient.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
        HttpResponseMessage httpResponseMessage = httpClient.GetAsync("Api/WorkItem/Active/" + contactId).Result;
        if (httpResponseMessage.IsSuccessStatusCode)
        {
            collection = JsonConvert.DeserializeObject<List<WorkItemActiveGridModel>>(httpResponseMessage.Content.ReadAsStringAsync().GetAwaiter().GetResult());
        }

        return Json(collection, JsonRequestBehavior.AllowGet);

    }
}

}

View

@model dynamic
@{
ViewBag.Title = "Customer Portal";
Layout = "~/Areas/Portal/Views/Shared/_LayoutPage.cshtml";
}


<div class="callout callout-danger">
    <h4>Open Items</h4>
    <table class="table table-bordered table-responsive table-hover table-striped">
        <tr>
            <th>WorkItemID </th>
            <th>Title </th>
            <th>State </th>
            <th>PercentComplete </th>
            <th>OwnerName </th>
            <th>ContactName </th>
            <th>ReleaseDtm </th>
        </tr>
    </table>
</div>
</section>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>  
<script>
$(document).ready(function () {
    $.getJSON("Workspace/GetData",
            function (json) {
                var tr;
                for (var i = 0; i < json.length; i++) {
                    tr = $('<tr/>');
                    tr.append("<td>" + json[i].workItemId + "</td>");
                    tr.append("<td>" + json[i].title + "</td>");
                    tr.append("<td>" + json[i].state + "</td>");
                    tr.append("<td>" + json[i].percentComplete + "</td>");
                    tr.append("<td>" + json[i].owner + "</td>");
                    tr.append("<td>" + json[i].contact + "</td>");
                    tr.append("<td>" + json[i].releaseDate + "</td>");
                    $('table').append(tr);
                }
            });  
});

API data returned through calling the URL:

[
 {
"typeIcon": "fa-weixin",
"priorityIcon": null,
"attachmentIcon": "False",
"workItemId": 1,
"type": "(1) Critical",
"title": "[RELEASE READY]Test 1",
"state": "New",
"priority": "(3) Medium",
"score": 1,
"percentComplete": 0,
"contact": "User 1",
"account": "Department",
"owner": "Tech 1",
"created": "2017-08-25T22:41:47.623",
"dueDate": "2017-08-25T22:41:47.623",
"releaseDate": "2017-08-25T22:41:47.623"
},
{
"typeIcon": "fa-weixin",
"priorityIcon": "fa-exclamation-circle",
"attachmentIcon": "False",
"workItemId": 6,
"type": "(3) Medium",
"title": "[RELEASE READY]Test 3",
"state": "Approved",
"priority": "(1) Critical",
"score": 3,
"percentComplete": 20,
"contact": "User 1",
"account": "Department",
"owner": "Tech 1 ",
"created": "2017-08-25T22:41:50.827",
"dueDate": "2017-08-25T22:41:50.827",
"releaseDate": "2017-08-25T22:41:47.623"
}
]

Upvotes: 0

Views: 2263

Answers (3)

Nilesh Vishwakarma
Nilesh Vishwakarma

Reputation: 129

You also can use in this form

  $.getJSON('@Url.Action(Action,Controller)',
            function (json) {
    ...
    //TODO : write your code here

Upvotes: 1

Shyju
Shyju

Reputation: 218892

Use the Url.Action helper method to generate the correct relative path to the aciton method. Since your controller is inside the Portal area, you should explicitly specify that as well in the route value parameter 

 var url ="@Url.Action("GetData","Workspace",new { area= "Portal"})";
 $.getJSON(url,function(json){
     console.log(json);
     alert("Received response from ajax call");
     //to do : continue processing the response json array
 });

This will generate the url like /yourSiteName/Portal/Workspace/GetData and use that for the getJSON call.

Upvotes: 0

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62498

There are few things that you need to check to make sure the things are setup correctly.

  1. You have defined master layout at top of view Layout = "~/Areas/Portal/Views/Shared/_LayoutPage.cshtml"; so check if you have jquery files and other needed js files included there already. If yes, then you would need to remove the jquery inclusion line in the current view, as including it multiple times will get you in to problems.

  2. You are using all the relative paths without using the Url class helper method which can also create problems as you might do a small typo in urls and it would break things. So for including the js and css files and for ajax calls the urls can be constructed via the Url class like:

For getJson function call too, you should be using Url.Action method which will take care of generating the correct url for you like:

 $.getJSON('@Url.Action("GetData","Workspace")',

Upvotes: 0

Related Questions