Mvc 3.0 Multi button on same view

 

Here I explain how handle each button click on same view. Suppose your view contain more than one button and you need to perform different operation on click on button

Here is my View which contain simple 4 button and 1 text box

   1:   

   2:  @{

   3:      ViewBag.Title = "Index";

   4:  }

   5:  <script type="text/javascript">

   6:      function SendButtoninfo(id) {        

   7:          var Url = '/Button/CallButton/' + $("#" + id).val();

   8:          $.getJSON(Url, null, function (jsondata) {

   9:   

  10:             $("#Name").val('Select Button' + jsondata.toString());

  11:   

  12:          });

  13:          

  14:      }

  15:  </script> 

  16:  <h2>Index</h2>

  17:  <table>

  18:  <tr><td>@Html.TextBox("Name") </td></tr>

  19:  <tr><td><input type="button" id='cmd1' value="1" onclick="javascript:SendButtoninfo(this.id);" />   </td></tr>

  20:  <tr><td><input type="button" id='cmd2' value="2" onclick="javascript:SendButtoninfo(this.id);" /> </td></tr>

  21:  <tr><td><input type="button" id='cmd3' value="3" onclick="javascript:SendButtoninfo(this.id);" /> </td></tr>

  22:  <tr><td><input type="button" id='cmd4' value="4" onclick="javascript:SendButtoninfo(this.id);" /> </td></tr>

  23:  </table>

 

Here is My Controller

 

   1:  using System;

   2:  using System.Collections.Generic;

   3:  using System.Linq;

   4:  using System.Web;

   5:  using System.Web.Mvc;

   6:   

   7:  namespace MvcApplication1.Controllers

   8:  {

   9:      public class ButtonController : Controller

  10:      {

  11:          //

  12:          // GET: /4Button/

  13:   

  14:          public ActionResult Index()

  15:          {

  16:              return View();

  17:          }

  18:   

  19:          public ActionResult CallButton(int id)

  20:          {

  21:              return Json(id, JsonRequestBehavior.AllowGet);  

  22:          }

  23:   

  24:      }

  25:  }

 

Output

 

[polldaddy poll=5657416]