How To Use Ajax.BeginForm In ASP.NET MVC 5 App Using Razor View Engine

Sandip G. Patil
8y
22.2k
0
1

Blog

ajaxMVC.zip

Step 1

Create MVC app with the name ajaxMVC.

Step 2

Add the folder in the application with the name Images.

Step 3

Inside Images folder, add spinner.gif image file, which we are going to show as loading element during AJAX call

Step 4

In order to use Ajax.BeginForm, we need to install NuGet Package below.

Go to Package Manager console and use the command given below.

PM> Install-Package Microsoft.jQuery.Unobtrusive.Ajax

Below fig.1 demonstrates it

Step 5

Now, in your HomeController, add ShowTime() Method

Now, your Home Controller will look, as shown below.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Web;
using System.Web.Mvc;
namespace ajaxMVC.Controllers {
public class HomeController: Controller {
public ActionResult Index() {
return View();
}
public ActionResult About() {
ViewBag.Message = "Your application description page.";
return View();
}
public string ShowTime() {
Thread.Sleep(2000);
return DateTime.Now.ToLongTimeString();
}
public ActionResult Contact() {
ViewBag.Message = "Your contact page.";
return View();
}
}
}

Step 6

Now, in _Layout.cshtml, add the line given below.

@Scripts.Render("~/bundles/jqueryval")

Step 7

Comments in the code itself explains each and everything about the functionality in it.

The code snippet is given below for Index.cshtml.

@ {
ViewBag.Title = "Home Page";
}
@ * Below are script references included * @ < script src = "~/Scripts/jquery-1.10.2.js" > < /script> < script src = "~/Scripts/jquery.unobtrusive-ajax.min.js" > < /script> < h1 > Sandip Patil Code Snippets For Ajax.BeginForm Demonstration < /h1>
@ * In below div tag put Image which is going to display during Ajax Call Initially it is not displaying on page * @ < div id = "Loading"
style = "display:none" > @ * Here Image is used from Images folder * @ < img src = "~/Images/spinner.gif" / > < /div>
@ * In below div tag with id = "result"
where actual result is going to be displaying after successful completion of Ajax Call * @ < div id = "result" > < /div>
@ * In below Ajax.BeginForm Note LoadingElementId == "Loading"
for loading Spinner Image loader * @
@ * In below Ajax.BeginForm Note UpdateTargetId == "result"
where actual result is going to be displaying after successful completion of Ajax Call * @
@using(Ajax.BeginForm("ShowTime", "Home", FormMethod.Post, new AjaxOptions {
OnSuccess = "Clear", LoadingElementId = "Loading", UpdateTargetId = "result", InsertionMode = InsertionMode.Replace
})) {
@ * Below text box with id = "txtBoxInitial"
contains initial text = SandipPatilApp * @ < input type = "text"
id = "txtBoxInitial"
value = "SandipPatilApp" / > < input type = "submit"
id = "myBtn"
value = "ShowTime" / >
}
@ * Now Note OnSuccess = "Clear" in above Ajax.BeginForm this Clear
function is getting called once Ajax call is over successfully * @ < script type = "text/javascript" > function Clear() {
@ * This will clear Textbox with id = "txtBoxInitial"
once Ajax call is over successfully * @
document.getElementById("txtBoxInitial").value = "";
} < /script>

Step 8

Now make sure that in Web.config, the lines given below are included.

<appSettings>
<add key="webpages:Version" value="3.0.0.0" />
<add key="webpages:Enabled" value="false" />
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

Step 9

Now, run the Application and you will find it, as shown below in Fig.2

Now, click on ShowTime button.

Once you click it, you will find it as shown below in Fig.3

Now, after a successful AJAX call, it will clear the textbox given above and show the result in UpdateTargetId as current DateTime.Now.ToLongTimeString();

Fig.4 given below demonstrates it.