Passing Multiple Parameters with a Detail Action Button (AJAX)

[Jennifer]

Hello,

I would like to use the ASP.NET MVC Kendo UI Grid to render a list of records that have a "Detail" button for each record (similar to this look: https://demos.telerik.com/aspnet-mvc/grid/custom-command).

I am currently using an AJAX-bound grid. I need to pass two values to the "Details" controller. Here is what I have so far:

.Columns( c=>
{
  c.Bound(c => personId);
  c.Bound(c => positionId);
})
.DataSource(d => d
  .Ajax()
  .Read(r => r.Action("GetPersons", "Home"))
)

 

However, the business logic in our application requires two values passed to the "Details" controller (see below).

1.
[HttpGet]
     public ActionResult Details(int personId, int positionId)
2.{
3.  Person person = Person.GetPerson(personId, positionId, myConnection);
4.  return View(person);
5.}

[Viktor Tachev]

Hi Jennifer,

The example you are referring to opens the dialog window via JavaScript. The showDetails method that shows the dialog retrieves the entire Grid dataItem. Thus, all fields for the respective row can be accessed there.

You can use similar approach and attach a click handler for the custom command. In the handler get the data item and the relevant fields. Then you can create a $.ajax request that will call the server-side action and pass the data as to it. 

The showDetails method would look similar to this:

function showDetails(e) {
    e.preventDefault();

    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

    personId = dataItem.personId;
    positionId = dataItem.positionId;

    // additional custom code
}

The stackoverflow thread below illustrates how to call a server action via JavaScript:

• https://stackoverflow.com/a/8952978

Give the approach a try and let me know how it works for you.


Regards,
Viktor Tachev
Progress Telerik