Question

我在.cshtml部分视图中有以下标记，它放在Views/Shared文件夹中：

_Modal.cshtml

<div class="loadingOverlay">
    <button class="btn loading-button" disabled><i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i></button>
</div>

还有外部JavaScript（部分视图.cshtml中的不同文件）：

Modal.js

var Modal;

Modal = Modal || (function () {
    var loadingDiv = $('.loadingOverlay');
    return {
        Loading: function () {
            loadingDiv.css('display', 'block');
            $('body').prepend(loadingDiv);
        },
        LoadingDismiss: function () {
            loadingDiv.fadeOut('500');
        },
    };
})();

我从我的页面打电话如下：

Index.cshtml

<!DOCTYPE html>
<html>
<head>
@Styles.Render("~/Content/font-awesome", "~/Content/css")
</head>
<body>
<div class="container-fluid">
        <div class="container">
            <div class="row">
                <button id="showOverlay" class="btn btn-default"></button>
            </div>
        </div>
    </div>
@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
        $(document).ready(function () {
            $('#showOverlay').click(function () {
                Modal.Loading();
            });
        })
    </script>
</body>
</html>

我的问题是：每当我点击按钮时，都没有任何反应。但是当我将html元素放在_Modal.cshtml内时（参见下面的代码），它可以工作。

我的问题是：如何使用JavaScript或JQuery在_Modal.cshtml中获取类名？

我可以在Modal.js 中执行此操作（请注意，它与我将其放入_Modal.cshtml中相同）但是这很难维护，我想把所有部分视图中的内容，并在需要时按类名调用，而不是将转换为JavaScript对象的写字符串：

var loadingDiv = $('<div class="loadingOverlay"><button class="btn loading-button" disabled>'
        + '<i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i></button></div>');

你的回答非常感谢。

修改

2016年5月31日的问题：

@Html.Partial("_Modal")与@Html.Partial("~/Views/Shared/_Modal.cshtml")之间的区别是什么。是为了更好地理解编译器从何处获取部分视图？

2016年6月1日由@Guruprasad Rao回答：

除了提及partialview名称之外，两者之间没有任何区别。我建议的那个是提供完全限定的路径，这有助于编译器从哪里获取partialview。您使用的将搜索View文件夹下的所有目录。所以我提到的那个在性能方面会很好。

感谢@Guruprasad Rao的回答和解释。

干杯〜

Answer 1

您应首先将partialview先从服务器导入到客户端浏览器，然后再使用jquery进行操作。否则，您尝试查找的element将不会selector。用户@Html.Partial或@Html.RenderPartial将其导入，将其隐藏在初始状态并在点击时显示。举个例子：

<body>
  <div class="container-fluid">
    <div class="container">
      <div class="row">
        <button id="showOverlay" class="btn btn-default"></button>
      </div>
    </div>
  </div>
  @Html.Partial("~/Views/Shared/_Modal.cshtml")
  <!--I assume that the content inside this will be initially in hidden state-->

  @Scripts.Render("~/bundles/jquery")

  <script type="text/javascript">
    $(document).ready(function() {
      $('#showOverlay').click(function() {
        Modal.Loading();
      });
    })
  </script>
</body>

Modal.js 更改

var Modal;

Modal = Modal || (function () {
    var loadingDiv = $('.loadingOverlay');
    return {
        Loading: function () {
            loadingDiv.css('display', 'block');
            //$('body').prepend(loadingDiv);
            //No need to prepend here since we are importing it through partial method
        },
        LoadingDismiss: function () {
            loadingDiv.fadeOut('500');
        },
    };
})();

在JavaScript或jQuery中获取部分视图中的HTML类名

1 个答案: