Passing Multiple Parameters with a Detail Action Button (AJAX)

2 posts, 0 answers
  1. Jennifer
    Jennifer avatar
    4 posts
    Member since:
    Oct 2015

    Posted 31 Jan 2018 Link to this post

    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);

     

      // Want to use a "Details" button to pass personId and positionId to HomeController/Details/{personId}/{positionId}

      c.Command( c => cmd.Custom("Details"))

    })
    .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.}
  2.
  3. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2480 posts

    Posted 01 Feb 2018 Link to this post

    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:


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


    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top