在MVC Razor视图中将自动完成类型文本框与选定的下拉列表选项绑定

Question

Hi I have to make an auto-complete type textbox which on typing any letter searches the database and displays similarly typed combinations.

I was able to make it using jQuery, but now I want to bind the results in the textbox based on the previously selected values from two drop down lists. I have a dropdownlist State and another is City . Both dropdown lists are cascading. Now the AutoComplete type Textbox should only display results based on the selected StateId and CityId .

View

 <div class="col-md-6 col-sm-6 col-xs-12 ">
    <label>State<span class="error">*</span></label>
    @Html.DropDownList("StateId", (IEnumerable<SelectListItem>)ViewData["StateList"], "--Select--", new { @placeholder = "--Select--", @class = "form-control" })
    </div>

<div class="col-md-6 col-sm-6 col-xs-12 ">
    <label>City <span class="error">*</span></label>
    @Html.DropDownListFor(m => m.CityId, (IEnumerable<SelectListItem>)ViewData["CityList"], "--Select--", new { @placeholder = "--Select--", @class = "form-control" })

</div>

<div class="col-md-12 col-sm-12 col-xs-12 ">
    <label>Customer Name <span class="error">*</span></label>

    @Html.TextBoxFor(m => m.CustomerName, new { @placeholder = "Enter Customer Name", @class = "required form-control", @maxlength = 100 })
    @Html.ValidationMessageFor(model => model.CustomerName, null, new { @style = "color:red;!important" })
</div>

<input type="hidden" id="hfCustomer" name="CustomerId" />
<br /><br />

JavaScript

<script type="text/javascript">
    $(function () {
        $("#CustomerName").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '/Home/AutoComplete/',
                    data: "{ 'prefix': '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data, function (item) {                                
                            return item;
                        }))
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }
                });
            },
            select: function (e, i) {
                $("#hfCustomer").val(i.item.val);                  
            },
            minLength: 1
        });

    });

</script>

Controller

[HttpPost]
public JsonResult AutoComplete(string prefix)
{

    var customers = (from customer in dbContaxt.Cities
                     where customer.Name.StartsWith(prefix)
                     select new
                     {
                         label = customer.Name,
                         val = customer.CityId
                     }).ToList();

    return Json(customers);
}

How can I bind both selected StateId and CityId and retrieve CustomerName in the textbox? Please suggest changes in jQuery and controller. Thanks!

Answer 1

$.ajax({
   url: '/Home/AutoComplete/',
   data: {   data: "{ 'prefix': '" + request.term + "'}", stateId: "slected State Id",cityid:"Selected City ID" },

Controller like below

public JsonResult AutoComplete(string prefix,int stateId,int cityid)   
{
    var customers = (from customer in dbContaxt.Cities
    where customer.Name.StartsWith(prefix)&&customer.state==state && customer.city==city 
                     select new
                     {
                         label = customer.Name,
                         val = customer.CityId
                     }).ToList();

    return Json(customers);
}

Answer 2

All you have to do is, read the selected option value of State and City dropdown and send that in the request payload.

Also if you are specifying contentType as application/json , you should JSON stringify the payload. If your payload is a lean flat js object, you do not need to do that. Simply remove the contentType property.

dataType is a property which tells the $.ajax method the type of data it is expecting from the server. But if not provided, jQuery will intelligently guess it based on the response headers ( Content-Type header) and use that. In this case, since we are explicitly returning Json from the controller, there will be response header for Content-Type whic hhas value application/json . So you can remove that as well from your call.

$(function() {

    $("#CustomerName").autocomplete({
        source: function (request, response) {
            var d = { term: request.term, 
                      stateId: $("#StateId").val(), 
                      cityId: $("#City").val() };
            $.ajax({
                url: '@Url.Action("AutoComplete")',
                data: d,
                type: "POST",
                success: function (data) {
                    response($.map(data, function (item) {
                        return item;
                    }))
                },
                error: function (response) {
                    console.log(response.responseText);
                },
                failure: function (response) {
                    console.log(response.responseText);
                }
            });
        },
        select: function (e, i) {
            $("#hfCustomer").val(i.item.val);
        },
        minLength: 1
    });

});

Now add these 2 parameters to your action method and you can use that to filter your data

[HttpPost]
public ActionResult AutoComplete(string term,int countryId,int stateId)
{
   // to do use the parameters and filter data and return some JSON
}