Question

我在_layout视图中呈现了以下脚本： -

$(document).ready(function () {
    $("input[data-autocomplete-source]").each(function () {
        var target = $(this);
        target.autocomplete({
            source: target.attr("data-autocomplete-source"), 
            minLength: 1, 
            delay: 1000
        });   
    });  
});

并添加了以下字段以对其应用自动填充： -

<input  name="term" type="text" data-val="true" 
data-val-required= "Please enter a value."  
data-autocomplete-source= "@Url.Action("AutoComplete", "Staff")"  />

现在，如果我将视图渲染为部分视图，那么脚本将不会触发，并且不会执行自动完成，因此我在ajax-success中添加了自动完成，如下所示： -

$(document).ready(function () {
    $(document).ajaxSuccess(function () {
        $("input[data-autocomplete-source]").each(function () {
            var target = $(this);
            target.autocomplete({
                source: target.attr("data-autocomplete-source"), 
                minLength: 1, 
                delay: 1000
            });
        });
    });
});

现在添加AjaxSuccess之后将调用action方法，当我检查IE F12开发人员工具上的响应时，我可以看到浏览器将收到json响应，但不会在字段内显示任何内容（我的意思是自动完成结果不会显示在局部视图上？

修改

负责自动完成的操作方法是： -

public async Task<ActionResult> AutoComplete(string term)
      {


          var staff = await unitofwork.StaffRepository.GetAllActiveStaff(term).Select(a => new { label = a.SamAccUserName }).ToListAsync();
          return Json(staff, JsonRequestBehavior.AllowGet);


      }

EDIT2

这是负责显示模态弹出窗口的脚本： -

$(document).ready(function () {

    $(function () {
        $.ajaxSetup({ cache: false });
        //$("a[data-modal]").on("click", function (e) {
            $(document).on('click', 'a[data-modal]', function (e){
            $('#myModalContent').css({ "max-height": screen.height * .82, "overflow-y": "auto" }).load(this.href, function () {
                $('#myModal').modal({
                    //height: 1000,
                    //width: 1200,
                    //resizable: true,
                    keyboard: true
                }, 'show');
                $('#myModalContent').removeData("validator");
                $('#myModalContent').removeData("unobtrusiveValidation");
                $.validator.unobtrusive.parse('#myModalContent');
                bindForm(this);
            });
            return false;
        });


    });

    function bindForm(dialog) {
        $('form', dialog).submit(function () {
            $('.btn.btn-primary,.btn.btn-danger').prop("disabled", "disabled");
            $('#progress').show();
            if ($(this).valid()) {

                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) {
                       if (result.ISsuccess) {
                            $('#myModal').modal('hide');
                            $('#progress').hide();
                            $('.btn.btn-primary,.btn.btn-danger').prop("disabled", false);
                            location.reload();
                            //  alert('www');
                        } else {

                            $('#progress').hide();
                            $('#myModalContent').html(result);
                            $('.btn.btn-primary,.btn.btn-danger').prop("disabled", false);
                            bindForm();
                        }
                    }
                });
            }
            else {
                $('.btn.btn-primary,.btn.btn-danger').prop("disabled", false);
                $('#progress').hide();
                return false;
            }

            return false;
        });
    }
});

Answer 1

首先，您不需要在ajaxSuccess函数中包含ready函数。

第二，从服务器获取Json时，最好使用 POST 。

我试图解决你的问题，但没有运气。

以下是它的工作原理（ IE 11，MVC 4 ）

_Layout上的

脚本：

$(document).ajaxSuccess(function () {
    $("input[data-autocomplete-source]").each(function () {
        var target = $(this);
        target.autocomplete({
            source: function (request, response) {
                $.post(target.attr("data-autocomplete-source"), request, response);
            },
            minLength: 1,
            delay: 1000
        });
    });
});

控制器方法：

[HttpPost]
public JsonResult AutoComplete()
{
    return Json(new List<string>()
        {
            "1",
            "2",
            "3"
        });
}

部分视图html：

<input name="term" type="text" data-val="true"
       data-val-required="Please enter a value."
       data-autocomplete-source="@Url.Action("AutoComplete", "Stuff")" />

<强>更新

我发现你的问题是什么。 Jquery自动完成需要具有lable和value属性的对象数组。因此，如果您更改这样的控制器代码，它将起作用。

public async Task<ActionResult> AutoComplete(string term)
{
    var staff = await unitofwork.StaffRepository.GetAllActiveStaff(term)
    .Select(a => new { label = a.SamAccUserName, value = a.SamAccUserName })
    .ToListAsync();
    return Json(staff, JsonRequestBehavior.AllowGet);
}

您也可以使用$.map jquery函数在客户端执行此操作，您可以看到示例here

自动填充结果不会显示在asp.net mvc局部视图中

1 个答案: