How to call an MVC Action using only JavaScript?

Question

I have this Kendo UI dropdownlist with a select event that is handled by a JavaScript function.

I need to call an action result from a controller that runs a LINQ query to populate a Kendo UI grid on my page. My problem is the only way I can find to handle this even is with JavaScript and I have been unable to figure out how to call my action result from my controller from the JavaScript event function.

This is what the DropDownList looks like...

@(Html.Kendo().DropDownList()
    .Name("Options")
    .DataTextField("Text")
    .DataValueField("Value")
        .BindTo(new List<SelectListItem>() {
        new SelectListItem() {
            Text = "Policies Not Archived",
            Value = "1"
        },
        new SelectListItem() {
            Text = "View All Policies",
            Value = "2"
        },
        new SelectListItem() {
            Text = "Filter Policies",
            Value = "3"   
        }
    })
    .Events(e => 
    {
        e.Select("select");
    })
)

and my JavaScript event handler that needs to call the action result

function select(e) {

}

and depending on the selection an ActionResult like this,

public ActionResult ViewAllPolicies()
{
    //mycode
}

You need to use AJAX.

SLaks
– SLaks

2013-03-01 16:52:04 +00:00
Commented Mar 1, 2013 at 16:52 — SLaks
– SLaks, Commented Mar 1, 2013 at 16:52

AaronLS · Accepted Answer · 2013-03-01 17:54:45Z

2

see this post

var url = '@Url.Action("ViewAllPolicies","YourController")';
    $.ajax({ url: url, success: DataRetrieved, type: 'POST', dataType: 'json' });

in controller

public ActionResult ViewAllPolicies()
{
    //Should return json format
}

url – this is the URL where request is sent. In my case there is controller called contacts and it has action calles ListPartiesByNameStart(). This action method takes parameter nameStart (first letter of person or company). success – this is the JavaScript function that handles retrieved data. You can write there also anonymous function but I suggest you to use functions with names because otherwise your code may get messy when functions grow. type – this is the type of request. It is either GET or POST. I suggest you to use POST because GET requests in JSON format are forbidden by ASP.NET MVC by default (I will show you later how to turn on GET requests to JSON returning actions). dataType – this is the data format that is expected to be returned by server. If you don’t assign it to value then returned result is handled as string. If you set it to json then jQuery constructs you JavaScript object tree that corresponds to JSON retrieved from server.

edited Mar 1, 2013 at 17:54

AaronLS

38.6k24 gold badges151 silver badges217 bronze badges

answered Mar 1, 2013 at 16:56

user1968030

Sign up to request clarification or add additional context in comments.

2 Comments

AaronLS Over a year ago

@rae1n Indeed he is and it works just fine. The *.cshtml file will executer @Url.Action and then the line becomes var url = '/YourControllerController/ViewAllPolicies/' so by the time the page is rendered server side and delivered to the client, the C# has been resolved and all that is left is a string. Note that when you name the controller, you don't usually put the "controller" in the Url.Action call, so it'd be "Your" instead of "YourController".

rae1 Over a year ago

@AaronLS I wasn't referring to that (since I used the same syntax in my answer). I meant he had no separation between his JavaScript code to define the URL and the Controller definition on the server side, which he fixed by including the 'in controller' prompt right before it.

AaronLS · Accepted Answer · 2013-03-01 18:08:47Z

Instead of returning json, you can also return a PartialView and in the .done function grab an element and replace it with the results from the partial view. PartialView actions basically return a fragment of HTML, and so you can just stuff that anywhere you want on the page:

$.ajax({
        url: urlToPartialViewAction,
        type: 'POST',
        dataType: 'JSON',
        data: '123'
    })
    .done(function (result) {
       $('#someDivPlaceholder').replaceWith(result);        
    });

You could have something like a link or grey div and wire up to it's click event and then call this, the link might say "View Receipt" and when you click it you call an action that returns a partial view with the receipt, and so when they click it the div/link is replaced with the result. Kind of like the "View More Comments" links you see on social sites.

Note that you can't have a partial view by itself, it must be called through an action

public PartialViewResult _GetReceipt(string id)
{
   ReceiptViewModel vm = //query for receipt data
   return PartialView(vm);//render partial view and return html fragment
}

rae1 · Accepted Answer · 2013-03-01 17:45:58Z

1

Once the select function executes, you need to make an AJAX call back to your Controller. You can use jQuery.ajax() (a wrapper for the most common AJAX operations) in the select function,

function select(e) {
    var url = '@Url.Action("ViewAllPolicies", "PolicyController")';
    var selectedPolicy = $('#Options').val(); // The option selected

    $.ajax({
        url: url,
        type: 'POST',
        dataType: 'JSON',
        data: selectedPolicy
    })
    .done(function (data) {
        // Display the data back from you Controller
    });
}

You can look at the Kendo site for more info on how the DropDownList works.

answered Mar 1, 2013 at 17:45

rae1

6,1425 gold badges29 silver badges49 bronze badges

Collectives™ on Stack Overflow

How to call an MVC Action using only JavaScript?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related