daveaglick/fluentbootstrap

Provides extensions, helper classes, model binding, and other goodies to help you use the Bootstrap CSS framework from .NET code.

daveaglick

The code for the daveaglick.com website.

fluentbootstrap's Issues

SetIcon() on ButtonDropdown()

When using SetIcon() on ButtonDropdown() the resulted span with glyphicon is rendered to

tag instead of tag as expected.

Add overload to .List() that specifies list items

Perhaps as a dictionary and/or params array.

InputFor does not support DisplayFormat

I have this attribute on my model:

[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]

To make this work for InputFor in FluentBootstrap.Mvc v 3.3.5.1 I had to add/change the next two lines in
public static ComponentBuilder<MvcBootstrapConfig<TModel>, Input> InputFor<TComponent, TModel, TValue>() in FluentBootstrap.Mvc\Forms\MvcFormExtensions.cs:

string valueFormat = metadata.EditFormatString;
return helper.Input(name, label, metadata.Model, valueFormat, inputType);

Error: A Bootstrap component is finishing but is not at the top of the stack

I have a simple form that works fine on my machine but gives me error on production server:

System.InvalidOperationException: A Bootstrap component is finishing but is not at the top of the stack, which is usually an indication that a component has been disposed out of order or that more than one component was created in a single using statement.

Source Error: 

Line 13: {
Line 14:     @form.EditorFor(m => m.FirstName);
Line 15: }  <<== error line
Line 16: 

Source File: c:\Article27\Views\Engineers\New.cshtml    Line: 15 

Stack Trace: 

[InvalidOperationException: A Bootstrap component is finishing but is not at the top of the stack, which is usually an indication that a component has been disposed out of order or that more than one component was created in a single using statement.]
   FluentBootstrap.Component.Finish(TextWriter writer) +327
   FluentBootstrap.Component.End(TextWriter writer) +49
   FluentBootstrap.ComponentWrapper`2.End() +18
   ASP._Page_Views_Engineers_New_cshtml.Execute() in c:\Article27\Views\Engineers\New.cshtml:15
   System.Web.WebPages.WebPageBase.ExecutePageHierarchy() +280
   System.Web.Mvc.WebViewPage.ExecutePageHierarchy() +126
...

this is the code in the form:

@using (var form = Html.Bootstrap().Form(FormMethod.Post)
    .SetHorizontal().AddAttribute("enctype","multipart/form-data").Begin())
{
    @form.EditorFor(m => m.FirstName);
}

the original form had more controls but I removed other parts to find problematic part. and I still see the error even with a single control on the form. It seems like a bug.

FluentBootstrap RadioFor() does not check the radio button if the field value is equal to the radio value, contrast to Razor RadioButtonFor() behavior.

The controller

The view

The result

Also, I would like to give you an applause for @Html.Bootstrap().SelectFor() accepting options passed as IEnumerable of KeyValuePair <string,string>. Do you think you can do the same for Radio? (Accepts IEnumerable of string and/or KeyValuePair<string,string> and generates the radio list appropriately)

Thank you in advance and keep up the good work!

div or ul?

Why do we get ("FluentBootstrap lets you output this"):

<div class="navbar-left navbar-nav nav">
 <li>...</li>
 <li>...</li>
</div>

and not:

<ul class="navbar-left navbar-nav nav">
 <li>...</li>
 <li>...</li>
</ul>

InputFor for FormInputType.Password repopulates the field with submitted password (unlike Html.PasswordFor) when returning the submitted model to the view back.

Quoting this stackoverflow page: http://stackoverflow.com/questions/5642849/asp-net-mvc3-html-passwordfor-does-not-populate

"This is as designed. Passwords are not filled to prevent accidental resubmits, and to prevent the page from containing unencrypted passwords. Obviously the password was wrong to begin with if you're posting back the credentials."

EDIT: whoops. email field in the picture was using my real email. removed.

Add support for disabled button elements

We currently support the CSS-driven disabled state for LinkButton, but it looks like Bootstrap recently added support for disabled <button> elements as well: http://getbootstrap.com/css/#button-element-1 This will need to be supported with a separate extension.

Add support for option group in SelectFor

Would it be possible to add support for option groups in the SelectFor helper.

Extensions to make sequences of form elements

For example, a Radio and/or RadioFor extension(s) that takes a sequence of KeyValuePair<string, object> and creates multiple radio buttons. What needs to be passed in? The description and value? What about label?

Update to Bootstrap 3.3.2

Doesn't look like many major changes:
http://blog.getbootstrap.com/2015/01/19/bootstrap-3-3-2-released/

Add support for .SetActive() to DropdownLink

Using .AddCss("active") as a work-around sets the css on the <a> tag instead of on the parent <li> where it should be.

Add .SetReadonly() and .SetPlaceholder() for text area form controls

Should probably make these driven by an interface (IHasReadonly, etc.)

Create additional templates for model properties

We currently support .DisplayFor() and .EditorFor() which use the built-in MVC template mechanism. We should also support creating plain vanilla form controls from the model with extensions like .InputFor(), .SelectFor(), etc.

Form-group is drawn for ValidationSummary despite there being no validation summary

Hey,

Unsure as to why this is happening but an empty form-group is drawn for the validation summary even when the validation summary is empty.

Add model binding for Table

Add support for modals

Add new .AddPartial() extension

This should work like .AddContent() to allow adding the result of a partial view to any given component. Might also want to add a corresponding extension for Html.Action() as well. Also don't forget any appropriate T4MVC support.

Extra form-group div getting added at the end of forms

The code below yields a form tag with an unexpected form-group div appended at the end. Am I missing something?

InputFor() generates incorrect name value for nested entity

This is how the built-in HTML helpers deal with nested entities:

Razor:

@Html.LabelFor(model => model.Album.Price)
@Html.EditorFor(model => model.Album.Price)

HTML:

<label for="Album_Price">Price</label>
<input class="text-box single-line" id="Album_Price" name="Album.Price" type="text" value="" />

Please note that the dot has been replaced by an underscore for the 'id' and 'for' attributes only.

FluentBootstrap handles it differently (incorrectly):

Razor:

 @Html.Bootstrap().InputFor(model => model.Album.Price)

HTML:

 <div class="form-group">
      <label for="Album_Price" class="control-label col-xs-4">Price</label>
      <div class="col-xs-3">
         <input type="text" name="Album_Price" id="Album_Price" class="form-control">
  </div>

Please note that the dot has been replaced by an underscore for the 'name' attribute too.

I would expect the name of the markup generated by the FluentBootstrap helper to be the same. This also breaks my model binding.

I have changed GetControlName to fix this is my project. It now does this:

return helper.GetConfig().HtmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(expressionText);

I also added these lines to Tag.OnStart():

if (string.Equals(attribute.Key, "id", StringComparison.Ordinal) || string.Equals(attribute.Key, "for", StringComparison.Ordinal))
    {
        encoded = TagBuilder.CreateSanitizedId(encoded);
    }

Generate site navigation

Where should this get data from? Is there a de facto site map provider? Ideally we would support any level of the site map for any Bootstrap nav component.

Add Support for Tab panels

Add Support for Tab panels with fluent api.

Strange rendering behavior in partial views

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

Generate page navigation

Pull outline from headers. Allow specifying depth. Choice of components for outline: list, nav, tab, pill, etc. Need to figure out how to get headers that come after ToC - some kind of placeholder with JS based replacement? Generate anchor links for headers that have anchors.

Generate anchor tags for headers

Should anchor tag generation be opt in or opt out? How should we refer to the auto generated anchor tags from other links?

Navbar Fixed

The bootstrap navbar component can be fixed to the top or the bottom of the viewport with the class navbar-fixed-top and navbar-fixed-bottom.

Add support for fixed navbars.

See: http://getbootstrap.com/components/#navbar-fixed-top

Add support for boostrap v2.3.2

Hi,

Can you add support for old bootstrap (version 2.3.2) ?

Many thanks.

Support InputFor inside InputGroup

Is it possible for InputGroups to support EditorFor and InputForm elements.

Or if the EditorFor can also have a InputGroupAddon()

SetControlLabel no longer accepts raw HTML as parameter

If I use the below as the parameter for the function it is rendered on the page as below making it difficult to style the items in the label.

.SetControlLabel("SQL Server <span class='badge badge-primary'>Recommended</span>")

Add support for active state to buttons

See http://getbootstrap.com/css/#buttons-active

How to apply style to the list items (the <li ..>) that is generated (@Html.Bootstrap().ListFor)

Hello

I am trying apply styles to the list items generated by @Html.Bootstrap().ListFor

It applys the CSS style correctly to the UL it generates to contain the LI

This need has come becuase I am trying to use this in conjunction with
Bootstrap HTML5 Sortable jQuery Plugin
at https://github.com/psfpro/bootstrap-html5sortable
which requires it have a class for the LI to be properly styled

I am using asp.net mvs razor and the model is passed into the View via my controller

Many thanks in advance

Add Forms.Form functionality to NavbarForm's ComponentBuilder

Form methods (e.g., SetAction, HideValidationSummary) don't seem to work with NavbarForm's ComponentBuilder.
Thank you.

Passing Html string into Text now renders as text

Hi,

When making a @Html.Bootstrap().Button("<span class=\"fa fa-3x fa-clock-o\"></span>", ButtonType.Button)

Now renders as <button type="button" class="btn btn-default"> &lt;span class="fa fa-clock-o fa-3x"&gt;&lt;/span&gt; </button>

It used to work in earlier versions... Is there any good reason to have changed that ?

Thanks :)

Update to Bootstrap 3.3.5

http://blog.getbootstrap.com/2015/06/15/bootstrap-3-3-5-released/

How to create a tab-pane?

The docs show how to create tabs, but not how to actually do anything useful with them. How does one create a tab-pane section and make it active with the tabs?

Add a new .Footnote() extension

Use an incrementing counter for the footnote number. Use a superscript link with optional tooltip for the footnote. Also add a .Footnotes() extension that outputs all footnotes. Should this be required to go after all footnotes? Should an exception be thrown if not?

Add support for Font Awesome

Need to decide how this should fit in with Bootstrap icons. Should they be added to the Bootstrap icon enum in the base library (with a prefix perhaps). Or maybe an additional extension library with a separate enum and extra extensions for every method that takes an icon.

Add HTML5 input form control restriction attributes

max, min, etc.

Add support for .SetIcon() for more components

Ideally just need to implement IHasIconExtensions but need to be careful that adding the icon as a child works in each case.

PaginationFor

In the spirit of the just-created RadioList feature addition discussion thread, I would also like to bring forth the idea of a more powerful pagination.

Attached below is the (very) rough proof of concept for PaginationFor. Do you think it will fit into the FluentBootstrap library?

The controller

Extension methods for IQueryable and IEnumerable to IPagination
Separated IQueryable and IEnumerable extensions for performance reason, since with EntityFramework, LINQ queries are performed against SQL, not in-memory!

The view

quick and dirty pagination HTML Helper

what IPagination looks like...

The result

Source classes downloadable here:
https://www.dropbox.com/s/hm1r0797wdgyq8l/FluentBootstrapPaginationPOC.zip?dl=0

Fix the indexing for EditorListFor() and DisplayListFor()

See http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/

Implement TextAreaFor()

Razor has @Html.TextArea() and @Html.TextAreaFor().

Bootstrap().TextArea() exists, but not Bootstrap().TextAreaFor().

Apparently there's no InputType.TextArea nor any extensions that transform Bootstrap().InputFor() to <textarea> as well, so I doubt the lambda expression version of the html helper to model property for <TextArea> is actually implemented. Correct me if I'm wrong tho.

Thanks in advance!

Add a .Heading() overload that takes the heading size

This will allow more programmatic control over heading size.

Add a .SetDisabled() extension for checked form controls

Should also add it to fieldset. Probably need to create an IHasDisabledAttribute interface and apply it where necessary.

Make TextContent take an IHtmlString instead of a string

Is it possible to have navbar dropdown label allow HTML instead of plain text? I need to add an icon to the left of the caret, sort of like user icon in the image below.

Update to Bootstrap 3.3.4

http://blog.getbootstrap.com/2015/03/16/bootstrap-3-3-4-released/

DropdownLink with Icon in Navbar

Hello, i recently found FluentBootstrap and began love it. When i tried to combine standart visual studio template with FluentBootstrap, i found that i cannot assign icon to dropdown link. In code, which is listed below (it doesn't work, getting errors), i tried to solve this problem. but without luck.

Code:

@{
   var bs = Html.Bootstrap();
}
@using (var dropdown = bs.Dropdown().Begin())
{
   using (var toggle = dropdown.DropdownHeader().Begin())
   {
      @bs.Icon(Icon.User)
      @User.Identity.GetUserName()
   }
   @dropdown.DropdownLink("Profile", "Index", "EditProducts").AddChild(x => bs.Icon(Icon.User))
   if (User.IsInRole("Full,Editor"))
   {
      @dropdown.DropdownLink("Edit", "Index", "EditProducts").AddChild(x => bs.Icon(Icon.Edit))
   }
   @dropdown.DropdownDivider()
   using (dropdown.DropdownLink("").Begin())
   {
      @bs.Button("Logoff", ButtonType.Submit)
   }
}

And one more question. How to combine form's submit button with dropdown link (with icon, of course)?
Thanks

FluentBootstrap SelectFor() does not select the option which value is equal to the property value, contrast to Razor DropDownListFor() behavior.

The Controller

The View

The Result

Thank you in advance and keep up the good work!

Writing custom extension methods for nested elements

I'm trying to write some custom extension methods and have been successful with ones like this:

    public static ComponentBuilder<MvcBootstrapConfig<TModel>, Element> TaskDialogBody<TComponent, TModel>(
        this BootstrapHelper<MvcBootstrapConfig<TModel>, TComponent> helper, string title)
        where TComponent : Component, ICanCreate<Tag>
    {
        return helper.Div(helper.Heading2(title).ToString()).AddCss("dialog-header");
    }

But I can't get my head around how to create nested elements without that ToString() call. For example, I need an extension method a div within a div and allow the caller to provide the content to be inserted in the inner div. How do I achieve this without converting the interior div to a string first? Any examples someone can point me to?

Stack Empty Exception - caused by "Bootstrap().Dropdown"

Synopsis

Creating a test harness to learn the library, using samples from website/docs causes a "Stack Empty Exception" to be thrown.

Software Used

Visual Studio 2013 Ultimate (Update 4)
Windows 7 X64
Bootstrap 3.1.1 (NuGet Package)
FluentBootstrap.Mvc (Current NuGet Package)
.NET Runtime V4
IIS7.5

Hardware Used

Intel Core I7 3ghz 4 core w hyper threading enabled

To Reproduce

• 1. Fire up VS2013, start a new Web Application project (Make sure it's the web application for VS2013 - NOT The MVC4 template under the VS2012 subtree.
• 2. Make sure you create an EMPTY web application, and add MVC and Web API capabilitys
• 3. Use NuGet and add the current Bootstrap, FluentBootStrap & FluentBootStrap.Mvc packages
• 4. Create a simple controller called 'HomeController', add an 'Index' action and have it return a view
• 5. When creating the view, choose to use a layout file, and let VS scaffold it for you
• 6. Add the following line (Copied from the docs) to the view and run the app [Note: everything works] - @Html.Bootstrap().Alert(AlertState.Info, "Warning", "Yikes, this is a warning.")
• 7. Add the following line (Copied from the docs) to the view and run the app [Note: the exception is seen] - @Html.Bootstrap().Dropdown("My Dropdown").SetSize(ButtonSize.Xs).SetState(ButtonState.Warning)

Supporting Materials

YSOD as produced when running the solution

View that causes the above YSOD

_layout.cshtm (Used to produce full view)

Resolution

Removal of the line used to create the dropdown from the view and re-running prevents the empty stack exception.

A project configured for NuGet package restore can be zipped and provided if requested.