Fixing AJAX JSON MVC Method not being called in ASP.NET

Developers work on major issues and get them resolve for availing proper functioning application. In this post, asp.net web development team will explain the way to resolve issue related to not calling controller method. The experts will use AJAX JSON call from view page.

To make an AJAX call to a controller asp.net core mvc Ajax call controller, first, we need to set up the necessary route and action methods in the controller.

What is ajax call controller method?

The AJAX call to controller process could be applied for numerous determinations, which of them are recovering data through the folder, modernising the base of data, or executing additional server-side functions. It allows programmers to make all-in-one UX by looking out for as well as showing data in actual time with no unsettling the user's communication within the website app. Furthermore, AJAX calls are asynchronous, which means they would be created in the contextual having no blocks of other processes at the website pages, ensuing in quicker and quite well-organized applications overall it can even function in the important logics and querying.

Today, I will explain how to resolve problem related to not calling controller method using AJAX JSON call from view page.

I see that many of users facing the issue that he or she cannot get client call of controller method when using AJAX in view page.

Two most common issues as below.

• Controller method not being called by AJAX call.
• Getting null parameter values on controller method.

So, now we will get detail information about these problems and then I will give the solutions to resolve issues.

Controller method not being called by AJAX call.

This issue will rise when you want to pass model call values to controller method, or there is a difference between AJAX call type and controller method type that is PSOT and GET.So, for that you have to be sure that the type of AJAX call and Controller method are same. Ajax not calling controller method also ensures they align with the controller techniques expectations and that can be done with the routing configuration.

Utilizing an Asynchronous JavaScript and XML (AJAX) request to invoke a controller method with a Ajax call controller method with parameters is a robust and effective approach for gathering or sending data inside applications. It is crucial to possess an in-depth understanding of the method in question and the specific parameters it necessitates.

Some times it will not work when you initialize a button with “button” type and not with “submit” type. When you set type of button to “Submit” on page, then you have to set calling method on “using” statement with HttpMethod type as below.

This is one type of AJAX call.

<script type="text/javascript"> using (Ajax.BeginForm("RegisterCustomer", controllerName, newAjaxOptions { HttpMethod = "GET", UpdateTargetId = "divBody", InsertionMode = InsertionMode.Replace })) { //your other html controls are here. <inputtype="submit" id="btnRegister" name=" btnRegister" value="btnRegister"> } <script>

You can see that I am calling RegisterCustomer method with GET type of HttpMethod and my button type is “submit”. It will surely call a call mvc controller from javascript method and you will get all html control values in parameters and also you will get model class values to class parameter of method.

Second type of AJAX call is java-script call.

$.ajax({ url: "@Url.Action(" RegisterCustomer ", " Customer ")", type: "GET", data: dataToSend, success: function(data) { $(".content_int").html(data); returnfalse; }, complete: function() { $("#ajax-loader").hide(); } });

Here is the model class

<script type="text/javascript"> publicclassCustomer { publicstringcustomerName { get; set; } publicstringcustomerAddress { get; set; } publicstringcontactNo { get; set; } } <script>

In the context of MVC (Model-View-Controller) architecture, with the use of AJAX calls it provides amazing flexibility and competence. A net core Ajax call to controller in MVC includes creating requests to the server asynchronously, without the requirement for a page refresh. Keep reading to understand better.

Here you can see that I passed “dataToSend” is object type data that is define as below. Properties for these object are same as model class.

<script type="text/javascript"> vardataToSend = { customerName: $(‘#txtName’).val(), customerAddress: $(‘#txtAddress’).val(), contactNo: $(‘#txtMobileNumber’).val() }; <script>

These both methods will work and call controller method.

Getting null parameter values on controller method.

This issue will occurs when you are trying to call HTTPGET type of control method using button type of input html control. You have to be sure when you are calling HTTPGET controller method, you have input type button control with type=submit.

<script type="text/javascript"> <inputtype="button" id="btnRegister" name="btnRegister" value="btnRegister"> <script>

Replace above line with this.

<script type="text/javascript"> <inputtype="submit" id="btnRegister" name="btnRegister" value="btnRegister"> <script>

The above example is same for this issue also.

Some times when you don’t define contentType to $.ajax call, it will not call any type of controller method, so you have to be sure when you are passing JSON type object data to controller you have to define contentType as below.

<script type="text/javascript"> contentType: 'application/json; charset=utf-8', <script>

Now finally, following is the order of properties for AJAX call in view or any java-script call with example.

vardataToSend = { customerName: $(‘#txtName’).val(), customerAddress: $(‘#txtAddress’).val(), contactNo: $(‘#txtMobileNumber’).val() }; $.ajax({ url: "@Url.Action(" RegisterCustomer ", " Customer ")", type: "GET", dataType: "string", async: true, //asynchronous call type true or false, default is true, data: dataToSend, contentType: 'application/json; charset=utf-8', success: function(data) $('#lblMsg').val(data); //display success message in label. }, complete: function() { //Here you can execute any action that you want after completion of ajax call. }, error: function(xmlHttxmpquest, errorText, thrownError) { //Here you can execute any action if controller method throw any error. } });

And controller method is like this.

[HttpGet] publicActionResultRegisterCustomer(Customer model) { try {……… Your logic here. } catch (Exception ex) { if (log.IsErrorEnabled) log.Error(ex.Message, ex); } returnJson(r, JsonRequestBehavior.AllowGet); }

Javascript and jQuery Code

Making use of JavaScript libraries and structures could easily increase your effectiveness and output if you are a programmer. While Ajax not calling the controller method then the Libraries such as jQuery code can give many pre-written functions and approaches that ease multifaceted responsibilities, letting you work on lesser coding and get larger in a small number of time.

Procedure Show(appId, appStatus) { $.fn.gotof(appId, appStatus); }

jQuery Function

jQuery purposes are influential tool that could improve the functions and interactions of any given website. Such functions let designers operate fundamentals on a page of the website, like fluctuating their content, elegance, or situation, in reply to activities taken by users or determined actions. A contention is obtained from the view and then transferred to the jQuery method.

$(document).ready(function () { $.fn.gotof = meaning (appId, appStatus) { var choose Entry = $("input[name='" + appStatus + "']:checked").val(); $.ajax({ url: '/App/InformUsercondition, data: { id: appId , status: selectedItem}, Out-dated: factual, datakind: "json", functionkind: "application/json", achievemnet: purpose (data) { alert(data); } }); });

Controller Method

In the area of Java, the controller method plays a vital part in the Model-View-Controller (MVC) structure for design. This method acts as the intermediary between the operator's contribution and the app's reply. It gets requests via the user edge, procedures the contribution statistics interrelates via the use of a simulation to obtain or enhance data and later controls the suitable interpretation to reduce as a reply. It even aids in preserving the parting of worries by keeping the business judgment distinct via the user appearance and the logic behind accessing information.

public JsonResult Upgrade the status of the applicant. (int id, string status){ return Json("Precise", JsonRequestBehavior.AllowGet); }

You may set a breakpoint on a controller method, however it won’t get triggered at the specified location.

Benefits of Ajax

There are a few advantages of using Ajax. Some of them are mentioned below.

1. You can make calls in return.
2. You can make use of an application or a website.
3. It can be used by every person.
4. Users can make calls related to Asynchronous.
5. You can enhance the performance level and the rate of speed of an application on a website.

What advances have been made to Ajax?

Javascript is the side of a client which is in the form of a language of script. Whereas, XML is another language that helps to know data. There is another JSON which is another language and it also states data. It is quite convenient to use JSON along with Javascript as compared to XML. It is important to know XML is substituted for JSON.

There is a huge advancement for asp.net mvc ajax call to controller with the use of Ajax and Javascript and that is jQuery which is a type of javascript library. Users should know it can be used free of cost. The use of JavaScript is to navigate a page for making callbacks of asynchronous Ajax. Thus, callbacks of Ajax are imperative in the practices of normal programming by making use of JSON and jQuery. These can be used for making applications for websites.

Demonstration: Implementation of Ajax using jQuery

Step 1

You must make a newer Project and select the ASP.NET MVC website app.

Step 2

You can turn off the pre-installed Classes and Controls and create an individual model.

Step 3

Now making a different DbContext. It is a way that handles every database function, such as database linking, and handling many objects of the Entity Prototypical.

DbContext may be described as a wrapper for ObjectContext. DbContext is a streamlined variant of ObjectContext that just provides the essential capabilities necessary for development.

Step 4

Then you should make a controller to write a code for injecting data into the database, exhibiting data in the interpretation.

Step 5

Then make the action approaches for Introducing and recovering the data inside the data from the database.

Step 6

Here you can make an addition of view to the presentation of the numbers and statistics implanting an area. You can later succumb button and even show the data on similar pages.

Step 7

At this point, we can compose the script that's going to handle the insertion of the data, and the retrieval and presentation to the view. We can make use of Ajax to revive "tblStudent" so it restores just the singular table, instead of renewing the complete pages.

Step 8

The program should be executed, and then you should browse to the Student controller. Additionally, you can customize "RouteConfig.cs" and ensure that the controller name has the name "Student" to facilitate straight routing to the Student controllers when the program is loaded.

GET

When accessing data from a particular site, the GET method is used. The URL is required to be sent along with every GET response that we make. It is a simple but effective HTTP technique that includes data to the URL as arguments. This enables the server to go through the inquiry and reply with the information that was required.

A GET REQUEST POST

A GET request that includes a parameter to the Controller's Method and delivers data in JSON format. While we make use of this technique, it will receive an argument and provide data in strings (also known as a message of wanted or a directive response).

POST call to Controller's Method to save TextBox Data (not form)

You will come across several approaches to POST via data as a technique nonetheless as a sample of textboxes you could go ahead and do a submit, while the operator clicks the switch you can save data with the aid of jQuery Ajax POST call.

POST call to Controller's Method to save form Data

When we want to keep the data by making a POST appeal to a control system, it is crucial to guarantee that the data is being sent safely and effectively. The POST technique is often applied to transmit data to the server here the purpose of making or updating a resource. In such a scenario, the controller's handling purpose would usually manage the inbound POST demand, retrieve the input data, verify its validity, and then store it in a database or carry out other essential tasks. Implementing robust validation processes is essential to guarantee the accuracy and security of the stored data.

How to use Ajax?

As it is known to all, AJAX which is also known as Asynchronous. There are others such as JavaScript and XML. It is a type of script in which the side of a client makes communication with the help of a database or server. You are not required to refresh a page or a postback. Ajax increases the time to respond. In short, Ajax is the process of interchanging data against the server. It can bring up to date a few parts of a page of a website. You do not have to load the whole page all over again.

1. Begin by making an XMLHttpRequest inside JavaScript to interconnect with the execution of web server tasks concurrently.

2. Later, describe a purpose for managing the server answer. One can create it on a server with the assistance of GET or POST to recover or transfer data.

3. Make use of callback purposes to manage the reply data and inform the DOM rudiments with the website pages animatedly. Recall to manage mistakes and offer response providing the user with a smooth and uninterrupted environment.

4. Having good preparation and research, you could take the complete possibility of Ajax to create the best and most approachable website and mobile apps.

Basic Properties of Ajax

1. Endpoint URL:

Here, you must provide the URL of the ending point where you wish to send the data for posting.

2. Kind:

Indicate a specific appeal method, such as POST, GET, delete, and so on

3. Data:

This refers to where it can be transmitted to a certain destination.

4. Achievement:

This attribute refers to a procedure that is called back and is triggered after a demand comes back with the OK, indicating where the completion has taken place. This callback technique even returns reply statistics that are sent from the controller side.

5. Error:

This error is triggered when an error happens while contacting an endpoint, such as when the endpoint is non-existent or when an inadequate request is made. This callback also includes the following parameters: demand, circumstance, and exception.

6. Async:

This attribute is a Boolean which is set to false by default. Setting this option to true will enable asynchronous calling of the submission, allowing additional requests to be made simultaneously. If this statement is untrue, further requests will only be made after the application has been successfully executed.

Conclusion

Please note that the coding shared by asp.net web development team is for reference purpose only. If you have any doubt or want to ask anything related to the issue, make comments below.

For further information, mail us at [email protected]