CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-3jquery-uijquery
NealR
NealR

Reputation: 10689

ASP MVC3 - Make second call to controller once jQuery autocomplete value selected

Below are the jQuery versions that I am referencing in my ASP MVC view

<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>

Using the autocomplete widget, I would like the form to fill out a separate text box based on the user's selection from the autocomplete list. On this page, the user will begin typing a bank name. Once the user selects which bank they need, another field by the name of Dynamics ID needs to be populated with the appropriate value. Here is the jQuery as it's written right now

$(function () {
    $("#BankNameAuto").autocomplete({
        source: '@Url.Action("GetBanks", "AgentTransmission")',
        minLength: 1,
        onComplete: function (data) {
            $.getJSON('@Url.Action("GetDynamicsId", "AgentTransmission")', data, function (result) {
                $('Dynamics').val(result);
            })
        }
    });
});

And here are the two controller methods that are called in the above jQuery

    //GET
    public JsonResult GetBanks(string term)
    {
        var banks = from c in db.BankListMaster.Where(n => n.BankName.Contains(term))
                        select c.BankName;

        banks = banks.Distinct();

        return Json(banks, JsonRequestBehavior.AllowGet);
    }

    //GET
    public JsonResult GetDynamicsId(string term)
    {
        var dynamics = from c in db.BankListMaster.Where(n => n.BankName.Equals(term))
                    select c.LinkRepsToDynamicsUniqueId;

        dynamics = dynamics.Distinct();

        return Json(dynamics, JsonRequestBehavior.AllowGet);
    }

Once the user has made a selection from the list, I wanted to be able to send back the ID value to that bank. That serves as the primary key for the BankListMaster table, of which BankName and DynamicsId are both fields. I'm still new to jQuery, however, so I may not be able to do this.

Right now, I've set a breakpoint in the first line of both controller methods. The GetBanks breakpoint fires everytime, however I cannot get the GetDynamicsId to fire at all.

EDIT

Since I'm only selecting the BankName field in the first query, I adjusted the GetDynamicsId method to use the bank name as the parameter.

Upvotes: 0

Views: 1015

Answers (1)

Chris Denning
Chris Denning

Reputation: 1032

I do something similar by handling the "select" event. It's not "onComplete" as you had in your example. Your code with this change would be:

$(function () {
    $("#BankNameAuto").autocomplete({
        source: '@Url.Action("GetBanks", "AgentTransmission")',
        minLength: 1,
        select: function (event, ui) {
            $.getJSON('@Url.Action("GetDynamicsId", "AgentTransmission")', { term: ui.item.value }, function (result) {
                $('Dynamics').val(result);
            })
        }
    });
});

Upvotes: 1

Related Questions