How can I send a JsonResult back to a Razor Page?

Question

How can I send a JsonResult back to a Razor Page?

I am just starting out with ASP.net and Razor Pages. In the code snippet below, my aim is to populate the District dropdown list based on the selected value from the State dropdown list. This is what I have managed to come up with so far:

View:

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script language="javascirpt" type="text/javascript">
    function GetDist(_stateId) {
        var procemessage = "<option value='0'> Please wait...</option>";
        $("#select-state").html(procemessage).show();
        var url = "/Info/GetDistById/";

        $.ajax({
            url: url,
            data: { stateid: _stateId },
            cache: false,
            type: "POST",
            success: function (data) {
                var markup = "<option value='0'>Quận/Huyện</option>";
                for (var x = 0; x < data.length; x++) {
                    markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";
                }
                $("#select-state").html(markup).show();
            },
            error: function (reponse) {
                alert("error : " + reponse);
            }
        });

    }
</script>

<div class="col-md-offset-0 col-md-2">
            <select class="form-control" id="select-state" onchange = "javascript:GetDist(this.value);">
                @foreach (var state in Model.tbState)
                {
                    <option <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="483e29243d2d75083b3c293c2d661b3c293c2d012c">[email protected]</a>>@state.Statename</option>
                }
            </select>
        </div>
        <div class="col-md-1 ">Quận/Huyện: </div>
        <div class="col-md-offset-0 col-md-2">
            <select class="form-control" id="select-dist">
                @foreach (var dist in Model.tbDistrict)
                {
                    <option <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e197808d9484dca185889295cfa588929593888295a885">[email protected]</a>>@dist.Districtname</option>
                }
            </select>
        </div>

In my cshtml.cs file, I have the following code. I have used System.Web.Helpers at the beginning of the code:

public IActionResult GetDistById(int stateid)
        {
            List<TbDistrict> list = new List<TbDistrict>();
            foreach (var q in tbDistrict)
            {
                if (q.StateId == stateid)
                    list.Add(q);
            }
            SelectList selectlist = new SelectList(list, "", "", 0);
            JsonResult result = Json(selectlist);
            return result;
        }

I discovered that the Json() method only functions with the Controller class in MVC, and not with a Razor PageModel class. This leads to error CS0103 "The name 'Json' does not exist in the current context". Is there a workaround to resolve this issue?

javascript asp.net ajax asp.net-core razor

Answer 1

Answer №1

There seem to be several issues at hand.

To receive JSON in return, consider trying the suggestion from @poke which involves using return new JsonResult as shown below:
```
public IActionResult OnGetDistById(int stateid)
{
    return new JsonResult(new Product { Id = stateid, Name = "Tom" });
}
```
In the action method of PageModel, ensure that its name follows the recommendation from @Prakash, using OnGetDistById.
For the client-side, the request URL should be
```
https://localhost:44358/index?handler=distbyid&stateid=2
```
, specifying the handler and query string stateid.

If you prefer a request URL like /Info/GetDistById/, you will need to implement a web API in your razor project instead of using PageModel.

Follow these steps:

Add a ValuesController to your project like so:

[Route("api/[controller]")]
public class ValuesController : Controller
{
        // GET: api/<controller>
        [HttpGet]
        public IEnumerable<string> Get()
        {
        return new string[] { "value1", "value2" };
        }        
}

Configure the route in Startup.cs:

app.UseMvc(routes =>
{
        routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");
});

Answer 2

There seem to be several issues at hand.

To receive JSON in return, consider trying the suggestion from @poke which involves using return new JsonResult as shown below:
```
public IActionResult OnGetDistById(int stateid)
{
    return new JsonResult(new Product { Id = stateid, Name = "Tom" });
}
```
In the action method of PageModel, ensure that its name follows the recommendation from @Prakash, using OnGetDistById.
For the client-side, the request URL should be
```
https://localhost:44358/index?handler=distbyid&stateid=2
```
, specifying the handler and query string stateid.

If you prefer a request URL like /Info/GetDistById/, you will need to implement a web API in your razor project instead of using PageModel.

Follow these steps:

Add a ValuesController to your project like so:

[Route("api/[controller]")]
public class ValuesController : Controller
{
        // GET: api/<controller>
        [HttpGet]
        public IEnumerable<string> Get()
        {
        return new string[] { "value1", "value2" };
        }        
}

Configure the route in Startup.cs:

app.UseMvc(routes =>
{
        routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");
});

Answer 3

Answer №2

When using ASP Pages, the standard methods are OnGet and OnPost. However, if you require additional calls to the same page using Ajax, you must adhere to the OnGet* and OnPost* naming convention.

For instance, in the specific example provided, you would name the method as OnPostDistById and define the URL in Javascript as "/Info/DistById". If it were a HTTP Get call instead, the method name would change to OnGetDistById, but the URL would remain the same.

For further information, refer to the link here.

Answer 4

When using ASP Pages, the standard methods are OnGet and OnPost. However, if you require additional calls to the same page using Ajax, you must adhere to the OnGet* and OnPost* naming convention.

For instance, in the specific example provided, you would name the method as OnPostDistById and define the URL in Javascript as "/Info/DistById". If it were a HTTP Get call instead, the method name would change to OnGetDistById, but the URL would remain the same.

For further information, refer to the link here.

How can I send a JsonResult back to a Razor Page?

Answer №1

Answer №2

Similar questions

Guide to Generating Extern for a Constant Variable in Google Closure Compiler (Variable Cannot be Renamed due to Eval)

When using Inertia.js with Laravel, a blank page is displayed on mobile devices

Attempting to manipulate the selected tab material using a custom directive with two-way data binding

transferring double quotation marks and square brackets through a parameter

jQuery Validate enabling submission even with invalid fields

Display the accurate duration based on the dates selected in an HTML form automatically

Record of Recaptcha actions is not showing up in the reports

Is there a way to cross-reference a city obtained from geolocation with the cities stored in my database, and if a match is found, send the corresponding ID

Dealing with a situation where different functions need to be called based on a condition while using unique button names. This is

The ASP.Net Core razor page handler transforms into a versatile all-encompassing route

Adjust the size of a div element after updating its content using Mootools

Steps for resetting data() on a route without parameters:

Tips for stopping variables from leaking in JavaScript

"Enjoying a table header that scrolls freely with autoscroll feature

Utilize the conditional GET method when including scripts through tags in an HTML webpage

Adding a function into a node within PostgreSQL

Learn how to iterate over a JSON object using TypeScript in Angular5 to generate an array of objects

Permanently dismiss Bootstrap 4 alert using a cookie

Discovering the selected row with jqueryIs there a way to locate

Modifying the Color of Individual Items within the Pagination Component in MUI