我的 .cshtml 部分 View 中有以下标记，并将其放置在 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(与部分 View .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 中相同)，但这很难维护，而且我想要将所有内容放在部分 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>');
非常感谢您的回答。
编辑:
2016 年 5 月 31 日的问题:
@Html.Partial("_Modal")与@Html.Partial("~/Views/Shared/_Modal.cshtml")之间有什么区别。仅仅是为了更好地理解编译器从哪里获取部分 View 吗？
@Guruprasad Rao 于 2016 年 6 月 1 日回答:
- 除了提到
partialview名称之外，两者没有任何区别。我建议的是提供完全限定的路径，帮助编译器从何处获取partialview。您使用的其中之一将搜索“View”文件夹下的所有目录。所以我说的这个在性能方面会很好。
感谢@Guruprasad Rao 的回答和解释。
干杯~
最佳答案
您应该先将 partialview 从服务器导入到客户端浏览器，然后您可以使用 jquery 操作它。否则，您尝试查找的选择器将不存在元素。用户，@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 - 在 JavaScript 或 jQuery 中获取部分 View 中的 HTML 类名称，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37536322/