MVC Verwenden Sie Json, um Daten abzurufen und an Tabelle

Question

anzufügen.

Ich versuche, eine Web-API aufzurufen und json zu verwenden, um die Daten an eine Tabelle zu binden. Wenn ich den Debugger in Chrome starte, sagt er mir, dass es einen Fehler 404 gibt. Wenn ich die API über eine URL aufruft, funktioniert es gut. Ich denke, das Problem ist das Skript, das ich in der Ansicht ausführe.

Hier ist mein 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); 

    } 
} 

}

anzeigen

@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-Daten durch den Aufruf der URL zurückgegeben:

[ 
{ 
"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" 
} 
] 

Answer 1

die Url.Action Hilfsmethode Verwenden der korrekten relativen Pfad zu dem aciton Verfahren zu erzeugen. Da der Controller innerhalb des Portal Bereichs ist, sollten Sie explizit als auch in dem Routenwertparameter

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

Dadurch wird die URL wie /yourSiteName/Portal/Workspace/GetData erzeugen und verwenden, die für den getJSON Anruf angeben, dass.

Answer 2

Sie können auch in dieser Form verwenden

$.getJSON('@Url.Action(Action,Controller)', 
      function (json) { 
    ... 
    enter code here 

Answer 3

Es gibt nur wenige Dinge, die Sie brauchen, um zu überprüfen, dass die Dinge sind richtig eingerichtet.

1. Sie haben festgelegt Masterlayout an der Spitze der Ansicht Layout = "~/Areas/Portal/Views/Shared/_LayoutPage.cshtml"; so überprüfen, ob Sie jquery Dateien und andere benötigte js-Dateien enthalten haben schon da. Wenn ja, dann müssten Sie die jQuery-Einschlusszeile in der aktuellen Ansicht entfernen, da das mehrfache Einschließen zu Problemen führt.

2. Sie verwenden alle relativen Pfade, ohne die Url Klassenhelfermethode zu verwenden, die auch Probleme verursachen kann, da Sie möglicherweise einen kleinen Tippfehler in URLs machen und es würde Dinge brechen. Also für die Aufnahme der js und CSS-Dateien und für Ajax-Aufrufe URLs können über die Url Klasse wie konstruiert werden: zu

Für getJson Funktionsaufruf, sollten Sie Url.Action Methode verwenden, die Pflege der Erzeugung nehmen die richtige URL für Sie wie:

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