Fatal编程技术网
  • javascript/
  • ASP.NET MVC核心-具有动态加载的PartialView的JavaScript事件处理程序

ASP.NET MVC核心-具有动态加载的PartialView的JavaScript事件处理程序

javascript jquery html asp.net asp.net-mvc

ASP.NET MVC核心-具有动态加载的PartialView的JavaScript事件处理程序,javascript,jquery,html,asp.net,asp.net-mvc,Javascript,Jquery,Html,Asp.net,Asp.net Mvc,我的视图文件中有这个脚本，它的目的是填充同一视图的一个部分，但只填充其中的一小部分，这是一个带有引导面板类的HTML div： <script type="text/javascript"> function GetVehicles() { $.get('@Context.Request.Scheme://@hostname/@controller/GetVehicles', {id: @Model.Id}, functi

我的视图文件中有这个脚本，它的目的是填充同一视图的一个部分，但只填充其中的一小部分，这是一个带有引导面板类的HTML div：

<script type="text/javascript">
    function GetVehicles() {      
                     $.get('@Context.Request.Scheme://@hostname/@controller/GetVehicles', {id: @Model.Id}, function (response) {
                                            $("#tabOutVehicles").html(response);
                                        });
                                    }

function GetMedInfo() {
    $.get('@Context.Request.Scheme://@hostname/@controller/GetMedInfo', {id: @Model.Id}, function (response) {
           $("#tabOutMedInfo").html(response);

    });
}
</script>
JavaScript是如上所述编写的，用于处理modals上的服务器端验证，请参见此处的精彩文章：

当您将面板的HTML“粘贴”到页面中时，一旦从ajax调用返回，它就会破坏所有现有的事件处理程序。因此，您需要重新绑定处理程序锚元素。我会将您的事件处理程序包装在一个函数中，并在初始页面加载时以及在ajax成功处理程序中（粘贴HTML后）调用该函数。假设您使用的是jQuery，它看起来像这样：

function bindAjaxModalButtons() {
    $('[data-toggle="ajax-modal"]').click(function() {
        // ... your event handler code here
    });
}
$(function() {
    bindAjaxModalButtons(); // attaches event handlers on initial page load
});
然后更改ajax函数，如下所示：

function GetMedInfo() {
    $.get('@Context.Request.Scheme://@hostname/@controller/GetMedInfo', {id: @Model.Id}, function (response) {
        $("#tabOutMedInfo").html(response);
        bindAjaxModalButtons(); // <-- this will attach the event handler to the new buttons    
    });
}
函数GetMedInfo（）{ $.get（'@Context.Request.Scheme://@hostname/@controller/GetMedInfo'，{id:@Model.id}，函数（响应）{ $（“#tabOutMedInfo”）.html（回复）；
bindAjaxModalButtons（）；//当点击上面的超链接时，它应该执行加载编辑模式的JavaScript代码，但没有发生。发生了什么？这是什么JavaScript代码？模式在哪里？@Jasen，嗨Jasen，请看我的编辑。你可以使用取消绑定/重新绑定，而不是取消绑定。看到取消绑定有缺点吗绑定/重新绑定？这难道不是site.js中发生的事情吗，它在（'click'，'data save=“modal”]'，function（event）{…}@KamilFolwarczny最有可能的原因是，我更改了标题以将其保留在一个类别中，并尽可能靠近其他问题。请查看我的编辑。问题仍然是一样的。您正在连接document.ready事件上的事件处理程序，在将部分视图插入DOM时不会触发该事件。您需要连接句柄在您通过javascript操作DOM之后，请再次使用r。我将修改我的答案以匹配您的代码。这是正确的答案。您认为有必要更改问题的标题吗？或者是否足够清楚？可能值得将标题修改为类似“动态加载PartialView的javascript事件处理程序”，因为根本原因是你的问题与你加载脚本文件的方式无关。很好，标题已经更改了。 
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <environment names="Development">
        @*Other scripts omitted *@
        <script src="~/js/site.js" asp-append-version="true" defer></script>
    </environment>

    <environment names="Staging,Production">
        @*Other scripts omitted *@
        <script src="~/js/site.js" asp-append-version="true" defer></script>
    </environment>
</head>
<body>
    <div id="modal-placeholder"></div>
    @RenderBody()
    @RenderSection("scripts", required: false)
</body>
</html>

$(function () {
    var placeholderElement = $('#modal-placeholder');
    var redirectUrl = "";

    $('a[data-toggle="ajax-modal"]').click(function (event) {
        var url = $(this).data('url');
        redirectUrl = window.location.href;

        $.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.find('[name="IsValid"]').val() == 'True';
            if (isValid) {
               placeholderElement.find('.modal').modal('hide');
               window.location.assign(redirectUrl);
               }
            }
        });
    });
});

function bindAjaxModalButtons() {
    $('[data-toggle="ajax-modal"]').click(function() {
        // ... your event handler code here
    });
}
$(function() {
    bindAjaxModalButtons(); // attaches event handlers on initial page load
});

function GetMedInfo() {
    $.get('@Context.Request.Scheme://@hostname/@controller/GetMedInfo', {id: @Model.Id}, function (response) {
        $("#tabOutMedInfo").html(response);
        bindAjaxModalButtons(); // <-- this will attach the event handler to the new buttons    
    });
}

$(function () {
    var placeholderElement = $('#modal-placeholder');
    var redirectUrl = "";

    bindAjaxModalButtons();

    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.find('[name="IsValid"]').val() == 'True';
            if (isValid) {
               placeholderElement.find('.modal').modal('hide');
               window.location.assign(redirectUrl);
               }
            }
        });
    });
});

function bindAjaxModalButtons() {
    var btns = $('a[data-toggle="ajax-modal"]');
    btns.unbind(); // <-- so that existing buttons don't get double-bound
    btns.click(function (event) {
        var url = $(this).data('url');
        redirectUrl = window.location.href;
        var placeholderElement = $('#modal-placeholder');
        $.get(url).done(function (data) {
            placeholderElement.html(data);
            placeholderElement.find('.modal').modal('show');
        });
    });
}