15 49.0138 8.38624 1 0 4000 1 https://codeisall.com 300
Save Data with AJAX in MVC codeisall.com

Save Data with AJAX in MVC

In the previous article, you have learned about what is the jQuery Datatables and how we can use them in MVC applications. In this article, you will learn about what AJAX is, the advantages of AJAX request in web applications, and how to use it in an MVC application.

What is AJAX?

AJAX stands for Asynchronous JavaScript And XML. It is not a programming language, it is just uses combination of browser built-in XMLHttpRequest object, JavaScript, HTML, XHTML, CSS, XML and DOM.

When HTML, CSS, XML, XMLHttpRequest object, javascript are combined in the Ajax model, web application are able to make quickly updates to the user interface without reloading the entire browser page. This makes the application faster and more responsive to user actions.

Advantages of AJAX

  • Update a web page without reloading the page
  • Request and Receive data from a server after the page has loaded
  • Send data to a server in the background.
  • It is a web browser technology independent of web server software.
  • Data-driven as opposed to page-driven.

How It Works

AJAX can’t work independently. because its combinations of other technologies.


  • Loosely typed scripting language.
  • function is called when an event occurs in a page.
  • Glue for the whole AJAX operation.

DOM (Document Object Model)

  • API for accessing and manipulating structured documents.
  • Represents the structure of XML and HTML documents


  • Allows for a clear separation of the presentation style from the content and may be changed programmatically by JavaScript


  • JavaScript object that performs asynchronous interaction with the server.


Step 1

Create a new project in asp.NET MVC, you can refer to create an asp.NET MVC application from here, Either you can also implement in existing projects as well.

Step 2

Crete view for following example that demonstrate use of AJAX. write following code in your view file.

@section Scripts{ }

In following code there is two input box for input two probability values from user, and one dropdown for select probability method for calculation.

In the script section button click event written for request calculation of two user inputs from server. first it will get data using id selector from both input fields and dropdown and wrap it into calculatorModel. you can also pass separate value to the server parameters if you want.

AJAX function is call when button clicked and js model bind from user inputs. you can check there is various options for AJAX function like url, type, data, async, dataType, etc. you can find all options from here.

  • URL: a string that contains address where request is sent.
  • TYPE: The HTTP method to use for the request, by default it is GET. you can set it to PUT, POST, etc.
  • DATA: data that is sent to the server, it is in form of Plain Object or String or Array. if you are use HTTP GET method then you can append data at the end of URL.
  • SUCCESS: A function to be called if the request succeeds. here if request succeeds then text set in result div.

Step 3

Create one model that contains property of two probability values and method of probability calculation.

namespace ProbabilityCalc.Models
    public class CalculatorModel
        public decimal Probability1 { get; set; }
        public decimal Probability2 { get; set; }
        public string Function { get; set; }

Stpe 4

Write method in controller for calculating probability from user input and send response as JSON format.

public JsonResult CalculateProbability(CalculatorModel calculatorModel)
    decimal Result = 0;
    if (calculatorModel.Function == "Combined_With")
        Result = calculatorModel.Probability1 * calculatorModel.Probability2;
        Result = (calculatorModel.Probability1 + calculatorModel.Probability2) - (calculatorModel.Probability1 * calculatorModel.Probability2);

    return Json(new { Result });

the following code get user value from request model and calculate based on selected model and return the calculated value as a response. this response display in AJAX success function.

you can also add some validation to prevent failure from server. you can add javascript validation from client side or user server side validation.

As shown in the output user can send request to the server and get response from server without page reloading. you can use AJAX for save data to the database, get data from the server and many more.

I hope this article will help you to understand how AJAX request is useful in web applications how can be used in MVC applications and also what is the advantages of jQuery Datatables. We will be happy to help you if you have any issues or queries. Comment your suggestions and issues and we will try to resolve it.

jQuery datatables in MVC
Filters in MVC