Submit form using AJAX in Asp.Net mvc 4
99,667
Here goes the complete example -
Lets create a simple model -
public class Details
{
public string Name { get; set; }
public string Email { get; set; }
}
Now lets create couple of Actions to make GET and POST requests using AJAX BEGINFORM
-
static List<Details> details = new List<Details>();
public ActionResult GetMe()
{
return View();
}
public ActionResult SaveData(Details d)
{
details.Add(d);
return Json(details.Count, JsonRequestBehavior.AllowGet);
}
Then lets create a simple view which will host Ajax.BeginForm() -
@model RamiSamples.Controllers.Details
@{
ViewBag.Title = "Ajax";
}
<h2>Ajax</h2>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
@using (Ajax.BeginForm("SaveData", new AjaxOptions()
{
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "dane"
}))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<fieldset>
<legend>Details</legend>
<div class="editor-label">
@Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Email)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Email)
@Html.ValidationMessageFor(model => model.Email)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div id="dane">
Number of Details :
</div>
Now when the page gets rendered -
Now when you enter data and click on create button -
And then the page will automatically updated with the number of additions as shown below -
Author by
Shihan Khan
Updated on July 24, 2020Comments
-
Shihan Khan almost 4 years
I'm trying to learn asp.net and so far I can load other page contents without refreshing using
Ajax.Actionlink
andAjaxOptions()
but I can't figure it out how to use ajax when submitting a form. I did a lot of googling but couldn't find the appropriate solution. Here are my codes,Controller page
namespace CrudMvc.Controllers { public class HomeController : Controller { sampleDBEntities db = new sampleDBEntities(); // // GET: /Home/ public ActionResult Index() { return View(db.myTables.ToList()); } public PartialViewResult Details(int id = 0) { myTable Table = db.myTables.Find(id); return PartialView(Table); } [HttpGet] public PartialViewResult Create() { return PartialView(); } [HttpPost] public ActionResult Create(myTable table) { if (ModelState.IsValid) { db.myTables.Add(table); db.SaveChanges(); return RedirectToAction("Index"); } return View(table); } protected override void Dispose(bool disposing) { db.Dispose(); base.Dispose(disposing); } } }
Index
View page@model IEnumerable<CrudMvc.Models.myTable> @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <script src="~/Scripts/jquery-1.7.1.min.js"></script> <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> <h2>Index</h2> <p> @Ajax.ActionLink("Add New", "Create", new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "info", InsertionMode = InsertionMode.Replace }) </p> <div id="main"> <table> <tr> <th> @Html.DisplayNameFor(model => model.name) </th> <th>Action</th> </tr> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.name) </td> <td> @Ajax.ActionLink("Details", "Details", new{ id=item.id}, new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "info", InsertionMode = InsertionMode.Replace }) </td> </tr> } </table> </div> <div id="info"></div>
Create
View Page@model CrudMvc.Models.myTable @{ ViewBag.Title = "Create"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h2>Create</h2> @using (Html.BeginForm()) { @Html.ValidationSummary(true) <fieldset> <legend>myTable</legend> <div class="editor-label"> @Html.LabelFor(model => model.id) </div> <div class="editor-field"> @Html.EditorFor(model => model.id) @Html.ValidationMessageFor(model => model.id) </div> <div class="editor-label"> @Html.LabelFor(model => model.name) </div> <div class="editor-field"> @Html.EditorFor(model => model.name) @Html.ValidationMessageFor(model => model.name) </div> <p> <input type="submit" value="Create" /> </p> </fieldset> } <script> var form = $('#main'); $.ajax({ cache: false, async: true, type: "POST", url: form.attr('action'), data: form.serialize(), success: function (data) { alert(data); } }); </script> <div> @Html.ActionLink("Back to List", "Index") </div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") }