ASP.NET MVC - Return a JSON object to a view and "format as table"

Question

I have a view that has been developed by another developer in which there is already code for a javascript that should handle the JSON Object and format as an HTML Table.

I'm new into MVC, and from the Controller, I create a JSON Object that contains what I need. The issue is that from my Controller, if I just return the JSON Object, then the browser just shows the raw JSON string to the client. It seems that when I return a JSON Object, the browser just shows the JSON, without actually calling my view that has the code to handle the JSON and making it user-friendly.

This is my controller:

        public JsonResult GetPlayerNameByID(int playerID)
        {
            var player = GetPlayerByID(playerID);

            return Json(player, JsonRequestBehavior.AllowGet);
        }

This is called trough the on click event of a Dropdown List. The view for that page is like this:

@model FirstApp.Models.PlayerViewModel

<div id="container" class="container">
    <table class="table player">
        <thead>
            <tr>
                <th class="Name">Name</th>
                <th class="Overall">Overall</th>
            </tr>
        </thead>
        <tbody id="tableBody"></tbody>
    </table>

I believe my issue is that the controller doesn't return to that view, but just a raw JSON Object. Any suggestion on how can I return to that view (this is the view from which the call has been made).

David · Accepted Answer · 2019-09-28 17:32:24Z

4

In order to return a view, you need to return a view. Something like:

return View();

Or, if it needs to include a model:

return View(someModel);

But your controller action is just returning JSON data:

return Json(player, JsonRequestBehavior.AllowGet);

You can't return both. So it sounds like you have two options:

Return a view with the player object as its model. In this case the view would render the data from the model directly and there would be no need for JSON or any involvement with JavaScript. (Well, there could be, depending on what your view is and what you need to do. But it wouldn't be at the controller level.)
Have two controller actions. One which returns the view, another which returns the JSON data. The client-side JavaScript code would make an AJAX request to the second action to fetch the JSON data.

Which one you choose is up to you really. But ultimately you can't return both a view and raw JSON from the same action.

To give an example of the second option, you would have two actions:

public ViewResult Player(int playerID)
{
    return View(playerID);
}

public JsonResult GetPlayerNameByID(int playerID)
{
    var player = GetPlayerByID(playerID);

    return Json(player, JsonRequestBehavior.AllowGet);
}

The first method would return your Player view (assuming you have one of course), with just an integer as the model. So the view would start with a declaration for that model type:

@model int

This means that inside the view code you would be able to access the playerID in the variable Model. So in the view's JavaScript code you might capture that into a variable:

let playerID = @Model;

Which, if for example the playerID value were 123, this would render client-side as:

let playerID = 123;

From there you'd use AJAX to make a request to @Url.Action("GetPlayerNameByID") to get the JSON data. How you do this would depend on what JavaScript frameworks/libraries you're using, if any, and there are many examples available online for how to use AJAX in a variety of frameworks and in ASP.NET.

edited Sep 28, 2019 at 17:32

answered Sep 28, 2019 at 17:25

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Moksud Ahmed Over a year ago

Thanks for the response. I would be more interested in the 2nd options, as it seems that something like that is already kind of implemented in some of the javascript I saw. But how do I return my JSON also ? Can you make an example please ?

David Over a year ago

@MoksudAhmed: I've updated the answer with a little more info on that. Ultimately if your question is becoming "how do I use AJAX" then there are many examples and tutorials available to help you, now that you at least know the technology and general structure of what you're trying to accomplish.

Moksud Ahmed Over a year ago

Thanks for this. Now I got the idea. I think the issue is how I'm calling the Action when the dropdown list changes. Is there any way to set so that the method is called and the JSON result is kind of appended to this page ?

Collectives™ on Stack Overflow

ASP.NET MVC - Return a JSON object to a view and "format as table"

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related