Submit MVC Form with Ajax.BeginForm

In this post we looked at how to submit a Form(Post a Form) in Asp .Net MVC using Ajax. The blog assumes that you have a working knowledge and you are able to create a basic MVC application. If you are new to MVC, please refer to my this post. This will walk you through a step by step process of creating Asp .Net MVC application from scratch.

Create The Basic MVC Application

This Link provides you a step by step tutorial for this.

Sample MVC Form

For our example let's say in your application user has to enter a Product and its details on a page. However page refreshing after every product submit is something they do not like very much. And so you want to improve this behavior by submitting this from Asynchronously using AJAX. Great, you have two options.

  • Using Ajax.BeginForm
  • Using Pure jQuery Ajax Form Submit

Let's examine the first approach of using Ajax.BeginForm

As part of System.Web.Mvc.Ajax namespace, you have bunch of classes that contains support for Ajax operations in your MVC application. One of the class you find in this namespace is the Ajax Helper class that allows us to create a form which will be handled asynchronously as opposed to regular full post back.

In our example, I already have following two Action methods. One is a Get and the other one is Post. When user makes a GET request, they get list of existing products with a simple Form at the top of the list where they can put in the information for new products.

Action Methods

Just to keep things simple, I am going to store the products being added by the user into a Session variable. In reality you will be storing this information into some sort of a persistent DateStore like SQL or something.

As a start, I have 5 dummy product details that gets returned when you call the GET method for the first time.Following function returns the dummy list of products.

GET screen

I also have a Model class that is representing the Product entity as below.

Model class

Let's go ahead and create a new View for our Products action method. Right click on the Get action method, click Add View and select following options. Basically we are creating strongly typed view with Product model using List scaffolding template.

Model class

Running the application in current state will show you list of dummy products. I have also added some basic CSS styling for table.

Model class

Model class

Adding jQuery & Microsoft jQuery Unobtrusive Ajax Library

In order to use Ajax.BeginForm which is using jQuery Unobtrusive Ajax library we need to add that package from NuGet Package Manager. To do this, Right click on the References node.

Model class

Search for jQuery Unobtrusive and Install the highlighted package.

Model class

After successful installation you will notice the Scripts folder in solution and bunch of new .js files under that folder. In reality there are only two files, jQuery 1.8 and jQuery Unobtrusive, others are minified version of the same file with additional intellisense file.

Model class

Next, add reference of these two js libraries in your View.

Model class

Now let's modify the View to place an Ajax form in our current View. Everything else is going to same as your ordinary form except the highlighted part where we instruct the View to submit the form using Ajax.

Model class

Run the application and you should see newly created form. Enter some product information and try submitting the form. At first you will see that nothing is happening but that is generally a good sign. Remember you are posting from with Ajax, so your page is not doing full postback. Put a break point and you you will see that application is hitting the break point when you click ADD.

MVC Form

Confirm that you are getting the data on Post event. Now the post method needs to be modified otherwise user will think that nothing is happening as you thought for a second. This is where you will start using the second part of this functionality, AjaxOptions

Understanding AjaxOptions

So what we really need to do is coupe of things.

  • Return some sort of indication if the data was inserted successfully or not from our Post method return as oppose to returning entire list of products.
  • Execute custom JavaScript function when the Post method returns some result

For the first one, let's modify that Post method return simple content mentioning that the record was added successfully.

MVC Form

Next, let's modify the View declaration of Form to have AjaxOptions parameters. What I am passing here is JavaScript function that needs to be execute when the Ajax call is completed successfully.

MVC Form

Also, let's define the JavaScript function that checks for the result and if it is "Success", it will show an alert to the user.

MVC Form

MVC Form

This is looking much better but we can still do a lot of improvement here. Instead of showing the alert, why don't we update the entry in the list of table and empty out all the Inputs, so user can confirm the new entry and keep adding new entry as needed. And as you might have guessed already, we need to do all of this in our OnSuccess method. For simplicity of the tutorial, I am going to remove the 4th Column from our product list table that contains "Edit/Delete/Details" options.

The modified JavaScript function looks like below.

MVC Form

And following is the GIF showing the final user experience.

MVC Ajax Form