Asp.Net MVC jQuery AJAX Form Submit using Serialize Form Data into a Model

Introduction

 

This article helps beginner and advanced developers get VIEW form data into controller side with help of JQUERY AJAX. In this walk through you will see controller side received data on click of SUBMIT button. 

 

Those who are new will enjoy learning how to make the empty template of Asp.Net MVC ready. 

 

You will learn following things in this article

• How to add jquery in project
• Where NuGet stores installed Packages details  
• Jquery Ajax Form Submit using Serializing Form Data into a Model

 

 

Create a project called “AspNetMvcJqueryAjaxSerializeForm” 

 

 

 

Click Ok to proceed

 

 

 

By default view after “AspNetMvcJqueryAjaxSerializeForm”project created.

 

In empty project template visual studio will not give any controller , model and view. All three folders called CONTROLLERS, MODELS and VIEWS are blank only Web.Config file exists inside VIEWS folder.

  

How to add jquery in project?

 

Now we are going to add Jquery into project with help of NUGET. 

 

Right Click on Project title inside SOLULTION EXPLORER. 

 

 

 

Select option called Manage NuGet Packages. . . 

 

Follow the simple steps as given in image  

 

 

 

STEPS

1. Select browse to do search for jquery.
2. Type “Jquery” to search.
3. Single click on Jquery 
4. You can select your desired version.
5. Click on Install 

After selecting dialog box, in output window you will get this message: 

 

 

 

 

 

In the above you can see jquery installed successfully. You can even see Package.config file. 

 

 

 

Where NuGet store installed Packages details?

 

Package.config file maintains the list of NuGet packages. 

 

Now we are going create new CONTROLLER called FriendController. 

 

Right click on CONTROLLERS folder select ADD --> Controller 

 

 

 

 

 

In FriendController you can see following ACTIONRESULT method  is created

1. Index.
2. Details
3. Create -- HTTP GET
4. Create - HTTP POST
5. Edit -- HTTP GET
6. Edit - HTTP POST
7. Delete - HTTP GET
8. Delete - HTTP POST

Now we create model called “FriendModel”

 

Right click on Models folder.

 

Select ADD ---> Class -->FriendModel  (give name FRIENDMODEL) 

 

 

 

 

 

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace AspNetMvcJqueryAjaxSerializeForm.Models
{
    public class FriendModel
    {
        public string FriendName { get; set; }
        public string Phone { get; set; }
        public string State { get; set; }
    }
}

Build Project by Right clicking on Solution-Explorer. 

 

 

 

At left side bottom you can see “Build Succeeded”.

 

Again Switch back to FriendController controller.

 

Right click on Create ActionResult. 

 

 

 

 

 

Now you can see in Shared folder ---> _Layout.cshtml created.

 

Double click on _Layout.cshtml file:

 

At bottom Visual Studio added Jquery link  that is wrong because 

 

We have added Jquery 3.4.1 .

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

 

Copy this link and paste at head section, we had added latest version of jquery and you can cross check in SCRIPTS folder the jquery version.

 

Change according current version you had downloaded from NuGet. 

 

Move the this line  <script src="~/Scripts/jquery-3.4.1.min.js"></script>

 

Code at top following location:  

 

 

 

To check if jquery has started working or not you just put the following code at the bottom of Create.cshtml.

<script>
    $(document).ready(function(){
        console.log("ready!");
        alert("ready");
    });
</script>

Press F5 and execute project you will get following screen: 

 

 

 

You can see tin he above screenshot the ready alert box has appeared. 

 

Now switch back to FriendController 

 

Add namespace at top of the file

 

Using AspNetMvcJqueryAjaxSerializeForm.Models;

 

We added namespace because our model reside.

 

Now select Create HTTP Post method rename as AddFriend do following changes: 

 

 

 

  // POST: Friend/AddFriend
[HttpPost]
public ActionResult AddFriend(FriendModel fm)
{
          //Write your database insert code / activities
            return RedirectToAction("create");
}

Now switch back to Create.cshtml file and update code. 

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>
<form id="friendform">
    <table>
        <tr>
            <td>Friend Name</td>
            <td><input id="txtFriendName" name="FriendName" type="text" /></td>
        </tr>
        <tr>
            <td>Phone</td>
            <td><input id="txtPhone" name="Phone" type="text" /></td>
        </tr>
        <tr>
            <td>State</td>
            <td><input id="txtState" name="State" type="text" /></td>
        </tr>
    </table>
 <input id="btnsubmit" type="button" value="Submit"/>
</form>

<script>
    $(document).ready(function(){
        console.log("ready!");
        alert("ready");
    });
</script>

Now Press <F5> key to view output. 

 

 

 

Our next step is to insert Jquery Ajax Form Submit with Serializing because our article title is  Asp.Net MVC jQuery AJAX Form Submit using Serialize Form Data into Model.

 

Switch back to CREATE.CSHTML file to insert AJAX code. 

<script>
    $(document).ready(function () {
        $("#btnsubmit").click(function (e) {
            //Serialize the form datas.
            var valdata = $("#friendform").serialize();
            //to get alert popup
            alert(valdata);
            $.ajax({
                url: "/Friend/AddFriend",
                type: "POST",
                dataType: 'json',
                contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                data: valdata
            });
        });
    });
</script>

Now switch to CONTROLLER to mark BREAKPOINT or DEBUGGER 

 

 

 

 

You can see in the above form where we enter data. On clicking on SUBMIT button this data we should get in controller side ADDFRIEND method. 

 

 

 

As I clicked on SUBMIT button alert popup appeared. 

 

 

 

You can see values are separated with & symbol.

 

 

 

 

In the above screen you can see we received data from view.

 

To recap the article, we have taken following steps: 

1. Created Empty Asp.Net MVC project
2. Installed Jquery from NuGet
3. Created Controller called “FriendController”
4. Created View “Create”
5. Created ActionMethod “AddFriend”

Putting all the important code at one place: 

 

FriendController.cs Code

using AspNetMvcJqueryAjaxSerializeForm.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace AspNetMvcJqueryAjaxSerializeForm.Controllers
{
    public class FriendController : Controller
    {
        // GET: Friend/Create
        public ActionResult Create()
        {
            return View();
        }
        // POST: Friend/AddFriend
        [HttpPost]
        public ActionResult AddFriend(FriendModel fm)
        {
            //Write your database insert code / activities
            return RedirectToAction("create");
        }
    }
}

FriendModel.cs Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace AspNetMvcJqueryAjaxSerializeForm.Models
{
    public class FriendModel
    {
        public string FriendName { get; set; }
        public string Phone { get; set; }
        public string State { get; set; }
    }
}

Create.cshtml Code

@{
    ViewBag.Title = "Create";
}

 <h2>Create</h2>
<form id="friendform">
    <table>
        <tr>
            <td>Friend Name</td>
            <td><input id="txtFriendName" name="FriendName" type="text" /></td>
        </tr>
        <tr>
            <td>Phone</td>
            <td><input id="txtPhone" name="Phone" type="text" /></td>
        </tr>
        <tr>
            <td>State</td>
            <td><input id="txtState" name="State" type="text" /></td>
        </tr>
    </table>
    <input id="btnsubmit" type="button" value="Submit" />
</form>
<script>
    $(document).ready(function () {
        $("#btnsubmit").click(function (e) {
            //Serialize the form datas.
            var valdata = $("#friendform").serialize();
            //to get alert popup
            alert(valdata);
            $.ajax({
                url: "/Friend/AddFriend",
                type: "POST",
                dataType: 'json',
                contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                data: valdata
            });
        });
    });
</script>

_Layout.cshtml Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>© @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>
    <script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>

Happy Coding.