使用MVC5 C#和Razor在部分视图中运行javascript [英] Run javascript in a partial view with MVC5 C# and Razor

问题描述

我使用Razor引擎在MVC5和C#中有一个小型Web应用程序.在我的代码中，我有一个主视图，它是一个表的索引，带有一些按钮.当我单击其中一个按钮时，会出现Bootstrap模式.

I have a small web app in MVC5 and C# using the Razor Engine. In my code, I have a main view, which is a index of a table, with some buttons. When I click one of the buttons a Bootstrap modal appears.

到目前为止，还不错，但是问题是我想在单击模式上的按钮时执行某些操作，但是什么也没有发生.

So far so good, but the problem is that I want to perform certain actions when buttons on the modal are clicked, but nothing happens.

这是主视图:

    <div id="editModal"></div>
    <a class="btn btn-default editPackage"t itle="Edit Package"><i class="icon-edit"></i></a>
    <h1>Package List</h1>

    <table class="table" id="packagesTable">
        <!-- Big ass table here :D -->
    </table>

这是我通过使用jQuery显示模态的方式:

This is how I show the modal, by using jQuery:

 //Show Edit Package modal
    $(".btn.btn-default.editPackage").click(function () {

        $.ajax({
            url: $(this).data('url'),
            type: 'GET',
            cache: false,
            success: function (result) {
                $('#editModal').html(result).find('.modal').modal({
                    show: true
                });
            }
        });
        return false; //prevent browser defualt behavior
    });

到目前为止，一切都很好.一切正常.问题来自于模态...

So far so good. Everything works fine. The problem comes with the modal ...

这是模态:

<div class="modal fade in" id="editPackageModal" tabindex="-1" role="dialog" aria-labelledby="editPackages" aria-hidden="true">
    <div class="modal-dialog" style="overflow-y: auto; max-height: 90vh; height: 80vh;">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel">Edit Package MyPackage</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal">
            <div class="control-group">
              <label class="control-label">Package Name:</label>
              <div class="controls">
                <input type="text" class="form-control" id="package-name" placeholder="MyPackageName">
              </div>
            </div>
            <!-- Other fields here -->
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" id="savePackageChangesBtn">Save changes</button>
        </div>
      </div>
    </div>
  </div>

这是我希望在单击模式中的按钮时运行的Javascript:

This is teh Javascript I wish to run when a button in the modal is clicked:

$(document).ready(function() {
  $("#savePackageChangesBtn").click(function() {
    $('.modal').modal({
      show: true
    });
    return false; //prevent browser defualt behavior
  });
});

主视图位于一个名为"Index.cshtml"的文件中.模态视图是一个名为"_EditModal.cshtml"的文件(因为它是局部视图). javascript代码是一个名为"custom.js"的文件，该文件在主视图中使用且运行良好.

The main view is in a file called "Index.cshtml". The modal view is a file called "_EditModal.cshtml" (because it is a partial view). The javascript code is a file called "custom.js", which is used and runs perfectly fine in the main view.

为什么这不起作用?

推荐答案

您的模态是动态添加的，但是您的$("#savePackageChangesBtn").click(function()是在DOM准备就绪时注册的(当目标元素不存在要绑定时).

Your modal is added dynamically, but your $("#savePackageChangesBtn").click(function() is registered at DOM ready time (when the target element does not exists to bind on).

如果您在点击处理程序之前添加了alert($("#savePackageChangesBtn").length);，它将返回0.

If you added alert($("#savePackageChangesBtn").length); before the click handler it would return 0.

使用附加到不变的祖先元素的委托事件处理程序.

Use a delegated event handler, attached to a non-changing ancestor element.

例如

$(document).on('click', "#savePackageChangesBtn", function()

这是通过侦听事件冒泡至不变的祖先，然后在事件时间应用jQuery选择器 而不是事件注册时间来实现的.这意味着仅在单击发生时该元素才需要存在.

This works by listening for the event to bubble up to a non-changing ancestor, then applies the jQuery selector at event time not event registration time. This means the element only needs to exists when the click occurs.

您通常会选择一个与加载的内容接近的不变元素，因此可能使用#editModal代替文档

You would normally choose a non-changing element close to the loaded content, so probably use #editModal instead of document

例如

$('#editModal').on('click', "#savePackageChangesBtn", function()

注意:如果没有其他方便的地方，document是最好的默认设置，但是不要使用'body'，因为样式会导致它不响应冒泡的鼠标事件(例如，如果body的计算高度为零) ).

Note: document is the best default if nothing else is convenient, but do not use 'body' as styling can cause it to not respond to bubbled mouse events (e.g. if the calculated height of the body is zero).

这篇关于使用MVC5 C#和Razor在部分视图中运行javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！