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

Question

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

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

现在是代码。这是创建模式并通过 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

我的 Controller 中的 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;
    }
}

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

@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标签中...结果一样

• 使用 @Scripts.Render("~/scripts/myJavaFile.js") 将 javascript 添加到 Razor @section 脚本位。这不仅行不通，甚至无法编译。

• 此外，在客户端调试时，据我所知，js 文件未与验证消息一起呈现。

我四处寻找在表单验证失败后使外部 js 文件呈现的方法。我不会列出短语“表单验证错误后 js 不工作”的每一个最后排列以及描述我的问题的其他方式，但让我们把它留在很多。我没有想法。

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

Answer 1

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

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