Executing an AJAX request from an ASP.NET Core querystring parameter

I recently had to figure out how to execute an AJAX request upon loading an ASP.NET Core Razor page which contained a querystring parameter. On one of our Razor pages, we have a Kendo UI Treeview. Clicking on this treeview populates the page with data for the selected item. The click event on the treeview executes a Javascript event, which in turn makes an AJAX request to a service to fetch the data for the selected item. This Javascript event then populates the Razor page with the returned data.

When launching the Razor page interactively from the menu the URL looks like this.

https://localhost/DocumentManager/DocumentManager

When launching the Razor page for a specific item programmatically the URL looks like this.

https://localhost/DocumentManager/DocumentManager?documentid=1234

So basically, the page is populated with data from an AJAX request which is fired from a Javascript event. The problem I had was that we needed to open this page and load up the data for a specific item. Whereas currently the item is selected by the user interactively clicking on an item from the Kendo UI Treeview, I now had to figure out how to load the page data for an item progrmmatically.

So here’s how I did it.

I firstly needed to figure out if the Razor page was being launched interactively (with no querystring parameters) or programmatically (with querystring parameters). I did this using URLSearchParams URLSearchParams — Web APIs | MDN[^]. This is an interface that allows a Javascript client to manipulate and work with querystring parameters. This offers a far simpler and elegant mechanism for working with querystring parameters than horrible string manipulation and / or regex queries.

I was passing a document ID to the Razor page in the form of:

https://localhost/DocumentManager/DocumentManager?documentid=1234

Hide Copy Code

<div>
rest of the Razor page goes here
</div>
<script>
$(document).ready(function () {
var queryparams = window.location.search;
//using URLSearchParams to extract the querystring parameter
if (queryparams && typeof (queryparams) === "string" && queryparams.length > 0) {
var urlParams = new URLSearchParams(window.location.search);
var documentid = urlParams.get('documentid');
//call the JS function that will make the AJAX request and fetch the data
loadDocumentManagerForDocument(documentid ); //see below for definition!
}
});
</script>

In our JS file site.js the function that makes the AJAX request is defined as follows.

Hide Copy Code

function loadDocumentManagerForDocument(documentid) {
if (documentid) {
//AJAX call to Razor page handler to fetch the document details $.ajax({
type: "GET",
url: `/DocumentManager/DocumentManager?handler=document&documentid=${documentid}`,
contentType: "application/json",
dataType: "json",
success: function (response) {
//populate the form elements with the returned data
},
failure: function (response) {
//handle the error
}
});
}
}

Finally, here is the Razor page handler that fetches the data. Remember, this is the same Razor page handler that is used for both loading the data interactively (as the user clicks items from the Kendo UI Treeview) and programmatically.

Hide Copy Code

public async Task<JsonResult> OnGetDocument(int documentid)
{
JsonResult result = null;
var response = await new DocumentManagerPageModelService().GetDocumentById(documentid);
result = new JsonResult(document);
return result;
}

Here is yet another example demonstrating the incredible flexibility and power of ASP.NET Core. This solved what I was thinking may be a really tough problem, but in the end it wasn’t really that difficult. With a bit of thinking the problem through, the solution is quite straight forward. I hope this solution helps someone else.

A father, cyclist, vegetarian, atheist, geek and multiple award winning technical author. Loves real ale, fine wine and good music. All round decent chap.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store