jQuery: Controller function not being executed correctly with ajax

Question

I am programming a web application in C# MVC which dynamically loads information from a server in order to improve the speed.

Currently I have some errors and I am unable to diagnose why these are causing issues so I'll try my best to explain what's happening:

This div is created many times and grabs the ID for each project.

<div>
     <a href='@item.LinkToJiraByStatus("Open")' target="_blank">Open</a>:
     @{string JiraKey = item.JiraProjectKey;}
     <span id="JiraOpen" onload="GetOpenJira"></span>
</div>

Then in the span, the script GetOpenJira is initiated:

 <script id="GetOpenJira">
    var url = "/HicVault/Projects/GetNumJiraOpenByKey";
    var key = $('#JiraKey').val();
    $.get(url, { input: key }, function (data) { $("#JiraOpen").html(data) });
</script>

This script SHOULD asynconously ask the controller to complete the function GetNumJiraOpenByKey with the JiraKey being used as a parameter. The function in the controller is:

[HttpGet]
    public ActionResult GetNumJiraOpenByKey(string JiraProjectKey)
    {
        var sJql = "project = \"" + JiraProjectKey + "\" and status = \"Open\""; 
        var resultFieldNames = new List<string> { "resolution" };
        Issues issues = new JiraClient(new JiraAccount()).GetIssuesByJql(sJql, 0, 1000, resultFieldNames);
        return PartialView(issues.total);
    }

Essentially this function returns an int once it has counted all of the issues for that particular project. I would like this to be done with AJAX using jQuery to load these values after the page has been loaded to vastly increase speed. (Currently without AJAX, pages take >30 sec to load).

Thanks if anyone can help.

EDIT: I suppose I should ask a question, currently with this code the page loads and after around 5 seconds, a server 500 error appears in the console stating there is an Internal Server Error. I know this is a general error, going in deeper points to the line:

"$.get(url, { input: key }, function (data) { $("#JiraOpen").html(data) ". 

I am guessing either the logic of my work isn't possible in Razor MVC + JS, or I am getting the fundamentals of jQuery ajax get wrong?

Answer 1

rewrite your script as following...

 <script id="GetOpenJira">
    var url = "/HicVault/Projects/GetNumJiraOpenByKey";
    var key = $('#JiraKey').val();
    $.get(url, { JiraProjectKey: key }, function (data) { $("#JiraOpen").html(data) });
 </script>