使用 MVC5 C# 和 Razor 在局部视图中运行 javascript

Posted 2023-05-09

【中文标题】使用 MVC5 C# 和 Razor 在局部视图中运行 javascript

【英文标题】：Run javascript in a partial view with MVC5 C# and Razor

【发布时间】：2015-02-03 11:36:10

【问题描述】：

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

到目前为止一切顺利，但问题是我想在单击模式上的按钮时执行某些操作，但没有任何反应。

这是主视图：

    <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 显示模式的方式：

 //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
    );

到目前为止一切顺利。一切正常。问题来自于模态......

这是模态：

<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：

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

主视图位于名为“Index.cshtml”的文件中。模态视图是一个名为“_EditModal.cshtml”的文件（因为它是局部视图）。 javascript 代码是一个名为“custom.js”的文件，在主视图中使用并运行得非常好。

为什么这不起作用？

【参考方案1】：

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

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

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

例如

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

这通过监听事件冒泡到一个不变的祖先，然后应用jQuery选择器在事件时间而不是事件注册时间。这意味着元素只需要在点击发生时存在。

您通常会选择靠近加载内容的不变元素，因此可能使用#editModal 而不是文档

例如

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

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

【讨论】：

还有另一种更简单的方法来显示模式并在其上运行 javascipt 吗？还是我应该创建另一个问题？

@Flame_Phoenix：为了其他使用此站点的人的利益，单独的问题更有意义。谢谢。

@GoneCoding 你是救生员。谢谢:)

【参考方案2】：

在显示模态后添加$("#savePackageChangesBtn").click(function() );代码

例如

//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
            );
            $("#savePackageChangesBtn").click(function () 
                $('.modal').modal(
                    show: true
                );
                return false; //prevent browser defualt behavior
            );
        
    );
    return false; //prevent browser defualt behavior
);

或将以下内容添加到您的文档中。准备就绪

$(document).on("click", "#savePackageChangesBtn", doSomething);

这使您的文档能够监听在 init 之后创建的元素。

然后在 doSomething 中添加你想要的。

【讨论】：

您的第一个选项在现代 jQuery 中不是一个很好的模式（这就是我们委托事件的原因）。 :)

将为此创建另一个问题，谢谢！荣誉++！