How To Reload And Update Mvc View Automatically When Inputs Change

Updated date Dec 25, 2015

483.8k
17

In this article we will acquire how to mail data to controller without folio refresh in ASP.NET MVC using Ajax.BeginForm.

BackgroundPosting information to the server without whole postback or we tin can say without page refresh is very of import to relieve the server resources and make application faster. In ASP.NET MVC there are lot of options to reach this without writing lots of custom code.

Many forum post I read, ane common question was the difference between Html.BeginForm and Ajax.BeginForm when both are doing whole page refresh while posting data to the server and also seen lots of misleading answers, and so by considering above requirement I decided to write this article. So permit us see step by footstep .

Pace 1: Create an MVC application.

"Beginning", and so "All Programs" and select "Microsoft Visual Studio 2015".
"File", then "New" and click "Project" so select "ASP.Cyberspace Spider web Application Template", and so provide the Project a name as you wish and click on OK.
Choose MVC empty application choice and click on OK

Footstep two: Add model course.

Right click on Model folder in the created MVC application and add class named EmpModel and right the following lines of code as.

EmpModel.cs

using System.ComponentModel.DataAnnotations;
namespace AjaxBeginFormwithMVC.Models
{
public class EmpModel
{
[Required]
public string Proper noun { go ; set ; }
[Required]
public string Urban center { get ; gear up ; }
[Required]
public string Address { get ; set up ; }
}
}

Step 3: Add Home controller controller.

Right click on Controller folder in the created MVC application and add the controller grade as:

Now after selecting controller template, click on add button then the post-obit window appears,

Specify the controller name and click on add push, At present open up the HomeController.cs file and write the post-obit code into the Home controller course as:

HomeController.cs

using AjaxBeginFormwithMVC.Models;
using System.Spider web.Mvc;
namespace AjaxBeginFormwithMVC.Controllers
{
public class HomeController : Controller
{
[HttpGet]
public ActionResult EmployeeMaster()
{
return View();
}
[HttpPost]
public ActionResult EmployeeMaster(EmpModel obj)
{
ViewBag.Records ="Name : " + obj.Name + " Urban center: " + obj.City + " Addreess: " + obj.Address;
return PartialView( "EmployeeMaster" );
}
}
}

In the above code, we have added EmployeeMaster Action effect method and it returns the partial view named EmployeeMaster with input parameters value.

Step iv: Add View,

Add strongly typed view named EmployeeMaster from EmpModel class:

After clicking on add push button the view generated .

Step five: Add Reference of jquery.unobtrusive-ajax.

To work Ajax.BeginForm functionality properly we need to add together the reference of jquery.unobtrusive-ajax library, there are many ways to add the reference of jQuery library into our project. The following are some methods,

Using NuGet package manager, you tin install library and reference into the project.

Right click on created MVC project and observe Nuget Bundle manager pick,

Now the post-obit window volition appear and search for the jQuery unobtrusive ajax every bit,

Choose appropriate version and click on Install button. It will install jQuery UI library to your project and library script file get added into the script folder of the created project which you tin add reference into the projection,

Use CDN library provided by Microsoft, jQuery, Google or whatever other which requires active internet connectedness.
Download library using NuGet and reference into the projection.

The library will be expect like as follows later adding it in script folder.

To work Ajax.BeginForm functionality properly don't forget to add the reference of the following jQuery library as,

<script src= "~/Scripts/jquery-1.x.2.js" ></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js" ></script>

Afterwards adding necessary code, files and logic the EmployeeMaster.cshtml lawmaking will look like the following,

@model AjaxBeginFormwithMVC.Models.EmpModel
@{
ViewBag.Title ="www.compilemode.com" ;
}
<script src="~/Scripts/jquery-1.ten.two.js" ></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js" ></script>
<div id="divEmp" >
@using (Ajax.BeginForm( "EmployeeMaster" , "Home" , new AjaxOptions { HttpMethod = "POST" , UpdateTargetId = "divEmp" }))
{
@Html.AntiForgeryToken()
<divcourse = "class-horizontal" >
<hr />
@Html.ValidationSummary(true , "" , new { @ class = "text-danger" })
<divclass = "form-group" >
@Html.LabelFor(model => model.Name, htmlAttributes:new { @ course = "control-label col-md-2" })
<divgrade = "col-md-10" >
@Html.EditorFor(model => model.Proper noun,new { htmlAttributes = new { @ class = "form-control" } })
@Html.ValidationMessageFor(model => model.Name,"" , new { @ class = "text-danger" })
</div>
</div>
<divclass = "course-group" >
@Html.LabelFor(model => model.City, htmlAttributes:new { @ class = "control-characterization col-md-2" })
<divcourse = "col-md-10" >
@Html.EditorFor(model => model.City,new { htmlAttributes = new { @ course = "form-control" } })
@Html.ValidationMessageFor(model => model.Urban center,"" , new { @ class = "text-danger" })
</div>
</div>
<divclass = "form-group" >
@Html.LabelFor(model => model.Address, htmlAttributes:new { @ class = "control-characterization col-md-2" })
<divclass = "col-doc-10" >
@Html.EditorFor(model => model.Accost,new { htmlAttributes = new { @ class = "grade-command" } })
@Html.ValidationMessageFor(model => model.Address,"" , new { @ course = "text-danger" })
</div>
</div>
<divgrade = "class-group" >
<divclass = "col-md-offset-ii col-md-10" >
<input type="submit" value= "Relieve" class = "btn btn-master" />
</div>
</div>
<hour />
<divclass = "form-group" >
<divform = "col-md-offset-2 col-md-12 text-success" >
@ViewBag.Records
</div>
</div>
</div>
}
</div>
<script src="~/Scripts/jquery.validate.min.js" ></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js" ></script>

Now run the application and click on save push button without entering text in textbox, it volition burn down the validation as in the following,

From preceding example it is clear that validation also get fired. At present enter the proper details and click on salvage push button, information technology will laissez passer data to the controller asynchronously without whole page refresh as,