CSS not loading because of div in Visual Studio MVC

I'm using visual studio 2013 MVC and I have my _Layout which has a template, all the scripts are loaded in my view Index and in my _layout I have a navbar, the navbar is supposed to have a messages dropdown menu that uses a lot of css and js.

When I load the messages as a partial view everything works, but when I try to use JQuery to reload the data on its own, I have to put it inside a div. Doing so breaks all the style like there was no Css, I have also tried just changing the id of a parent div and that also breaks the style. I'm using AdminLTE 2.

Examples:

when it is like this, it works

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

just changing it to this breaks the style

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

Additionally this is how I'm reloading that part

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

And I'm using public PartialViewResult Notifications() in my controller

and the partial view is this:

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

How to make the style work or use a different method to reload constantly that part? Mainly anything that doesn't use a div will work I think.

I am loading the data from database so that's why it must pass through the controller.

on _layout I placed just the <body> of the adminlte, then on the main area for the page I placed the @renderbody() which renders the index. the index contains the of the Adminlte template and most scripts

728x90

1 Answers CSS not loading because of div in Visual Studio MVC

With styles

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

and list items

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

I see no difference in effects of styles delivered by class selectors .dropdown or .notifications-menu, and additional specificity to div elements also works as expected. How are your style selectors declared?

1 weeks ago