Grid View for ASP.NET MVC - How to call an Action method on a custom button click

This example demonstrates how to call an Action method when a custom button is clicked and obtain the clicked row's key value in the Action.

1. Add a custom button to the CustomButtons collection.

   settings.CommandColumn.CustomButtons.Add(new GridViewCommandColumnCustomButton() { ID = "btnGetKey", Text = "Get Row Key" });

2. Use the GridViewClientSideEvents.CustomButtonClick property to assign a JavaScript function to the CustomButtonClick event.

   Call the Url.Action method to generate a URL to an action method and send the resulting string to the CustomButtonClick function as a parameter.

   settings.ClientSideEvents.CustomButtonClick =
       string.Format("function(s, e) {{ CustomButtonClick(s, e, '{0}'); }}", Url.Action("About", "Home"));

3. Implement the CustomButtonClick JavaScript function.

   • Use the GetRowKey method to get the clicked row's key value.
   • Add the key value parameter to the specified destination URL.
   • Specify the window.location.href property to navigate to the destination URL.

       function CustomButtonClick(s, e, url) {
           var key = s.GetRowKey(e.visibleIndex);
           if (e.buttonID === "btnGetKey") {
               var destUrl = url + "/" + key;
               window.location.href = destUrl;
           }
       }

4. Use the Action's parameter to retrieve the passed key value.

   public ActionResult About(int id) { 
       ViewData["Key"] = id; 
       return View(); 
   } 

Files to Review

• GridViewPartial.cshtml (VB: GridViewPartial.vbhtml)
• Index.cshtml (VB: Index.vbhtml)
• HomeController.cs (VB: HomeController.vb)
• About.cshtml (VB: About.vbhtml)