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

Question

I have the following markup inside my .cshtml Partial View and it is placed in the Views/Shared folder: 我的.cshtml部分视图中有以下标记，它放在Views/Shared文件夹中：

_Modal.cshtml _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>

And also the External JavaScript (different file from the Partial View .cshtml): 还有外部JavaScript（部分视图.cshtml中的不同文件）：

Modal.js 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');
        },
    };
})();

And I call from my page like below: 我从我的页面打电话如下：

Index.cshtml 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>

My problem is: whenever I clicked the button, nothing happens. 我的问题是：每当我点击按钮时，都没有任何反应。 But it works when I put the html element not inside _Modal.cshtml (Refer to the below code). 但是当我把html元素放在_Modal.cshtml里面时它会起作用（参见下面的代码）。

My question is: how can I get the class name in the _Modal.cshtml using JavaScript or JQuery? 我的问题是：如何使用JavaScript或JQuery在_Modal.cshtml获取类名？

I can do this in the Modal.js (Note that it is same as I put that into _Modal.cshtml) but that would be hard to maintain and I would like to put all of the content in the Partial View, and call it when needed by class name, instead of write string that will converted to JavaScript Object: 我可以在Modal.js执行此Modal.js （请注意，它与我将其放入_Modal.cshtml中相同）但这很难维护，我想将所有内容放在Partial View中，并在调用时调用它类名所需，而不是将转换为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>');

Your answer much appreciated. 你的回答非常感谢。

Edit: 编辑：

Question on 31st of May 2016: 2016年5月31日的问题：

What's the difference between @Html.Partial("_Modal") with @Html.Partial("~/Views/Shared/_Modal.cshtml") . @Html.Partial("_Modal")与@Html.Partial("~/Views/Shared/_Modal.cshtml")之间有什么区别。 is it just to better understand for where the compiler get the partial views from? 是为了更好地理解编译器从何处获取部分视图？

Answered on 1st of June 2016 by @Guruprasad Rao: 由@Guruprasad Rao于2016年6月1日回答：

There is nothing difference between two except the mentioning of partialview name. 除了提到部分partialview名称之外，两者之间没有任何区别。 The one I suggested was providing fully qualified path which helps compiler from where to fetch the partialview . 我建议的那个是提供完全限定的路径，这有助于编译器从哪里获取部分partialview 。 To one you use will search in all the directories under the View folder. 您使用的将搜索View文件夹下的所有目录。 So the one I mentioned will be good in the aspect of performance. 所以我提到的那个在性能方面会很好。

Thanks for the @Guruprasad Rao for the answer and the explanation. 感谢@Guruprasad Rao的答案和解释。

Cheers~ 干杯〜

Answer 1

You should import the partialview first from server to client browser first and then you can manipulate it with jquery . 您应首先将partialview首先从服务器导入到客户端浏览器，然后您可以使用jquery对其进行操作。 Otherwise there would be no element with the selector you are trying to find. 否则，您尝试查找的selector将没有element 。 User, @Html.Partial or @Html.RenderPartial to import it, hide it at initial state and show it on click. 用户， @Html.Partial或@Html.RenderPartial导入它，在初始状态下隐藏它并在点击时显示它。 Take a below example: 举个例子：

<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 changes 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 个解决方案

解决方案1
0 已采纳 2016-05-31 06:03:04

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-05-31 06:03:04

解决方案1
0 已采纳 2016-05-31 06:03:04