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.
- public ActionResult AddInformation()
- {
- ViewBag.CountryList = _datacontax.Countries.ToList().Select(s => new SelectListItem { Text=s.CountryName,Value=s.CountryName});
- ViewBag.StateList = _datacontax.States.ToList().Select(s => new SelectListItem {Text=s.StateName,Value=s.StateName });
- ViewBag.CityList = _datacontax.Cities.ToList().Select(s => new SelectListItem {Text=s.CityName,Value=s.CityName});
- return View();
- }
Step 5
Create an "AddInformation.chtml" view. Right-click on the Action method and 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.
- @model imaguploaddemo.Models.demoregistartion
-
- @{
- ViewBag.Title = "AddInformation";
- Layout = "~/Views/Shared/_Layout.cshtml";
- }
-
- @using (Ajax.BeginForm("AddInformation", "Information", new AjaxOptions { UpdateTargetId = "InformationAjaxList", HttpMethod = "POST", InsertionMode = InsertionMode.Replace, OnSuccess = "ClearAll();" }, new { @class = "form-horizontal" }))
- {
- @Html.AntiForgeryToken()
- <h4>Create a new account.</h4>
- <hr />
- @Html.ValidationSummary()
- <div class="form-group">
- @Html.LabelFor(m => m.FirstName, new { @class = "col-md-2 control-label" })
- <div class="col-md-10">
- @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control" })
- @Html.ValidationMessageFor(model => model.FirstName, "", new { @style = "color:red;" })
- </div>
- </div>
- <div class="form-group">
- @Html.LabelFor(m => m.LastName, new { @class = "col-md-2 control-label" })
- <div class="col-md-10">
- @Html.TextBoxFor(m => m.LastName, new { @class = "form-control" })
- </div>
- </div>
- <div class="form-group">
- @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })
- <div class="col-md-10">
- @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
- @Html.ValidationMessageFor(model => model.FirstName, "", new { @style = "color:red;" })
- </div>
- </div>
- <div class="form-group">
- @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
- <div class="col-md-10">
- @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
- @Html.ValidationMessageFor(model => model.FirstName, "", new { @style = "color:red;" })
- </div>
- </div>
- <div class="form-group">
- @Html.LabelFor(m => m.EmailID, new { @class = "col-md-2 control-label" })
- <div class="col-md-10">
- @Html.TextBoxFor(m => m.EmailID, new { @class = "form-control" })
- @Html.ValidationMessageFor(model => model.FirstName, "", new { @style = "color:red;" })
- </div>
- </div>
- <div class="form-group">
- @Html.LabelFor(m => m.Gender, new { @class = "col-md-2 control-label" })
- <div class="col-md-10">
- @Html.RadioButtonFor(model => model.Gender, "Male") Male
- @Html.RadioButtonFor(model => model.Gender, "Female") Female
- @Html.ValidationMessageFor(model => model.Gender, "", new { @style = "color:red;" })
- </div>
- </div>
- <div class="form-group">
- @Html.LabelFor(m => m.Country, new { @class = "col-md-2 control-label" })
- <div class="col-md-10">
- @Html.DropDownListFor(m => m.Country, (IEnumerable<SelectListItem>)ViewBag.CountryList, "Select", new { @id = "ddlCountry" })
- @Html.ValidationMessageFor(model => model.Country, "", new { @style = "color:red;" })
- </div>
- </div>
- <div class="form-group">
- @Html.LabelFor(m => m.State, new { @class = "col-md-2 control-label" })
- <div class="col-md-10">
- @Html.DropDownListFor(m => m.State, (IEnumerable<SelectListItem>)ViewBag.StateList, "Select", new { @id = "ddlState" })
- @Html.ValidationMessageFor(model => model.State, "", new { @style = "color:red;" })
- </div>
- </div>
- <div class="form-group">
- @Html.LabelFor(m => m.City, new { @class = "col-md-2 control-label" })
- <div class="col-md-10">
- @Html.DropDownListFor(m => m.City, (IEnumerable<SelectListItem>)ViewBag.CityList, "Select", new { @id = "ddlCity" })
- @Html.ValidationMessageFor(model => model.City, "", new { @style = "color:red;" })
- </div>
- </div>
- <div class="form-group">
- @Html.LabelFor(m => m.Hobby, new { @class = "col-md-2 control-label" })
- <div class="col-md-10">
- @Html.TextBoxFor(m => m.Hobby, new { @class = "form-control" })
- @Html.ValidationMessageFor(model => model.Hobby, "", new { @style = "color:red;" })
- </div>
- </div>
-
- <div class="form-group">
- <div class="col-md-offset-2 col-md-10">
- <input type="submit" class="btn btn-default" value="Register" />
- </div>
- </div>
- }
- <div id="InformationAjaxList">
- @Html.Action("_InformationList")
- </div>
- @section Scripts {
- <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
- @Scripts.Render("~/bundles/jqueryval")
- <script>
- function ClearAll()
- {
- $("#FirstName").val('')
- $("#LastName").val('')
-
- $("#UserName").val('')
- $("#Password").val('')
- $("#EmailID").val('')
- $("#Gender").val('')
- $("#Country").val('')
- $("#State").val('')
- $("#City").val('')
- $("#Hobby").val('')
- }
- </script>
- }
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:
- public ActionResult _InformationList()
- {
- var model = _datacontax.demoregistartions.ToList();
- return PartialView(model);
- }
Step 8
I have the following code in "AddInformation.cshtml".
- public ActionResult _InformationList()
- {
- var model = _datacontax.demoregistartions.ToList();
- return PartialView(model);
- }
Step 9
Write the following code in the Partial view. This is for the listing information.
- @model IEnumerable<imaguploaddemo.Models.demoregistartion>
- <div class="panel-body">
- <div>
- <a href="/FormInformation/FormInformation">Add Form Detail</a>
- </div>
- <table class=" table-bordered table-responsive">
- <tr>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Email ID</th>
- </tr>
- @foreach (var v in Model)
- {
- <tr>
- <td>@v.FirstName</td>
- <td>@v.LastName</td>
- <td>@v.EmailID</td>
- <td>
- <a href="/Registration/[email protected]">Edit</a>
- <a href="/Registration/[email protected]">Delete</a>
- </td>
- </tr>
- }
- </table>
- </div>
Step 10
Write the Action method for the post.
- [AcceptVerbs(HttpVerbs.Post)]
- public ActionResult AddInformation(demoregistartion objdemoreg)
- {
- objdemoreg.IsActive = true;
- objdemoreg.UserID = Guid.NewGuid();
- _datacontax.demoregistartions.Add(objdemoreg);
- _datacontax.SaveChanges();
- return RedirectToAction("_InformationList");
- }
Step 11
The following is the full code of the controller.
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Web.Mvc;
- using imaguploaddemo.Models;
- namespace imaguploaddemo.Controllers
- {
- public class InformationController : Controller
- {
- private DB_9CC4F9_mvcdemoEntities _datacontax;
- public InformationController()
- {
- _datacontax=new DB_9CC4F9_mvcdemoEntities();
- }
-
-
- public ActionResult AddInformation()
- {
- ViewBag.CountryList = _datacontax.Countries.ToList().Select(s => new SelectListItem { Text=s.CountryName,Value=s.CountryName});
- ViewBag.StateList = _datacontax.States.ToList().Select(s => new SelectListItem {Text=s.StateName,Value=s.StateName });
- ViewBag.CityList = _datacontax.Cities.ToList().Select(s => new SelectListItem {Text=s.CityName,Value=s.CityName});
- return View();
- }
- public ActionResult _InformationList()
- {
- var model = _datacontax.demoregistartions.ToList();
- return PartialView(model);
- }
- [AcceptVerbs(HttpVerbs.Post)]
- public ActionResult AddInformation(demoregistartion objdemoreg)
- {
- objdemoreg.IsActive = true;
- objdemoreg.UserID = Guid.NewGuid();
- _datacontax.demoregistartions.Add(objdemoreg);
- _datacontax.SaveChanges();
- return RedirectToAction("_InformationList");
- }
- }
- }
Step 12
Run the code. The following page displays.