Post
Ask Question

Insert and Display Record in Form Using AjaxBegin Form

This article explains how to use the partial view and AjaxBegin Form to load data without a page reference. I have explained how to insert and list code. See the following procedure.

Step 1

First create the database and create a table depending on you needs.

Step 2

Create an Entity Data Model from the database. This is explained in detail in my previous blog.

Step 3

First you create a controller with the name “InformationController” in the controller folder.

Step 4

In the controller you need to create an Action method. This is the get method.

  1. public ActionResult AddInformation()      
  2. {      
  3.    ViewBag.CountryList = _datacontax.Countries.ToList().Select(s => new SelectListItem { Text=s.CountryName,Value=s.CountryName});      
  4.    ViewBag.StateList = _datacontax.States.ToList().Select(s => new SelectListItem {Text=s.StateName,Value=s.StateName });      
  5.    ViewBag.CityList = _datacontax.Cities.ToList().Select(s => new SelectListItem {Text=s.CityName,Value=s.CityName});      
  6.    return View();      
  7. }   

Step 5

Create an "AddInformation.chtml" view. Right-click on the Action method and Add View.

add view

Step 6

Now write the code in the View as in the following. You need to provide the namespace as in the following.

  1. @model imaguploaddemo.Models.demoregistartion    
  2.     
  3. @{    
  4.     ViewBag.Title = "AddInformation";    
  5.     Layout = "~/Views/Shared/_Layout.cshtml";    
  6. }    
  7.     
  8. @using (Ajax.BeginForm("AddInformation", "Information", new AjaxOptions { UpdateTargetId = "InformationAjaxList", HttpMethod = "POST", InsertionMode = InsertionMode.Replace, OnSuccess = "ClearAll();" }, new { @class = "form-horizontal" }))    
  9. {    
  10.     @Html.AntiForgeryToken()    
  11.     <h4>Create a new account.</h4>    
  12.     <hr />    
  13.     @Html.ValidationSummary()    
  14.     <div class="form-group">    
  15.         @Html.LabelFor(m => m.FirstName, new { @class = "col-md-2 control-label" })    
  16.         <div class="col-md-10">    
  17.             @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control" })    
  18.             @Html.ValidationMessageFor(model => model.FirstName, "", new { @style = "color:red;" })    
  19.         </div>    
  20.     </div>    
  21.     <div class="form-group">    
  22.         @Html.LabelFor(m => m.LastName, new { @class = "col-md-2 control-label" })    
  23.         <div class="col-md-10">    
  24.             @Html.TextBoxFor(m => m.LastName, new { @class = "form-control" })    
  25.         </div>    
  26.     </div>    
  27.     <div class="form-group">    
  28.         @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })    
  29.         <div class="col-md-10">    
  30.             @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })    
  31.             @Html.ValidationMessageFor(model => model.FirstName, "", new { @style = "color:red;" })    
  32.         </div>    
  33.     </div>    
  34.     <div class="form-group">    
  35.         @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })    
  36.         <div class="col-md-10">    
  37.             @Html.PasswordFor(m => m.Password, new { @class = "form-control" })    
  38.             @Html.ValidationMessageFor(model => model.FirstName, "", new { @style = "color:red;" })    
  39.         </div>    
  40.     </div>    
  41.     <div class="form-group">    
  42.         @Html.LabelFor(m => m.EmailID, new { @class = "col-md-2 control-label" })    
  43.         <div class="col-md-10">    
  44.             @Html.TextBoxFor(m => m.EmailID, new { @class = "form-control" })    
  45.             @Html.ValidationMessageFor(model => model.FirstName, "", new { @style = "color:red;" })    
  46.         </div>    
  47.     </div>    
  48.     <div class="form-group">    
  49.         @Html.LabelFor(m => m.Gender, new { @class = "col-md-2 control-label" })    
  50.         <div class="col-md-10">    
  51.             @Html.RadioButtonFor(model => model.Gender, "Male") Male    
  52.             @Html.RadioButtonFor(model => model.Gender, "Female") Female    
  53.             @Html.ValidationMessageFor(model => model.Gender, "", new { @style = "color:red;" })    
  54.         </div>    
  55.     </div>    
  56.     <div class="form-group">    
  57.         @Html.LabelFor(m => m.Country, new { @class = "col-md-2 control-label" })    
  58.         <div class="col-md-10">    
  59.             @Html.DropDownListFor(m => m.Country, (IEnumerable<SelectListItem>)ViewBag.CountryList, "Select", new { @id = "ddlCountry" })    
  60.             @Html.ValidationMessageFor(model => model.Country, "", new { @style = "color:red;" })    
  61.         </div>    
  62.     </div>    
  63.     <div class="form-group">    
  64.         @Html.LabelFor(m => m.State, new { @class = "col-md-2 control-label" })    
  65.         <div class="col-md-10">    
  66.             @Html.DropDownListFor(m => m.State, (IEnumerable<SelectListItem>)ViewBag.StateList, "Select", new { @id = "ddlState" })    
  67.             @Html.ValidationMessageFor(model => model.State, "", new { @style = "color:red;" })    
  68.         </div>    
  69.     </div>    
  70.     <div class="form-group">    
  71.         @Html.LabelFor(m => m.City, new { @class = "col-md-2 control-label" })    
  72.         <div class="col-md-10">    
  73.             @Html.DropDownListFor(m => m.City, (IEnumerable<SelectListItem>)ViewBag.CityList, "Select", new { @id = "ddlCity" })    
  74.             @Html.ValidationMessageFor(model => model.City, "", new { @style = "color:red;" })    
  75.         </div>    
  76.     </div>    
  77.     <div class="form-group">    
  78.         @Html.LabelFor(m => m.Hobby, new { @class = "col-md-2 control-label" })    
  79.         <div class="col-md-10">    
  80.             @Html.TextBoxFor(m => m.Hobby, new { @class = "form-control" })    
  81.             @Html.ValidationMessageFor(model => model.Hobby, "", new { @style = "color:red;" })    
  82.         </div>    
  83.     </div>    
  84.     
  85.     <div class="form-group">    
  86.         <div class="col-md-offset-2 col-md-10">    
  87.             <input type="submit" class="btn btn-default" value="Register" />    
  88.         </div>    
  89.     </div>    
  90. }    
  91. <div id="InformationAjaxList">    
  92.     @Html.Action("_InformationList")    
  93. </div>    
  94. @section Scripts {    
  95.     <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>    
  96.     @Scripts.Render("~/bundles/jqueryval")    
  97.     <script>    
  98.         function ClearAll()    
  99.         {    
  100.             $("#FirstName").val('')    
  101.             $("#LastName").val('')    
  102.               
  103.             $("#UserName").val('')    
  104.             $("#Password").val('')    
  105.             $("#EmailID").val('')    
  106.             $("#Gender").val('')    
  107.             $("#Country").val('')    
  108.             $("#State").val('')    
  109.             $("#City").val('')    
  110.             $("#Hobby").val('')    
  111.         }    
  112.     </script>    
  113. }    
Step 7

The following code is for the partial view. You need to create a partial view. Before creating the partial view you need to write an action method as in the following:
  1. public ActionResult _InformationList()   
  2. {   
  3.    var model = _datacontax.demoregistartions.ToList();   
  4.    return PartialView(model);   
  5. }   
Step 8

I have the following code in "AddInformation.cshtml".
  1. public ActionResult _InformationList()      
  2. {      
  3.     var model = _datacontax.demoregistartions.ToList();      
  4.     return PartialView(model);      
  5. }    
Step 9

Write the following code in the Partial view. This is for the listing information.
  1. @model IEnumerable<imaguploaddemo.Models.demoregistartion>    
  2. <div class="panel-body">    
  3.     <div>    
  4.         <a href="/FormInformation/FormInformation">Add Form Detail</a>    
  5.     </div>    
  6.     <table class=" table-bordered table-responsive">    
  7.         <tr>    
  8.             <th>First Name</th>    
  9.             <th>Last Name</th>    
  10.             <th>Email ID</th>    
  11.         </tr>    
  12.         @foreach (var v in Model)    
  13.         {    
  14.             <tr>    
  15.                 <td>@v.FirstName</td>    
  16.                 <td>@v.LastName</td>    
  17.                 <td>@v.EmailID</td>    
  18.                 <td>    
  19.                     <a href="/Registration/[email protected]">Edit</a>    
  20.                     <a href="/Registration/[email protected]">Delete</a>    
  21.                 </td>    
  22.             </tr>    
  23.         }    
  24.     </table>    
  25. </div>  
Step 10

Write the Action method for the post.
  1. [AcceptVerbs(HttpVerbs.Post)]    
  2. public ActionResult AddInformation(demoregistartion objdemoreg)    
  3. {    
  4.     objdemoreg.IsActive = true;    
  5.     objdemoreg.UserID = Guid.NewGuid();    
  6.     _datacontax.demoregistartions.Add(objdemoreg);    
  7.     _datacontax.SaveChanges();    
  8.     return RedirectToAction("_InformationList");    
  9. }   
Step 11

The following is the full code of the controller.
  1. using System;    
  2. using System.Collections.Generic;    
  3. using System.Linq;    
  4. using System.Web;    
  5. using System.Web.Mvc;    
  6. using imaguploaddemo.Models;    
  7. namespace imaguploaddemo.Controllers    
  8. {    
  9.     public class InformationController : Controller    
  10.     {    
  11.         private DB_9CC4F9_mvcdemoEntities _datacontax;    
  12.         public InformationController()    
  13.         {    
  14.             _datacontax=new DB_9CC4F9_mvcdemoEntities();    
  15.         }    
  16.         //    
  17.         // GET: /Information/    
  18.         public ActionResult AddInformation()    
  19.         {    
  20.             ViewBag.CountryList = _datacontax.Countries.ToList().Select(s => new SelectListItem { Text=s.CountryName,Value=s.CountryName});    
  21.             ViewBag.StateList = _datacontax.States.ToList().Select(s => new SelectListItem {Text=s.StateName,Value=s.StateName });    
  22.             ViewBag.CityList = _datacontax.Cities.ToList().Select(s => new SelectListItem {Text=s.CityName,Value=s.CityName});    
  23.             return View();    
  24.         }    
  25.         public ActionResult _InformationList()    
  26.         {    
  27.             var model = _datacontax.demoregistartions.ToList();    
  28.             return PartialView(model);    
  29.         }    
  30.         [AcceptVerbs(HttpVerbs.Post)]    
  31.         public ActionResult AddInformation(demoregistartion objdemoreg)    
  32.         {    
  33.             objdemoreg.IsActive = true;    
  34.             objdemoreg.UserID = Guid.NewGuid();    
  35.             _datacontax.demoregistartions.Add(objdemoreg);    
  36.             _datacontax.SaveChanges();    
  37.             return RedirectToAction("_InformationList");    
  38.         }    
  39.     }    
  40. }  
Step 12

Run the code. The following page displays.

output

 


Similar Articles