Home > DeveloperSection > Articles > AJAX with ASP.NET MVC

AJAX with ASP.NET MVC


ASP.NET MVC C#  AJAX  Mvc4  Ajaxform 
Ratings:
0 Comment(s)
 2122  View(s)
Rate this:

AJAX with ASP.NET MVC

Hi everyone in this post I’m explaining about woring with ajax in asp.net mvc.

 If you want to learn more about model read my previous post Working With Model in MVC4

Description:

In this post I’ll teach you post data using ajax form without page refreshing. Firstly I explain about ajax. In this article we will learn one very important concept in ajax() functionality. In day-to-day project development the common task is to submit form data to the server, in other words in the broad sense, "save user's data to server".  The data sending or data passing operation can be done in various ways, we can take data from an individual control and form it in JSON format or we can serialize an entire form's data and send it to the server.

AJAX:

AJAX (Asynchronous javascript and xml) is used basically exchange data with a server and updating parts of web page without reloading whole page. Ajax is make our site very fast and more interactive web application with the help of xml, html, css and javascript.

Conventional web applications transmit information to and from the sever using synchronous requests. It means you fill out a form, hit submit, and get directed to a new page with new information from the server.

With AJAX, when you hit submit, JavaScript will make a request to the server, interpret the results, and update the current screen. In the purest sense, the user would never know that anything was even transmitted to the server.

XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.

AJAX is a web browser technology independent of web server software.

 Lets start:

Step 1:  Create database and table like this

CREATE TABLE Customer

(

      CustomerId INT IDENTITY(1,1)PRIMARY KEY,

      CustomerName VARCHAR(200),

      CompanyName VARCHAR(200),

      Address VARCHAR(100),

      City VARCHAR(100),

      PostalCode VARCHAR(100),

      Country VARCHAR(100),

      Phone VARCHAR(100),

      Fax VARCHAR(100)

)

 

Step 2:  Open visual studio >> File >> New Project >> ASP.NET MVC 4 Web Application

Give the application name and click ok after click ok open a new window and select project type empty.

Step 3:  Now install entity frame work  from Manage NuGet Package.

Step 4:  Now add .edmx file in model folder for use db first approach learn more about db first approach read my previous post Crud operation in MVC using DB First-Approach.

 

Step 4:  Download these liberary.

<link href="@Url.Content("~/Content/bootstrap-3.3.2-dist/css/bootstrap.min.css")" rel="stylesheet" />

<link href="@Url.Content("~/Content/bootstrap-3.3.2-dist/css/bootstrap-theme.min.css")" rel="stylesheet" />

<link href="@Url.Content("~/Content/bootstrap-3.3.2-dist/css/font-awesome.min.css")" rel="stylesheet" />

<script src="@Url.Content("~/Script/jquery-2.1.3.min.js")"></script>

<script src="@Url.Content("~/Script/bootstrap-3.3.2-dist/js/bootstrap.min.js")"></script>

<script src="@Url.Content("~/Script/jquery.unobtrusive-ajax.min.js")"></script>

 

Step 5:  Add HomeController

using Asp.NetAjaxSample.Models;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

 

namespace Asp.NetAjaxSample.Controllers

{

    public class HomeController : Controller

    {

        //

        // GET: /Home/

        MyDBEntities db = new MyDBEntities();

 

        public ActionResult Index()

        {

            return View();

        }

 

        [HttpPost]

        public ActionResult Save(Customer model)

        {

            db.Customers.Add(model);

            db.SaveChanges();

            ModelState.Clear();

            return View(new Customer());

        }

 

    }

}

 

Step 6:  Add Index View

@model Asp.NetAjaxSample.Models.Customer

@{

    ViewBag.Title = "Index";

}

 

<link href="@Url.Content("~/Content/bootstrap-3.3.2-dist/css/bootstrap.min.css")" rel="stylesheet" />

<link href="@Url.Content("~/Content/bootstrap-3.3.2-dist/css/bootstrap-theme.min.css")" rel="stylesheet" />

<link href="@Url.Content("~/Content/bootstrap-3.3.2-dist/css/font-awesome.min.css")" rel="stylesheet" />

<script src="@Url.Content("~/Script/jquery-2.1.3.min.js")"></script>

<script src="@Url.Content("~/Script/bootstrap-3.3.2-dist/js/bootstrap.min.js")"></script>

<script src="@Url.Content("~/Script/jquery.unobtrusive-ajax.min.js")"></script>

 

 

<div class="clearfix">&nbsp;</div>

<div class="clearfix">&nbsp;</div>

<div class="clearfix">&nbsp;</div>

<div class="container">

    <div class="row">

        <div class="col-md-6 col-md-offset-3 well">

            @using (Ajax.BeginForm("Save", "Home", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "result" }))

            {

                <div id="result"></div>

                    <h2 class="text-center text-priamry">Register</h2>

                    <div class="col-md-12">

                        <div class="form-group">

                            <div class="input-group">

                                <span class="input-group-addon"><i class="fa fa-user"></i></span>

                                                                @Html.TextBoxFor(m => m.CustomerName, new { @class = "form-control", @placeholder = "Customer Name" })

                            </div>

                        </div>

                    </div>

                    <div class="col-md-12">

                        <div class="form-group">

                            <div class="input-group">

                                <span class="input-group-addon"><i class="fa fa-medium"></i></span>

                               

                                @Html.TextBoxFor(m => m.CompanyName, new { @class = "form-control", @placeholder = "Company Name" })

                            </div>

                        </div>

                    </div>

                    <div class="col-md-12">

                        <div class="form-group">

                            <div class="input-group">

                                <span class="input-group-addon"><i class="fa fa-location-arrow"></i></span>

                               

                                @Html.TextBoxFor(m => m.Address, new { @class = "form-control", @placeholder = "Address" })

                            </div>

                        </div>

                    </div>

                    <div class="col-md-12">

                        <div class="form-group">

                            <div class="input-group">

                                <span class="input-group-addon"><i class="fa fa-map-marker"></i></span>

                               

                                @Html.TextBoxFor(m => m.City, new { @class = "form-control", @placeholder = "City" })

                            </div>

                        </div>

                    </div>

                    <div class="col-md-12">

                        <div class="form-group">

                            <div class="input-group">

                                <span class="input-group-addon"><i class="fa fa-pinterest-p"></i></span>

                              

                                @Html.TextBoxFor(m => m.PostalCode, new { @class = "form-control", @placeholder = "Postal Code" })

                            </div>

                        </div>

                    </div>

                    <div class="col-md-12">

                        <div class="form-group">

                            <div class="input-group">

                                <span class="input-group-addon"><i class="fa fa-flag-checkered"></i></span>

                              

                                @Html.TextBoxFor(m => m.Country, new { @class = "form-control", @placeholder = "Country" })

                            </div>

                        </div>

                    </div>

                    <div class="col-md-12">

                        <div class="form-group">

                            <div class="input-group">

                                <span class="input-group-addon"><i class="fa fa-phone"></i></span>

                              

                                @Html.TextBoxFor(m => m.Phone, new { @class = "form-control", @placeholder = "Phone No" })

                            </div>

                        </div>

                    </div>

                    <div class="col-md-12">

                        <div class="form-group">

                            <div class="input-group">

                                <span class="input-group-addon"><i class="fa fa-fax"></i></span>

                            

                                @Html.TextBoxFor(m => m.Fax, new { @class = "form-control", @placeholder = "Fax" })

                            </div>

                        </div>

                    </div>

                    <div class="col-md-12">

                        <input type="submit" value="Register" id="register" class="btn btn-success form-control" />

                    </div>

            }

        </div>

    </div>

</div>

 

 

Output:

1.       Now our table is empty

 

2.       Now Add a Record

 

3.       After add record

 

 In my next post I’ll explain about Crud Operation in MVC using Ajax


Don't want to miss updates? Please click the below button!

Follow MindStick