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
  3. @{
  4. ViewBag.Title = "AddInformation";
  5. Layout = "~/Views/Shared/_Layout.cshtml";
  6. }
  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>
  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('')
  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