Hi, recently I was working on a project in MVC. I had to post a form using Ajax to avoid page postback.
I have demonstrated this by an example. Let’s see the code to implement Ajax.BeginForm in an MVC application.
Ajax.BeginForm in MVC
Nowadays users don’t want to see a page refresh and web technologies are smart enough to handle this page refresh while posting data to the server.
So, you want to post data in MVC and don’t want to refresh your web page. Good.
Ideally, there are 2 ways to achieve this. Either you write traditional JQuery function and call /{controllername}/{actionmethod} or you can use Ajax.BeginForm.
Ajax.BeginForm with an example.
Create an MVC application in Visual studio. Add a controller.
Write a piece of code in your Action method.
public class UserController : Controller { // // GET: /User/ public ActionResult Index() { return View(); } [HttpPost] public ActionResult Index(string name) { ViewBag.Message = “Hello “ + name; return View(); } } |
Add View in your project (Read this blog to know more about View – View in MVC).
Add below scripts at the top of View page –
<script src=”~/Scripts/jquery-1.8.2.js”></script> <script src=”~/Scripts/jquery.unobtrusive-ajax.js”></script> |
Add Below 2 scripts on the bottom of the view page
<script src=”~/Scripts/jquery.validate.min.js”></script> <script src=”~/Scripts/jquery.validate.unobtrusive.min.js”></script> |
Ajax.BeginForm accepts Action method, Controller name, Ajax Options as parameter.
Please see below code.
<div id=”MainDiv”> <h2>Index</h2> @using (Ajax.BeginForm(“Index”, “User”, new AjaxOptions { HttpMethod = “POST”, UpdateTargetId = “MainDiv”, LoadingElementId = “progressBar”, OnSuccess = “OnSuccess”, OnFailure = “OnFailure” })) { <input type=”text” id=”txtName” name=”name” /> <input type=”submit” id=”btnSubmit” value=”Say Hello” /> } @if (ViewBag.Message != null) { @ViewBag.Message } </div> |
Write OnSuccess and OnFailure functions –
<script> function OnSuccess(response) { $(“#btnSubmit”).html(“Please Wait…”); $(“#btnSubmit”).prop(“disabled”, false); } function OnFailure(response) { $(“#btnSubmit”).html(“Submit”); $(“#btnSubmit”).removeAttr(‘disabled’); } </script> |
if you want to show some loader on the page then you can use the ajaxStart and ajaxStop function to achieve this.
<script> $(document).ajaxStart(function () { $(‘#progressBar’).show(); }); $(document).ajaxStop(function () { $(‘#progressBar’).hide(); }); </script> |
Div with ajax loader image to show in progress image.
<div id=”progressBar” class=”myModal”> <img src=”~/Content/ajax-loader.gif” /> </div> |
Below is the complete code in View page (index.cshtml)
@{ ViewBag.Title = “Index”; } <h2>Index</h2> <script src=”~/Scripts/jquery-1.8.2.js”></script> <script src=”~/Scripts/jquery.unobtrusive-ajax.js”></script> <div id=”MainDiv”> <h2>Index</h2> @using (Ajax.BeginForm(“Index”, “User”, new AjaxOptions { HttpMethod = “POST”, UpdateTargetId = “MainDiv”, LoadingElementId = “progressBar”, OnSuccess = “OnSuccess”, OnFailure = “OnFailure” })) { <input type=”text” id=”txtName” name=”name” /> <input type=”submit” id=”btnSubmit” value=”Say Hello” /> } @if (ViewBag.Message != null) { @ViewBag.Message } </div> <script> $(document).ajaxStart(function () { $(‘#progressBar’).show(); }); $(document).ajaxStop(function () { $(‘#progressBar’).hide(); }); </script> <script> function OnSuccess(response) { $(“#btnSubmit”).html(“Please Wait…”); $(“#btnSubmit”).prop(“disabled”, false); } function OnFailure(response) { $(“#btnSubmit”).html(“Submit”); $(“#btnSubmit”).removeAttr(‘disabled’); } </script> <div id=”progressBar” class=”myModal”> <img src=”~/Content/ajax-loader.gif” /> </div> <script src=”~/Scripts/jquery.validate.min.js”></script> <script src=”~/Scripts/jquery.validate.unobtrusive.min.js”></script> |
Error – Ajax.BeginForm shows a blank page when clicking on Ajax link
Recently I was facing an issue while working with Ajax.BeginForm.
Whenever I use a view without a Layout page my Ajax works fine, but same code doesn’t work when I use the same view with a Layout page.
Resolution – To overcome this issue return PartialView() instead of return View()
Below code doesn’t work for me, it returns blank page when I click on submit button.
[HttpPost] public ActionResult Login(UsersModel userModel, string returnURL = “”) { //Write come code here return View(userModel); } |
Changing return View() to return PartialView() works for me.
[HttpPost] public ActionResult Login(UsersModel userModel, string returnURL = “”) { //Write come code here return PartialView(userModel); } |
You may like other blogs –
MVC Tutorial
Web API Tutorial
Is Angular JS different from Angular?
Interview Questions and Answers Series –
MVC Interview Questions and Answers
Web API interview questions and answers
