Question

您好我必须制作一个自动完成类型的文本框，在键入任何字母时会搜索数据库并显示类似的类型组合。

我能够使用jQuery创建它，但现在我想根据以前从两个下拉列表中选择的值绑定文本框中的结果。我有一个下拉列表州，另一个是城市。两个下拉列表都是级联的。现在，自动完成类型文本框应仅显示基于所选 StateId 和 CityId 的结果。

查看

 <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>

控制器

[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);
}

如何绑定选定的StateId和CityId并在文本框中检索CustomerName？请建议jQuery和控制器的更改。谢谢！

Answer 1

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

如下控制器

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

您所要做的就是，阅读State and City下拉列表的选定选项值，并将其发送到请求有效负载中。

另外，如果您将contentType指定为application/json，则应该JSON对有效负载进行字符串化。如果您的有效负载是精简平面js对象，则不需要这样做。只需删除contentType属性。

dataType是一个属性，它告诉$.ajax方法它希望从服务器获得的数据类型。但是如果没有提供，jQuery将根据响应头（Content-Type标头）智能地猜测它并使用它。在这种情况下，由于我们从控制器显式返回Json，因此Content-Type的响应头将具有值application/json。所以你也可以从你的电话中删除它。

$(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
    });

});

现在将这两个参数添加到您的操作方法中，您可以使用它来过滤数据

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

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

2 个答案: