使用Razor TextBoxFor在模态内部使用JQuery Autocomplete

Question

我使用模态显示部分视图。我遇到的问题是我确实知道何时何地将jquery添加到被调用的模态表单中。我知道脚本没有附加到模态。我该怎么做。

我目前的代码无效。自动填充功能无效。

脚本无需使用模式。

在我的局部视图中，我有一个TextBoxFor，类使用“autocomplete_with_hidden”。

<div class="modal-body">
    <div class="form-horizontal">
        <div class="form-group">
            @Html.LabelFor(model => model.Ship_To_Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(Model => Model.Ship_To_Name, new { @class = "autocomplete_with_hidden", data_url = Url.Action("AutoComplete", "Customer") })
                @Html.ValidationMessageFor(model => model.Ship_To_Name, "", new { @class = "text-danger" })
            </div>
        </div>
 </div>

控制器正在使用以下代码。

    public ActionResult Autocomplete(string term)
    {
        var model = db.Customers
                       .Where(m => term == null || m.Customer_Name.StartsWith(term))
                       .Take(10)
                       .Select(m => new
                       {
                           label = m.Customer_Name,
                           Id = m.Ship_To_Code
                       });

        return Json(model, JsonRequestBehavior.AllowGet);
    }

Jquery的：

$(function () {
    $.ajaxSetup({ cache: false, async: true });

    $("a[data-modal]").on("click", function (e) {
        $('#myModalContent').load(this.href, function () {
            $('#myModal').modal({
                //persist: true,
                keyboard: true
            }, 'show');

            //This is a function
            bindForm(this);
        });
        return false;
    });

Jquery创建自动完成

   var createAutoComplete = function() {
    $(this).autocomplete({
        minLength: 0,
        source: function (request, response) {
            var shipto = new Array();
            //var url = $(this).attr("data_autocomplete");
            var url = $(this.element).data('url');

            $.ajax({
                async: false,
                cache: false,
                type: "POST",
                url: url,
                data: { "term": request.term },
                success: function (data) {
                    for (var i = 0; i < data.length ; i++) {
                        shipto[i] = { label: data[i].Value, Id: data[i].Key };
                    }
                }
            });
            response(shipto);
        },

        select: function (event, ui) {
            // fill selected shipto details on form
            var url = "/GetShipTo/Customer"
            $.ajax({
                cache: false,
                async: false,
                type: "POST",
                url: url,
                data: { "id": ui.item.id },

                success: function (data) {
                    $('.modal-body').show();
                    $("#Ship_To_Address_1").html(data.Ship_To_Address_1)
                    $("#Ship_To_Address_2").html(data.Ship_To_Address_2)
                    $("#Ship_To_City_Name").html(data.Ship_To_City_Name)
                    $("#Ship_To_State_Code").html(data.Ship_To_State_Code)
                    $("#Ship_To_Zip_Code").html(data.Ship_To_Zip_Code)
                    action = data.Action;
                },
            });
        }
    });

};

     $('#myModalContent').find('.autocomplete_with_hidden').each(createAutoComplete);


 });

Jquery Bind Form：

function bindForm(dialog) {
    $('form', dialog).submit(function () {

        $.ajaxSetup({
            cache: false
        })

        $('#progress').show();
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {

                if (result.success) {
                    $('#myModal').modal('hide');
                    $('#myModal').removeData("modal");
                    $('#progress').hide();
                    location.reload();
                } else {
                    $('#progress').hide();
                    $('#myModalContent').html(result);
                    bindForm();
                }
            }
        });

        return false;
    });
}