Call a server side MVC action on the click of a Kendo UI button

Water Cooler v2 picture Water Cooler v2 · Nov 26, 2013 · Viewed 22.5k times · Source

I just download a trial version of v2013.3.1119.440 of the Kendo UI wrappers for ASP.NET MVC. I see a new Kendo.Mvc.UI.Fluent.ButtonBuilder wrapper in this version that wasn't in the version I had downloaded just 20 days ago on another PC.

The said wrapper represents a button.

I can't see a way to directly wire this Kendo.Mvc.UI.Fluent.ButtonBuilder wrapper with a server side MVC action. How do I do that?

I do see the Events method on the ButtonBuilder class, which accepts a Action<ButtonEventBuilder> events. In the ButtonEventBuilder, I see another method called Click, which has two overloads, but both are for wiring client side event handlers of the button.

I don't see a way to directly wire up a server side call-back/post-back with the button click.

Am I missing something? Is the only way to do it the manual way of firing the server side post back or call back from a JavaScript function?

Answer

Matt Millican picture Matt Millican · Nov 26, 2013

The Button is new in the latest release of Kendo UI (last week). It doesn't directly support what you're looking for, but something similar could be accomplished like this:

@(Html.Kendo().Button()
    .Name("textButton")
    .Content("Text button")
    .HtmlAttributes( new {type = "button"} )
    .Events(ev => ev.Click("onClick")))

Then a JS function similar to this:

function onClick(){
    $.ajax({
        url: '/controller/action'
        data: { // data here }
    }).done(function(result){
        // do something with the result
    }).fail(function() { // handle failure });
}

More info can be found in their demo site: http://demos.kendoui.com/web/button/events.html