调用javascript函数并传递参数

Question

I'm using a Kendo Grid and I'm trying to create a custom column template command to call a JavaScript function that does an ajax call to my mvc controller passing two parameters so that I can do some other stuff in there.

This is the grid:

@(Html.Kendo().Grid<iPlan.Syspro.Beekman.Portal.Agents.Models.SalesOrderDetailViewModel>()
.Name("Details")
.HtmlAttributes(new {@style = "width:80vw"})
.Columns(columns => {
    columns.Bound(c => c.Agent).Width(100);
    columns.Bound(c => c.SalesOrder).Width(150);
    columns.Bound(c => c.Line).Width(60);
    columns.Bound(c => c.StockCode).Width(150);
    columns.Bound(c => c.SerialNumber).Width(150);
    columns.Bound(c => c.DerivativeDescription).Width(150);
    columns.Bound(c => c.StockCodeDescription).Width(150);
    columns.Bound(c => c.OrderQty).Width(150);
    columns.Bound(c => c.OnBackorder).Width(150);
    columns.Bound(c => c.QtyAvailable).Width(150);
    columns.Bound(c => c.ShippedQuantity).Width(150);
    columns.Bound(c => c.SalesPrice).Width(150);
    columns.Bound(c => c.AlternativeSerial).Width(150);
    columns.Bound(c => c.AlternativeSerialReason).Width(150);
    columns.Bound(c => c.VinNr).Width(150);
    columns.Bound(c => c.DealerOrderNr).Width(150);
    columns.Bound(c => c.WipNr).Width(150); 
    columns.Bound(c => c.GrnNr).Width(150);
    columns.Bound(c => c.AsnNr).Width(150);
    columns.Bound(c => c.DeliveryNoteNr).Width(150);  
    columns.Command(command => {command.Edit(); command.Destroy();}).Width(172);
    columns.Template(@<text></text>).Width(150).ClientTemplate("<a class='k-button k-button-       icontext k-grid-edit' href='javascript:' onclick='approve()'><span class='k-icon k-edit'>  </span>Approve</a>").Title("Action");      
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Sortable()
.Scrollable()
.Groupable()
.Pageable(pageable => pageable
    .Refresh(true)
    .PageSizes(true)
    .ButtonCount(5))
.DataSource(dataSource => dataSource
    .Ajax()
    .Events(events => events.Error("error_handler"))
    .Read(read => read.Action("SalesOrdersDetail_Read", "Inbox").Data("getSalesOrder"))
    .Update(update => update.Action("SalesOrdersDetail_Update","InboxAgent"))
    .Destroy(destroy => destroy.Action("SalesOrdersDetail_Destroy","InboxAgent"))
    .Create(create => create.Action("SalesOrdersDetail_Create","InboxAgent"))
    .Model(model => {
        model.Id(p => p.SalesOrder);
        model.Field(p => p.StockCode).Editable(false);
        model.Field(p => p.SerialNumber).Editable(false);
        model.Field(p => p.DerivativeDescription).Editable(false);
        model.Field(p => p.StockCodeDescription).Editable(false);
        model.Field(p => p.SalesOrder).Editable(false);            
        model.Field(p => p.Agent).Editable(false);
        model.Field(p => p.Line).Editable(false);
        model.Field(p => p.OrderQty).Editable(false);
        model.Field(p => p.OnBackorder).Editable(false);
        model.Field(p => p.QtyAvailable).Editable(false);
        model.Field(p => p.ShippedQuantity).Editable(false);
    })        
))

Here is the JavaScript function I'm trying to call:

  <script type="text/javascript">
  function approve(e) {
    debugger;        
    console.log("index function hit");
    //var data = $("#Details").data("kendoGrid").dataSource.data();
    //var dataRet = data.indexOf(dataItem);
    $.ajax({
        type: 'POST',
        url: href="/Inbox/SalesOrderDetailApprove" + "?SalesOrder=" + e.SalesOrder + "&Line=" + e.Line,
        dataType: 'json',
        data: {} ,
        success: function (response) { }
    });
}

Now, at the moment with this code, it hits the JavaScript method, but it doesn't pass through my data. This is the method in the controller it needs to pass the data to. So the problems that needs to be solved is this:

1. The data needs to be passed correctly to the JavaScript method.
2. As soon as I click on my button in the template column, the kendo grid goes into edit mode and I need to click the button again to get it out of edit mode.
3. The event isn't firing once, it hits the method when the page is loaded.
4. Another issue is that I installed resharper recently (trial). I uninstalled resharper and from there on out my intellisense on all the razor parts in the views (cshtml) is broken. How do I fix this?

public ActionResult SalesOrderDetailApprove( string  SalesOrder, string Line) {
    try {
        return Json("", JsonRequestBehavior.AllowGet);
    } catch (Exception) {
        throw;
    }
}

Answer 1

Try this code to call the function

function approve(e) {
  var postUrl = '@Url.Action("SalesOrderDetailApprove", "Inbox")';
  var EmployeeId = { SalesOrder: e.SalesOrder, Line:  e.Line};
    $.ajax({
            url: postUrl,
             data: EmployeeId,
             type: 'POST',
             dataType: 'json',
             success: function (response) { }
      });
 }

This will work for you.