CODEWITHSUNDEEP
jqueryajaxasp.net-mvcjsonjquery-ui-autocomplete
tett
tett

Reputation: 605

How to get the value of DropDownList and pass it into AJAX call in MVC5?

I have an MVC5 app, and I have a model which is defined like this:

public class Request
{
    ...

    [ForeignKey("State")]
    public int StateID { get; set; }

    public virtual State State { get; set; }

    public string ServiceName { get; set; }
}

And my State model is defined as following:

public class State
{
    public int StateID { get; set; }
    public string StateCode { get; set; }
    public string StateName { get; set; }
}

And in my view that I'm working I have something like this:

        <div class="form-group">
            @Html.LabelFor(model => model.StateID, "State", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("StateID", null, "Please select a state", htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.StateID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ServiceName, "Service", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ServiceName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ServiceName, "", new { @class = "text-danger" })
            </div>
        </div>

And the point is that I want to insert autocomplete into my input box for ServiceName, and for it I have written JsonResult method defined as following:

    public JsonResult GetBusinessDesriptions(int state, string term)
    {
        var results = db.Users.OfType<Business>().Where(b => b.StateID == state && (term == null || b.Description.ToLower().Contains(term.ToLower()))).Select(x => new { id = x.StateID, value = x.Description }).Take(5).ToList();

        return Json(results, JsonRequestBehavior.AllowGet);
    }

Then, I want to call it in my JS using AJAX, but I don't know how to achieve it. Simply, I want to pass the StateID selected by user to the AJAX call and to the call to GetBusinessDescription method.

I have something like this, but it doesn't work, cause I don't know how to pass StateID selected in the view, so it reads only the businesses in the selected state.

$("#Service-Name").autocomplete({
    source: "/Home/GetBusinessDesriptions",
    minLength: 2,
    select: function (event, ui) {
        $("#Service-Name").val(ui.item.value);
        $("#Service-Name").text(ui.item.value);
    }
});

So, how can I sent the value of StateID once the user selects in my view to the AJAX call and to my GetBusinessDescription method in order filter only the businesses in the selected state?

Upvotes: 0

Views: 1029

Answers (1)

SSA
SSA

Reputation: 5493

In source options use ajax and pass the extra parameter, for example. Here StateId is the id of state dropdownlist.

$("#Service-Name").autocomplete({
    source: function( request, response ) {
        $.ajax({
          url: "/Home/GetBusinessDesriptions",
          dataType: "jsonp",
          data: {
            state:$("#StateID").val(),
            term: request.term
          },
          success: function( data ) {
            response( data );
          }
        });
      },
    minLength: 2,
    select: function (event, ui) {
        $("#Service-Name").val(ui.item.value);
        $("#Service-Name").text(ui.item.value);
    }
});

Upvotes: 2

Related Questions