服务器验证失败后模态中的 js 停止工作 ASP.NET MVC Core

Question

我正在开发一个使用 .NET Core 2.0 创建的企业 Web 应用程序，当提交的表单未通过验证时，我得到了一些相当意外的结果。我在单击事件上创建一个模态，其中填充了一个驻留在局部视图中的表单。部分视图引用外部 js 文件，只要表单处于未提交状态或有效状态，一切都会按预期工作。

但是，当我通过上述表格提交无效数据时，情况变得很奇怪。服务器端验证完成了它的工作，并且错误消息按预期返回到表单。问题是在呈现错误消息后，用于表单的其他 js 的 none 有效。

现在是代码。这是创建模态并通过 site.js-

提交表单的 js

$(function () {
// stores the current URL in a variable to use for data update on modal. 
var placeholderElement = $('#modal-placeholder');

$('.trigger-ajax-modal[data-toggle="ajax-modal"]').click(function (event) {
    var url = $(this).data('url');
    $.get(url).done(function (data) {
        placeholderElement.html(data);
        placeholderElement.find('.modal').modal('show');
    });
});

placeholderElement.on('click', '[data-save="modal"]', function (event) {
    event.preventDefault();

    var form = $(this).parents('.modal').find('form');
    var actionUrl = form.attr('action');
    var dataToSend = form.serialize();

    $.post(actionUrl, dataToSend).done(function (data) {
        var newBody = $('.modal-body', data);
        placeholderElement.find('.modal-body').replaceWith(newBody);
        var isValid = newBody.length;
        if (isValid < 1) {
            placeholderElement.find('.modal').modal('hide');
            location.reload();
        }
    });
});

现在对于显示验证错误后停止的js-

$(document).ready(function () {    // <--works before form submission

//various code to do things like dynamically populate input via AJAX call based on a drop down list
// and doing simple arithmetic to avoid user error  

}); // <-- not so much after form is returned as invalid

我的控制器中的 HttpPOST 方法-

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(MileageTrackerEditVM vm)
{
    try
    {
        if (ModelState.IsValid)
        {
            var dto = _mapper.Map<MileageTrackerDto>(vm);
        await _mileageTrackerSvc.UpdateMileageTracker(dto);
        return RedirectToAction(nameof(Index));
    }
    return PartialView("_Create", vm);
    }
    catch (Exception ex)
    {
    Console.WriteLine("An general error has occured while trying to create a mileage entry: {0}", ex.Message);
    throw;
    }
}

当然还有用于模态的部分视图底部的验证脚本标记-

@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
<script type="text/javascript" src="~/scripts/MileageTrackers.js"></script>

现在对于我尝试过的一些变化-

将 page.js 文件添加到 site.js（运行模态创建的 js 所在的位置），然后在部分中引用 site.js。同样的结果
将js直接写到partial in标签中...结果一样
将 javascript 添加到剃刀 @section 脚本位，使用 @Scripts.Render("~/scripts/ myJavaFile.js")。这不仅不起作用，甚至无法编译。
此外，在客户端调试时，据我所知，js 文件未与验证消息一起呈现。

我四处寻找在表单验证失败后使外部 js 文件呈现的方法。我不会列出短语 "js not working after form validation error" 的每一个最后排列以及描述我的问题的其他方式，但让我们把它留在很多。脑洞大开。

免责声明- 我是编程的新手（才一年多）所以如果我的代码有问题，或者这是一个简单的修复，我很谦虚道歉。提前感谢您提供的任何指导。

Answer 1

如我评论中所写。问题是脚本加倍了，因为它们没有被正确替换。

解决方法是替换PartialView方法的根元素。我建议在您的 post 方法中尝试 placeholderElement.html(newBody);。

服务器验证失败后模态中的 js 停止工作 ASP.NET MVC Core

js in modal stops working after server validaiton fails ASP.NET MVC Core

javascript

validation

jquery

entity-framework-6

asp.net-core-mvc