Call controller method on button click

[marbleblue]

Hi,

I'm currently playing with aspnet webforms with jquery (via kendo mobile). I have the following setup below. In the aspx page,
I need to call the 'Book' method in a 'controller' on a button click. I'm guessing I will need to use $.ajax? or is there another way via kendo dataSource? any sample code of the 'ajax' call would really help as i'm at the earliest stages of learning this stuff,

Kind regards.

//shift.aspx
function showShiftDetailView(e) {
        var view = e.view;

        sds.fetch(function () {
            item = sds.get(view.params.id);
            view.scrollerContent.html(shiftItemDetailTemplate(item));
            kendo.mobile.init(view.content);
        });
       
       $('<a data-role="button" id="bookbutton">Book</a>').insertBefore('#shiftdetaillistview');
       $('#bookbutton').click(function () {
                // **** 1. call book function
                BookShift(item.id)        
            });
        }
}

function BookShift(id) {
   *** 2. call 'Book' method with parameter here and get response**
  $.ajax ?
}

//shiftcontroller.cs
// CONTROLLER
 public class ShiftController : ApiController
    {
        private Data.Shift _context = new Data.Shift();
        HttpRequest _request = HttpContext.Current.Request;

        // WebAPI will respond to an HTTP GET with this method
        public Model.Response Get()
        {
            // the the take and skip parameters off of the incoming request
            int take = _request["take"] == null ? 10 : int.Parse(_request["take"]);
            int skip = _request["skip"] == null ? 0 : int.Parse(_request["skip"]);

            var entries = (from System.Data.DataRow r in _context.GetData().Rows
                           select new Model.Shift(r)).Skip(skip).Take(take).ToArray();

            return new Model.Response(entries, _context.GetData().Rows.Count);
        }

// **** 3.  I want to call this from a button click *** //
        public Model.Response Book(string tempShiftPlanid)
        {
            IPoint.Shifts.Shift shift = new IPoint.Shifts.Shift();
            shift.id =  id;
            return new Model.Response(shift.BookShift());
        }
    }

// Response.cs
public class Response
{
        public string DBData { get; set; }

        public Response(string dbdata)
        {
            this.DBData =dbdata;
        }
}

[Petyo]

Hello,

Your question is not directly related to Kendo UI Mobile. I would like to suggest that you check these stack overflow discussions:

http://stackoverflow.com/questions/3392345/using-jquery-ajax-to-call-asp-net-function-in-control-code-behind-instead-of-pag

http://stackoverflow.com/questions/6119098/how-to-call-controller-actions-using-jquery-in-asp-net-mvc

Or any of the google results of this search query.

As a side note, I would like to direct you to this demo for the correct way to handle button widget click events. 

Kind regards,
Petyo
the Telerik team