时间戳

首页 > 解决方案 > 由于 Visual Studio MVC 中的 div，CSS 未加载

javascript - 由于 Visual Studio MVC 中的 div，CSS 未加载

问题描述

我正在使用 Visual Studio 2013 MVC，我的 _Layout 有一个模板，所有脚本都加载到我的视图索引中，在我的 _layout 中我有一个导航栏，导航栏应该有一个使用很多的消息下拉菜单css 和 js 的组合。

当我将消息作为部分视图加载时，一切正常，但是当我尝试使用 JQuery 自行重新加载数据时，我必须将其放入 div 中。这样做会破坏所有样式，就像没有 Css 一样，我也尝试过更改父 div 的 id，这也破坏了样式。我正在使用 AdminLTE 2。

例子：

当它是这样的时候，它起作用了 

<li class="dropdown notifications-menu">
  <!-- Menu toggle button -->
  @Html.Action("Notifications", "Home")
</li>

只是把它改成这样就破坏了风格

<li class="dropdown notifications-menu">
  <!-- Menu toggle button -->
  <div>
    @Html.Action("Notifications", "Home")
  </div>
</li>

此外，这就是我重新加载该部分的方式

<script>
  window.onload = function () {
    refreshNotifications();
  }

  function refreshNotifications() {
    console.log("Reload...");
    $.ajax({
      url: 'Home/Notifications',
      type: 'get',

      success: function(result) {
        //$("#partialsgpthing").html(result);

        // $("#navbar").html(result);
      }
  });

  setTimeout('refreshNotifications()', 30000);
}
</script>

我public PartialViewResult Notifications()在我的控制器中使用

部分观点是这样的：

<a href="#" class="dropdown-toggle" data-toggle="dropdown">
    <i class="fa fa-bell-o"></i>
    <span class="label label-warning">@ViewBag.Notifications</span>
</a>
<ul class="dropdown-menu">
    <li class="header">Tiene @ViewBag.Notifications notificaciones</li>
    <li>
        <!-- Inner Menu: contains the notifications -->
        <ul class="menu" style=" max-height: 200px; margin: 0; padding: 0; list-style: none; overflow-x: hidden;">
            @foreach (string notification in ViewBag.NotificationMsgs) {
            <li>
                @{string[] detail = notification.Split('|');}

                <!-- start notification -->

                <a href="@detail[8]">
                    <i class="fa @detail[3] @detail[4]"></i> @detail[5]<br />@detail[2]
                </a>
            </li>
            }
            <!-- end notification -->
        </ul>
    </li>
    <li class="footer"><a href="#">Ver todas</a></li>
</ul>

如何使样式起作用或使用不同的方法不断重新加载该部分？我认为主要是任何不使用 div 的东西都会起作用。

我正在从数据库加载数据，这就是它必须通过控制器的原因。

在_layout 上，我只放置<body>了adminlte，然后在页面的主要区域上放置了@renderbody()呈现索引的页面。该索引包含 Adminlte 模板和大多数脚本

标签： javascriptjquerycssrazormodel-view-controller

解决方案

有款式

<style type="text/css">
    .dropdown {font-size:2em;} 
    .notifications-menu {color:red;} 
    .dropdown div, .notifications-menu div {font-weight:bold;}
</style>

并列出项目

<ul>
    <li class="dropdown notifications-menu">
        <!-- Menu toggle button -->
        @Html.Action("Notifications", "Home") 
    </li>
</ul>
<ul>
    <li class="dropdown notifications-menu">
        <!-- Menu toggle button -->
        <div>
            @Html.Action("Notifications", "Home")
        </div>
    </li>
</ul>

我发现类选择器 .dropdown 或 .notifications-menu 提供的样式效果没有差异，并且 div 元素的额外特异性也可以按预期工作。您的样式选择器是如何声明的？

推荐阅读