-->

How to insert data into sql server databse using jquery (post method) in asp.net MVC 4 Application.

| | |

Introduction

In this post, I am explain how to insert data into sql server databse using jquery (post method) in asp.net MVC 4 Application.


Steps :

Step - 1 : Create New Project.

Go to File > New > Project > Select asp.net MVC4 web application > Entry Application Name > Click OK > Select Internet Application > Select view engine Razor > OK

Step-2: Add a Database.

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.

Step-3: Create table for fetch data.

Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.
In this example, I have used one tables as below


Step-4: Add Entity Data Model.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-5: Apply Validation On Model.

Open your model and add validation. Please follow below code 

  1.             namespace MVCAjaxSave
  2.             {
  3.                 using System;
  4.                 using System.Collections.Generic;
  5.                 using System.ComponentModel.DataAnnotations;
  6.     
  7.                 public partial class ContactInfo
  8.                 {
  9.                     public int ID { get; set; }
  10.                     [Required(ErrorMessage="Contact Name required!", AllowEmptyStrings=false)]
  11.                     public string ContactName { get; set; }
  12.                     [Required(ErrorMessage="Contact No required!", AllowEmptyStrings=false)]
  13.                     public string ContactNo { get; set; }
  14.                 }
  15.             }
  16.

Step-6: Add a new Controller.

Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > Select Templete "empty MVC Controller"> Add.

Step-7: Add new action into your controller for save data.

Here I have added "Save" Action into "Ajax" Controller. Please write this following code 

  1.              public ActionResult Save()
  2.             {
  3.                 return View();
  4.             }
  5.

Step-8: Add view for the Action & design.

Right Click on Action Method (here right click on form action) > Add View... > Enter View Name > Select View Engine (Razor) > Check "Create a strong-typed view" > Select your model class > Add.
[N:B:Please Rebuild solution before add view.]

Step-9: Add jquery code for save data to the server.

Jquery Code 
  1.                 <script>
  2.                     $(document).ready(function () {
  3.                         $("#AjaxPost").click(function () {
  4.                             $("#content").html("<b>Please Wait...</b>");
  5.  
  6.                             var dataObject = {
  7.                                 ContactName: $("#ContactName").val(),
  8.                                 ContactNo : $("#ContactNo").val()
  9.                             };
  10.  
  11.                             $.ajax({
  12.                                 url: "@Url.Action("Save","Ajax")",
  13.                                 type: "POST",
  14.                                 data: dataObject,
  15.                                 dataType: "json",
  16.                                 success: function (data) {
  17.                                     if (data.toString() == "Successfully Saved!") {
  18.                                         $("#ContactName").val('');
  19.                                         $("#ContactNo").val('');
  20.                                         $("#content").html("<div class='success'>"+data+"</div>");
  21.                                     }
  22.                                     else {
  23.                                         $("#content").html("<div class='failed'>" + data + "</div>");
  24.                                     }
  25.                                 },
  26.                                 error: function () {
  27.                                     $("#content").html("<div class='failed'>Error! Please try again</div>");
  28.                                 }
  29.                             });
  30.  
  31.                         });
  32.                     });
  33.                 </script>
  34.
Complete View 
  1.             @model MVCAjaxSave.ContactInfo
  2.  
  3.             @{
  4.                 ViewBag.Title = "Ajax Save - Contact Info";
  5.             }
  6.  
  7.             <style>
  8.                 .success {
  9.                     border:solid 1px rgb(13,109,0);
  10.                     width:300px;
  11.                     padding:5px;
  12.                     background-color:rgb(215,255,218);
  13.                 }
  14.                 .failed {
  15.         
  16.  
  17.                     border:solid 1px red;
  18.                     width:300px;
  19.                     padding:5px;
  20.                     background-color:rgb(255,229,229);
  21.                 }
  22.             </style>
  23.  
  24.             <h2 style="font-size:12pt; font-weight:bold;">Ajax Save - Contact Info</h2>
  25.  
  26.             @using (Html.BeginForm()) {
  27.                 @Html.ValidationSummary(true)
  28.  
  29.                 <fieldset style="background-color:#ffffff">
  30.                     <legend>Contact Info</legend>
  31.                     <div style="padding:20px;">
  32.                         <div class="editor-label">
  33.                         Contact Name
  34.                     </div>
  35.                     <div class="editor-field">
  36.                         @Html.EditorFor(model => model.ContactName)
  37.                         @Html.ValidationMessageFor(model => model.ContactName)
  38.                     </div>
  39.  
  40.                     <div class="editor-label">
  41.                         Contact No
  42.                     </div>
  43.                     <div class="editor-field">
  44.                         @Html.EditorFor(model => model.ContactNo)
  45.                         @Html.ValidationMessageFor(model => model.ContactNo)
  46.                     </div>
  47.  
  48.                     <p>
  49.                         <input type="button" value="Save" id="AjaxPost"/>
  50.                     </p>
  51.                     <div id="content">
  52.  
  53.                     </div>
  54.                         </div>
  55.                 </fieldset>
  56.             }
  57.  
  58.             <div>
  59.                 @Html.ActionLink("Back to List", "Index")
  60.             </div>
  61.  
  62.             @section Scripts {
  63.                 @Scripts.Render("~/bundles/jqueryval")
  64.                 <script>
  65.                     $(document).ready(function () {
  66.                         $("#AjaxPost").click(function () {
  67.                             $("#content").html("<b>Please Wait...</b>");
  68.  
  69.                             var dataObject = {
  70.                                 ContactName: $("#ContactName").val(),
  71.                                 ContactNo : $("#ContactNo").val()
  72.                             };
  73.  
  74.                             $.ajax({
  75.                                 url: "@Url.Action("Save","Ajax")",
  76.                                 type: "POST",
  77.                                 data: dataObject,
  78.                                 dataType: "json",
  79.                                 success: function (data) {
  80.                                     if (data.toString() == "Successfully Saved!") {
  81.                                         $("#ContactName").val('');
  82.                                         $("#ContactNo").val('');
  83.                                         $("#content").html("<div class='success'>"+data+"</div>");
  84.                                     }
  85.                                     else {
  86.                                         $("#content").html("<div class='failed'>" + data + "</div>");
  87.                                     }
  88.                                 },
  89.                                 error: function () {
  90.                                     $("#content").html("<div class='failed'>Error! Please try again</div>");
  91.                                 }
  92.                             });
  93.  
  94.                         });
  95.                     });
  96.                 </script>
  97.             }
  98.  
  99.

Step-10: Step-10: Add another action into your controller for Save Data to the server.

Here I have added "Save" Action into "Ajax" Controller for POST Action. Please write this following code 

  1.                 [HttpPost]
  2.                 public ActionResult Save(ContactInfo CI)
  3.                 {
  4.                     
  5.                     string message = "";
  6.                     if (ModelState.IsValid)
  7.                     {
  8.                         try
  9.                         {
  10.                             using (MyDatabaseEntities dc = new MyDatabaseEntities())
  11.                             {
  12.                                 dc.ContactInfoes.Add(CI);
  13.                                 dc.SaveChanges();
  14.  
  15.                                 message = "Successfully Saved!";
  16.                             }
  17.                         }
  18.                         catch (Exception ex)
  19.                         {
  20.                             message = "Error! Please try again.";
  21.                         }
  22.                     }
  23.                     else
  24.                     {
  25.                         message = "Please provide required fields value.";
  26.                     }
  27.                     if (Request.IsAjaxRequest())
  28.                     {
  29.                         return new JsonResult { Data = message, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
  30.                     }
  31.                     else
  32.                     {
  33.                         ViewBag.Message = message;
  34.                         return View(CI);
  35.                     }
  36.                 }
  37.

Step-11: Run Application.


Download Application     Live Demo


Related Post :
  1. How to insert data into sql server databse using jquery (post method) in asp.net





Hello ! My name is Sourav Mondal. I am a software developer working in Microsoft .NET technologies since 2010.

I like to share my working experience, research and knowledge through my site.

I love developing applications in Microsoft Technologies including Asp.Net webforms, mvc, winforms, c#.net, sql server, entity framework, Ajax, Jquery, web api, web service and more.

Related Posts:

Subscribe to Newsletter

Get latest article about asp.net, mvc, jquery, web api, angularjs and much more straight into your INBOX for free. Just Enter your email address, Verify and join our Newsletter!