daveaglick / FluentBootstrap

Provides extensions, helper classes, model binding, and other goodies to help you use the Bootstrap CSS framework from .NET code.
http://www.fluentbootstrap.com
MIT License
200 stars 76 forks source link

Strange rendering behavior in partial views #50

Open snipervld opened 8 years ago

snipervld commented 8 years ago

Hello. I don't know why FluentBootstrap have weird behavior when using partial views (maybe, because of using using construct in a parent view) When i pass ComponentWrapper to partial (and MvcBootstrapHelper, just in case) and using it in partial, i get: Code: (I know that code was in #49 issue, but here it will come in handy)

@{
    var bs = Model.bs as FluentBootstrap.Mvc.MvcBootstrapHelper<dynamic>;
    var navbarCollapse = Model.navbarCollapse as ComponentWrapper<FluentBootstrap.Mvc.MvcBootstrapConfig<dynamic>, FluentBootstrap.Navbars.NavbarCollapse>;
}
    using (var navbarRight = navbarCollapse.NavbarNav().SetRight().Begin())
    {
        @navbarRight.NavbarLink("Register", "Register", "Account").SetId("register-link")
        @navbarRight.NavbarLink("Login", "Login", "Account").SetId("login-link")
    }

Further goes html code (nav):

<nav role="navigation" id="navbar" class="navbar navbar-default navbar-fixed-top navbar-inverse">
  <div class="container-fluid">
   <div class="navbar-header">
    <a href="/" class="navbar-brand">Brand</a>
    <button type="button" data-toggle="collapse" aria-expanded="false" data-target="#navbar-collapse" class="navbar-toggle collapsed">
     <span class="sr-only">Toggle Navigation</span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
    </button>
   </div>
   <div id="navbar-collapse" class="navbar-collapse collapse">

    <!-- This code produced by Layout and it's ok -->
    <ul class="nav navbar-nav navbar-left">
     <li>
      <a href="/">Main</a>
     </li>
     <li>
      <a href="/Products">Products</a>
     </li>
    </ul>

    <!-- And this code produced by partial and it's weird (look at li elements that outside ul) -->
    <ul class="nav navbar-nav navbar-right">
    </ul>
     <li>
      <a href="/Account/Register" id="register-link">Register</a>
     </li>
     <li>
      <a href="/Account/Login" id="login-link">Login</a>
     </li>
   </div>
  </div>
 </nav>            

and sorry for my not good (bad, for now) english

daveaglick commented 8 years ago

Very interesting - thanks for the reproducible case. If I had to guess off the top of my head, I think this is probably caused by the state stack getting messed up after passing to the partial (FluentBootstrap attempts to keep a stack of all the components you've started so that it can crawl up to get information about the current state).

In any case, hopefully I'll have a chance to dig into this problem soon.

snipervld commented 8 years ago

Sorry for my English Any luck with this problem?

daveaglick commented 8 years ago

Nothing yet - I took an hour or so recently to look at this, but wasn't able to figure out what was going on. I still haven't had a large block of time to dig deeper.

daveaglick commented 8 years ago

Have you had any new insights into this issue? I've started to take a look a couple of times but haven't been able to reproduce the problem (probably due to not having the full environment you're using)...

snipervld commented 8 years ago

Hello. Nothing yet. But I can create a test project for this issue (maybe, it's gone...)