如果页面模型填充了数据，为什么我的 JS 函数没有被执行？

Question

我正在开发一个网络应用程序，使用 ASP .NET Core 2.0

我有一个包含表单的局部视图。

然后我在控制器中有一个动作方法，它通过 JS 函数执行，使用 AJAX。此操作方法填充模型和 returns 表单部分视图和相应的模型。

只要不填充模型，该功能就可以正常工作。当一个确定的字段被填充然后失去焦点时，我需要从数据库中获取一条记录。当表单中使用的模型为空时，这是第一次起作用。但是，在第一次查找记录并填写表格后，该功能不再执行。

此外，加载记录后字段验证也不起作用。

这是表格的局部视图：

<form id="myform">
        <div asp-validation-summary="All" class="text-danger"></div>
        <div class="form-group col-lg-2">
            <label asp-for="Client.Name">Client</label>
            <input asp-for="Client.Name" id="ClientName" />
        </div>
        <div class="form-group col-lg-1">
            <label asp-for="Cliente.Phone"></label>
            <input asp-for="Cliente.Phone" id="Phone"/>
        </div>
</form>

JS/AJAX函数：

<script>
$("form").on("blur", "#Phone", function () {
    var phone = document.querySelector('#Phone').value;
    alert('select client by phone=' + phone);

    //Send the JSON array to Controller using AJAX.
    $.ajax({
        type: "POST",
        url: "/Home/GetClienteByPhone",
        data: "phone=" + phone,
        success: function (res) {
            $('#myform').html(res);
        }
    })
});
</script>

最后，控制器动作方法（Controller=Home）：

public IActionResult GetClienteByPhone(string phone)
    {
        if (!string.IsNullOrEmpty(phone))
        {
            var model = new FormViewModel();

            model.Client = _db.Clients.Where(c => c.Phone == phone).FirstOrDefault();

            return PartialView("_Form", model);
        }
        return PartialView("_Form");
    }

在我的视图中，我将部分视图渲染为 div，id="myform"

有人知道为什么吗？

谢谢

Answer 1

您似乎要在 AJAX 回调中替换整个表单。当你这样做时，你也杀死了所有附加的事件处理程序。如果您需要事件处理程序持久化，则需要将其委托给替换后保留在页面上的父元素。您正在使用 jQuery 的委托处理函数，但您的委托本身正在被替换。您要么不需要替换整个表单，只需替换其中的一些子元素，要么使用比 form.

更高的父元素

如果页面模型填充了数据，为什么我的 JS 函数没有被执行？

Why aren't my JS functions not being executed if the model of the page is populated with data?

javascript

asp.net

asp.net-mvc

asp.net-core-2.0