How to pass 2 parameters through $.getJson in MVC?

Question

I am doing my application in MVC. I did cascading dropdownlist in list . While selecting the value from dropdown i passed the value by $.getJson() to the controller. I am passing one id to the controller. My problem is i need to pass 2 id's to the controller. Is it possible to send 2 ids to the controller?

My View page is

 <div>
               @Html.DropDownList("Business", ViewBag.CategoryID as SelectList ,"Select the Business Category", new { id = "Business" })
           </div>
           <div>
               <label>Select the Service Type</label>
               @*<select id="Buname" name="buname" style="width:150px"></select>*@
               @Html.DropDownList("Service",  ViewBag.Service as SelectList,"Select", new { id = "Service", name ="buname"})
           </div>
           <div>
               <label> Select the Location</label>
               <select id="Location" name="location" style="width:150px"></select>
           </div>
           <div>
               <label> Select the Location</label>
               <select id="Employee" name="employee" style="width:150px"></select>
           </div> 

<script type="text/javascript">
      $(function () {

          $('#Business').change(function () {

              $.getJSON('/Appt/Categories/' + $('#Business').val(), function (data) {

                  var items = '<option> Any Hospital</option>'
                  $.each(data, function (i, Service) {
                      debugger;
                      items += "<option value='" + Service.Value + "'>" + Service.Text +
                          "</option>";
                  });

                  $("#Service").html(items);

              });


          });

          $('#Service').change(function () {

              $.getJSON('/Appt/Location/' + $('#Service').val(), function (data) {

                  var items = '<option> Any Location </option>';
                  $.each(data, function (i, location) {

                      items += "<option value='" + location.Value + "'>" + location.Text +
                          "</option>";
                  });

                  $("#Location").html(items);

              });

          });

          $('#Location').change(function () {

              $.getJSON('/Appt/Employee/' + $('#Location').val(),  function (data) {
                  var items = '<option> Any Employee </option>';
                  $.each(data, function (i, employee) {

                      items += "<option value='" + employee.Value + "'>" + employee.Text +
                          "</option>";
                  });

                  $("#Employee").html(items);
                  $("Service").html(items);


              });
          });

      });


    </script>

My Controller code is

public ActionResult WaitingList()
        {
            SYTEntities ca = new SYTEntities();
            ViewBag.CategoryId = new SelectList(ca.BusinessCategories.ToList(), "CategoryId", "CategoryName");
            ViewBag.Service = new SelectList(ca.tblBusinessCategories.ToList(), "BusinessID", "BusinessName");
            return View();
        }

 public JsonResult Categories(int id)
        {
            SYTEntities db = new SYTEntities();
            var business = from s in db.tblBusinessCategories
                           where s.CategoryId == id
                           select s;
            return Json(new SelectList(business.ToArray(),"BusinessID", "BusinessName"), JsonRequestBehavior.AllowGet);
        }
  public JsonResult Location(int id)
        {


            SYTEntities db = new SYTEntities();
            var location = from s in db.tblBusinessLocations
                           where s.BusinessID == id

                           join loc in db.tblLocations
                            on s.LocID equals loc.LocationId
                           select loc;



            return Json(new SelectList(location.ToArray(), "LocationId", "LocationName"), JsonRequestBehavior.AllowGet);

        }
        public JsonResult Employee(int id)
        {

            SYTEntities db = new SYTEntities();
            var emp = from s in db.Employees
                      where s.LocationId == id && s.BusinessID == 91
                      select s;
            return Json(new SelectList(emp.ToArray(), "EmpId", "EmpName"), JsonRequestBehavior.AllowGet);
        }

In public JsonResult Employee(int id) i need to pass ('#Service') value. Is it possible to do? Can anyone please help me?

Answer 1

You can pass as many values as you want using the data parameter of jQuery.getJSON

var url = '@Url.Action("Categories", "Appt")'; // don't hard code your urls!
$.getJSON(url, { id: $('#Business').val(), otherProperty: anotherValue }, function (data) {

Answer 2

Yes you just need to add one more parameter to the Controller Action as below.

 public JsonResult Categories(int id, int id2)
        {
            SYTEntities db = new SYTEntities();
            var business = from s in db.tblBusinessCategories
                           where s.CategoryId == id
                           select s;
            return Json(new SelectList(business.ToArray(),"BusinessID", "BusinessName"), JsonRequestBehavior.AllowGet);
        }

and the below change in you View

$.getJSON('/Appt/Categories/' + $('#Business').val(), { id2: ('#otherId2').val() }, function (data) {
        var items = '<option> Any Hospital</option>'
        $.each(data, function (i, Service) {
            debugger;
            items += "<option value='" + Service.Value + "'>" + Service.Text +
                "</option>";
        });
        $("#Service").html(items);
    });