CODEWITHSUNDEEP
ajaxasp.net-mvcrazor
JAX
JAX

Reputation: 1620

Ajax helper in ASP.net MVC

I know that this question may not be fit for stack overflow. I've been searching for an example on how to use the ajax helper but most toturials have only gone through the helper and they have not provided any practical example. I already know how to make use of ajax the javascript way but just want to know how I can use the ajax helper that microsoft has provided.

Upvotes: 4

Views: 10083

Answers (2)

Anil Sharma
Anil Sharma

Reputation: 615

Ajax helper of ASP.NET MVC essentially provides Ajax functionality to your web applications. AJAX Helpers are used to create AJAX enabled elements like as Ajax enabled forms and links which performs request asynchronously. Using Ajax helper you can submit your HTML form using Ajax so that instead of refreshing the entire web page only a part of it can be refreshed. Additionally, you can also render action links that allow you to invoke action methods using Ajax. AJAX Helpers are extension methods of AJAXHelper class which exist in System.Web.Mvc.Ajax namespace.

AJAX-enabled link based on action/controller example:- Following example shows how to use AJAX action link using action and controller in Asp.Net MVC.

@Ajax.ActionLink("Fatch Data", "GetData", new AjaxOptions {UpdateTargetId = "Data-container", HttpMethod = "GET" })

Here is the html output of above code block.

Output:

<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#Data-container" href="/Home/GetData"> Fatch Data </a>

Do you know Unobtrusive AJAX in MVC?

The Unobtrusive Validation and AJAX support in ASP.NET MVC follow many best practices that enable Progressive Enhancement and are also super easy to use. The unobtrusive AJAX library (not the unobtrusive validation library) is admittedly a bit limited in functionality, but if it satisfies the requirements of the application you are writing, then by all means use it. And because the source code of it is in your app (it's JavaScript, after all), it's generally straightforward to make any updates or changes to it as you see fit.

Upvotes: 1

Brad Christie
Brad Christie

Reputation: 101614

To describe how this GitHUb branch works:

First, let's define an action we're going to request. To keep things simple, let's just make a very basic POST action:

//
// POST: /Home/Ajax
[HttpPost]
public PartialViewResult Ajax()
{
    // use partial view so we're not bringing the entire page's theme
    // back in the response. We're simply returning the content within
    // ~/Views/Home/Ajax.cshtml
    return PartialView();
}

Next, setup a destination for your content and give it an id (here I've named it "update-me"):

<div class="well" id="update-me">
  Click the button to see some AJAX content.
</div>

Moving on from there we setup the form. The below demonstrates the standard AJAX functionality, but you could bind your own functions to some of the events specified by AjaxOptions.

@using (Ajax.BeginForm("Ajax", new AjaxOptions {
    HttpMethod = "POST", // HttpPost
    InsertionMode = InsertionMode.Replace, // empty the target first
    UpdateTargetId = "update-me" // place content within #update-me
}))
{
    <button type="submit" class="btn btn-default">
        <i class="glyphicon glyphicon-refresh"></i>
        Click Me!
    </button>
}

And finally, we need to specify our script libraries responsible for most of the ["automatic"] wiring up of the form functionality:

<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

That's it. As you begin playing with it you'll find it's pretty simple to extend it. For example, if you wanted to show a "working" icon you could specify custom functions in the OnBegin and OnComplete properties.

Upvotes: 6

Related Questions