$.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!

AlexB · Accepted Answer · 2014-01-03 15:09:48Z

1

Have you tried this :

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

I used the same method and it is working.

edited Jan 3, 2014 at 15:09

AlexB

7,44412 gold badges61 silver badges76 bronze badges

answered Nov 5, 2009 at 9:21

Serdar

711 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

griegs · Accepted Answer · 2009-10-02 07:21:59Z

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.

Collectives™ on Stack Overflow

$.getJSON for asp.net mvc

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related