$.getJSON for asp.net mvc

Question

I am trying to create dropdown list when selecting item from the other dropdown list. I use $.getJSON to get data from my action in controller here is my code. JQuery Code looks like this.

      $(function() {
      $("#GroupName").change(function() {
          //alert("Test");
          var str = "";
          $("select option:selected").each(function() {
              str = $(this).val();
          });
          var url = '<%= Url.Action("GetMetrics", "Groups") %>';
          $.getJSON(url, { id : str }, function(data) { $("#metrics").fillSelect(data); });
      })
      //        .change();

  });

My view looks like this.

<p><label for="GroupId">Group</label><br />
 <%= Html.DropDownList("GroupName", "")%>    
<span></span>
</p>

<p><label for="GroupId">Group</label><br />
 <select id="metrics" >
</select>
<span></span>
</p>

And My Action:

public ActionResult GetMetrics(string id)
{
    int cId = Convert.ToInt16(id);
    //var group = Group.GetGroupByID(cId);
    List<Metric> metrics = Metric.GetMetrics(cId);

    return Json(metrics);
}

Here is my routing:

    routes.MapRoute(
        "Default",                                              // Route name
        "{controller}/{action}/{id}",                           // URL with parameters
        new { controller = "Home", action = "Index", id = "" }  // Parameter defaults
    );

Problem is I can't pass the parameter from Jquery and doesn't add listitem in my target dropdown list which is metrics. Please help!

Answer 1

I don't know if this will answer your question and I don't have time to go in depth so here is some code I wrote which posts back using jQuery when a select list changes and brings back another select list.

Very simple example. Apologies if this is not what you were asking.

jQuery Code in the view;

<script>

    $(document).ready(function() {
        $("#selSegment").change(function() {
            if ($("#selSegment").val() != "") {
                $.post("/Home/jQueryGetCoverTypes", { segment: $("#selSegment").val() }, function(retHTML) {
                    document.getElementById("coverSelector").innerHTML = retHTML;
                });
            }
            else {
                document.getElementById("coverSelector").innerHTML = "";
            }
        });
    });
</script>

Select control with associated div for second select list;

        <tr>
            <td>
                <select id="selSegment">
                    <option value="">Please select</option>
                    <option value="combination">Combination Hospital and Extras Cover</option>
                    <option value="hospital">Hospital Cover</option>
                    <option value="extras">Extras Cover</option>
                    <option value="mix">Mix and Match Hospitals and Extras Cover</option>
                </select>
            </td>
        </tr>
        <tr>
            <td id="coverSelector">

            </td>

My controller code;

public ActionResult jQueryGetCoverTypes(string segment) { List items = new List();

    for(int t = 0; t <= 4; t++)
        items.Add(segment + " " + t.ToString());

    if (string.IsNullOrEmpty(segment))
        return PartialView("CoverSelector", new List<string>{ "Please select a cover type" });

    return PartialView("CoverSelector", items);
}

Hope this helps you.

Answer 2

Have you tried this :

var url = '<%= Url.Action("GetMetrics", "Groups") %>' + '/' + str;
$.getJSON(url, function(data) { $("#metrics").fillSelect(data); });

i use the same method, it is working.