Consider the base markup for a navbar:

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

I would like to use the NavBuilder to generate that <ul> tag that represents the navbar items. This works just fine today, with the exception that you cannot generate a nav that is just <ul class="nav"> -- there is always a specific NavType attached. While NavType.List does come close, the styling is subtly different and I'd like to minimize surprises.

Hi!
In my application i use ASP.NET MVC Areas functionality for segregation of different application parts.

To generate links i use code like this:

@Html.ActionLink("Home", "Index", "Dashboard", new { area = "Admin" }, null)

I've tried to apply TwitterBootstrapMvc for my application, but found that TwitterBootstrapMvc doesn't support Areas and ActionLink has overload for linkText, actionName and controllerName only.

Is there any workarounds?

Hi,

Thanks for adding the ValidationSummary helper.

But I think as of now, it does not support the arguments found in Html.ValidationSummary().
ie
Html.ValidationSummary(true) ->To hide property errors
Html.ValidationSummary("Error Message") ->Display a message before other messages
Html.ValidationSummary(true,"Error Message")

Thanks.

Could do with a submit button helper method that will simply return the html
<input type="submit" value="Save" class="btn" />

and when pressed will obviously just submit any form it's on.

...
@Html.Bootstrap().ControlGroup().TextBoxFor(x=>x.Name)
@Html.Bootstrap().ControlGroup().SubmitButton() // Something like this
...

-- Lee

Id like to be able to achieve the below

<a href="/#">link text<i class="icon-warning-sign pull-right"></i></a>

Font Awesome is a Bootstrap extension that replaces the default glyphicons with a font-based icon system including hundreds of additional icons.

It also has the ability to stack multiple icons on top of each other to create combination icons among other things.

Take a look at the examples page: http://fortawesome.github.io/Font-Awesome/examples/

Could we add these abilities to this extension IF font awesome is also installed?

Couple of small issues.
I use now the version 2.3.2 which I've installed manually. The issues were exactly the same in the previous versions.

If I add a custom validation error message to the field in the control group, then I can see on the page not only the message itself (next to the field, same as any other validation messages), but the whole control group marked by the error style:

In the controller:

ModelState.AddModelError("LCode", "Language Code must be unique!")

The related field in the view:

@Html.Bootstrap().ControlGroup().TextBoxFor(Function(model) model.LCode)

Resulted page source:

<div class="error control-group">
<label class="control-label" for="LCode">Language Code<span class="required">*</span></label>
<div class="controls">
<input class="input-validation-error" id="LCode" name="LCode" type="text" value="AF" />
<span class="help-inline">
<span class="field-validation-error" data-valmsg-for="LCode" data-valmsg-replace="true">Language Code must be unique!</span>
</span>
</div></div>

It doesn't look bad, but there is inconsistency: error message disappears if I move to another field, but the error style doesn't.

If I have a dropdown list in the view:

@Html.Bootstrap().ControlGroup().DropDownListFor(Function(model) model.AppTypeId, ViewBag.AppTypeId))

where ViewBag.AppTypeId is a SelectList object:

ViewBag.AppTypeId = New SelectList(_db.Query(Of ApplicationType), "AppTypeId", "AppType", myapplication.AppTypeId)

the dropdown list appear but the first item is selected always.
ViewBag.ApptypeId contains the correct selectedValue. It can be seen on the page if I display ViewBag.AppTypeId.selectedValue and the following code shows dropdown list with properly selected item:

<div class="editor-label">
    @Html.LabelFor(Function(model) model.AppTypeId)
</div>
<div class="editor-field">
    @Html.DropDownList("AppTypeId", "-- Select Type --")
</div>

new Nav().Style(NavType.List) generates
class="nav nav-tab"
should be
class="nav nav-list"

also could use fluent methods for menu header:

Extension . FormMethod causes an error:

Error 473 'FormMethod' is ambiguous because multiple kinds of members with this name exist in class 'TwitterBootstrapMVC.Form'.

Version 2.1.6

When creating a NavBar using Nav helpers how can I add the class "pull-right" to a Nav to move it to the right of the NavBar?

For example....

<div class="navbar">
              <div class="navbar-inner">
                <div class="container">
                  <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </a>
                  <a class="brand" href="#">Title</a>
                  <div class="nav-collapse collapse navbar-responsive-collapse">
                    <ul class="nav">
                      <li class="active"><a href="#">Home</a></li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Action</a></li>
                          <li class="divider"></li>
                          <li class="nav-header">Nav header</li>
                          <li><a href="#">Separated link</a></li>
                        </ul>
                      </li>
                    </ul>
                    <ul class="nav pull-right">
                      <li><a href="#">Som link to the right</a></li>
                    </ul>
                  </div><!-- /.nav-collapse -->
                </div>
              </div><!-- /navbar-inner -->
            </div>

https://github.com/DmitryEfimenko/TwitterBootstrapMvc/blob/master/TwitterBootstrapMVC/Controls/Table.cs

The _caption field should be private instead of public I guess.

PS: mayby I am wrong and are you making it public on purpose, but I guess you expose it already in the method Caption so ?

btw thx for adding the table options to the lib.

Hi Dmitry,

I just notice that between buttons in form action, there is no spaces, it make buttons stick close together.

Since I put code in the @using block, I must add

<text> </text>

just for a space.

Should you put a single space between buttons? It will help a lot. Thanks

It always prepends the icon no matter whether I use IconAppend or IconPrepend for the custom css class overload. The Icons enumerator overload works correctly.

Having an issue where the default form in the Bootstrap 3 helpers always adds the col-lg-2 and col-lg-10 default widths to the form-group label and div, even though they are not specified.

Only the enumerator overloads for built-in icons exist. I use font awesome and have no way to use them without these overloads.

I was pretty excited to see that the new form disposable will accept an ActionResult, but it doesn't work with the async version. T4MVC now generates proper code to support async, so it would be cool if I could pass Task<ActionResult> in here, too.

Latest version 2.1.5 from NuGet throws an exception for the code below:

@Html.Bootstrap().SubmitButton().Text("Save").Style(ButtonStyle.Primary).IconPrepend(Icons.ok, true)

[NullReferenceException: Object reference not set to an instance of an object.]
TwitterBootstrapMVC.TypeExtensions.TypeExtensions.FormatHtmlAttributes(IDictionary2 htmlAttributes) +87 TwitterBootstrapMVC.Controls.BootstrapIcon.ToHtmlString() +94 TwitterBootstrapMVC.Controls.BootstrapButtonBase1.ToHtmlString() +1098
System.Web.HttpUtility.HtmlEncode(Object value) +38

We are using a template that allows for styled checkboxes. The problem occurs when we render the checkbox. It puts a hidden field before the required tag. If the tag does not come directly after the checkbox it will fail to render.

This is the hidden field the code is adding..
<input name="EnableAD" type="hidden" value="false">

This is the non-working result. The hidden input field is rendered before our lablel tag causing it to fail.

<label class="checkbox" for="EnableAD"><input checked="checked" class="ace-switch ace-switch-7" data-val="true" data-val-required="The EnableAD field is required." id="EnableAD" name="EnableAD" type="checkbox" value="true" /> <input name="EnableAD" type="hidden" value="false" /> <span class="required">Enable</span></label>

This is a working result (trying to achieve this output). Notice the hidden input field is not in the label tag.

<label class="checkbox" for="EnableAD"><input checked="checked" class="ace-switch ace-switch-7" data-val="true" data-val-required="The EnableAD field is required." id="EnableAD" name="EnableAD" type="checkbox" value="true" /> <span class="required">Enable</span></label> <input name="EnableAD" type="hidden" value="false" />

So, what we need to find out is how to render or remove the hidden field so our label shows first instead. Any ideas?

Do you plan to add a helper to build a navbar?

It should contain the SetLinksActiveByController and SetLinksActiveByControllerAndAction like nav does too. And allow for dropdowns, etc.

Will you update TwitterBootstrapMVC for use with Bootstrap 3 ? 👍

If I apply additional classes using HtmlAttributes like this

Html.ActionLinkButton().HtmlAttributes(new { @class = "btn-flat" })

then the HTML will be rendered without the .btn class like below

<a class="btn-flat"/>

Should the .btn always be included by default?

I have some classes

class Foo 
{
    public int id;
    public int barId;
    public virtual Bar Bar;
}

class Bar 
{
    public int id;
    [Display(Name = "BarDispName")]
    public string name;
}

public class FooMap : EntityTypeConfiguration<Foo>
{
    public FooMap()
    {
        // Primary Key
        this.HasKey(t => t.id);

        // Relationships
        this.HasRequired(t => t.Bar)
            .WithMany(t => t.Foos)
            .HasForeignKey(d => d.barId);
    }
}

The closes thing I need is

@Html.Bootstrap().ControlGroup().DropDownListFor(m => m.barId, ViewBag.barId as IEnumerable<SelectListItem>)

The problem is that generated label is 'bar Id*', but I want it to be the same as

@Html.LabelFor(m => m.Bar.name)

plus '*' if needed.

So I suggest to add an overload to DropDownListFor with two expressions:

• For 'Required' rules (adding *) and for attributes like

  label.for, select.{id, name, data-val-required, data-val-number}
  

• For text of the label

If there is a way to do it now, I would be glad to know about it.

Hi,

an ability to do .Title("text") on both ActionLinkButton and ActionLink.

Thanks.

https://github.com/DmitryEfimenko/TwitterBootstrapMvc/blob/master/TwitterBootstrapMVC/Controls/BootstrapButton.cs#L199

It's possible:
iPrependString replace to iAppendString

Hi, Im trying to use typeahead helper but always I get this error:

Uncaught TypeError: Cannot call method 'toLowerCase' of undefined

Hi Dmitry,

Can the ListBox/ListBoxFor() be added to the framework too? I use this option for multi select lists.

Thanks.

It would be nice if the HelpText method would use the Description parameter from the DisplayAttribute of the property by default.

eg.
[Display(Name = "Name", Description = "Enter a name")]

@Html.Bootstrap().ControlGroup().TextBoxFor(m => m.Name).HelpText()

Could display a help-inline message of "Enter a name" next to the field.

i cant use

@using(Ajax.Bootstrap().Begin(new Form())) { }

or Ajax.Bootstrap().ActionLink

i can use only Html.Bootstrap()

could you add it ?

I would like to request an enhancement for bootstrap3 support

1. The code

@Using mdl = Html.Bootstrap().Begin(New Modal().Fade.Id("modalDelete"))
End Using

produces expected output:

<div class="modal hide fade" id="modalDelete"></div>

But if I add an extension .HtmlAttributes(New With {.data_test_value = "testValue"}) output will be wrong:

<div class="fade" data-test-value="testValue"></div>

Probably not an issue just a question.
I want to have a closing button ("x") on the Modal dialog.
Bootstrap has ".close" and "button.close" styles, and closing button looks like:

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

But if I use the code

@Html.Bootstrap().Button().Text("×").HtmlAttributes(New With {.data_dismiss = "modal", .class = "close", .aria_hidden = "true"})

style "btn" is always there:

<button type="button" class="btn   close" data-dismiss="modal" aria-hidden="true">&times;</button>

Hi,

I'd like to see the bootstrap datetimepicker made it in this project. Link:
https://github.com/smalot/bootstrap-datetimepicker

Also, i'd like to be able to add multiple icons with the AppendIcon().
The datetimepicker has 2 icons at the end of the textbox. One for clearing it up, and another one as the calendar.

Hi Dmitry,

Please add the above feature if possible to take advantage of Data Annotations from my classes.

Thanks

So that I can say

@Html.Bootstrap().TextBoxFor(m => m.Email)
                 .Placeholder("Email")
                 .Prepend("icon-envelope")

and it'd render:

<div class="input-prepend">
  <span class="add-on">
    <i class="icon-envelope"></i>
  </span>
  <input type="text" id="" name="" PlaceHolder="Email">
</div>

the nuget links to the twitterbootstrap license, but you dont have a a license file defined in this repo. Can you define a license for this project?

After upgrade from 2.3.2 to 3.0.3 got an exception:
error BC30456: 'Bootstrap' is not a member of 'System.Web.Mvc.HtmlHelper(Of Object)'.

Have the ability specify HTML5 input types such as <input type="email"> or <input type="url">.

Something like

@Html.Bootstrap().TextBoxFor(m => m.Email, "email").Placeholder("Email here")

that renders:

<input id="Email" name="Email" 
           placeholder="Email here" 
           type="email" value="">

Hello Dmitry,

I know you are working on TwitterBootstrapMvc to support the latest version of Bootstrap 3.0. Thank you for the great work that you are doing.

I am excited and just wanted to know if you have any date for the release of the product TwitterBootstrapMvc 3.0?

Regards,

Setting the type on a form causes a NullReferenceException. I've distilled the error down to this base case:

@using (Html.Bootstrap().Begin(new Form().Type(FormType.Horizontal)))
{
}

Any value of FormType causes the error, except for _NotSet.

.Label extension with the .TextBoxFor

@Using Html.Bootstrap.Begin(New Form("Create", "MyApplication").Type(FormType.Horizontal))
     @<fieldset>
        <legend>MyApplication</legend>
        @Html.Bootstrap().ControlGroup().TextBoxFor(Function(m) m.Name).Label().LabelText("aaa")
    </fieldset>
End Using

works properly - field label is replaced by "aaa".
But if I use .Label with the .DisplayTextFor :

 @Using Html.Bootstrap.Begin(New Form("Details", "MyApplication").Type(FormType.Horizontal))
      @<fieldset>
        <legend>MyApplication</legend>
            @Html.Bootstrap().ControlGroup().DisplayTextFor(Function(model) model.Name).Label().LabelText("aaa")
    </fieldset>
End Using

there is a problem somewhere - the whole corresponding field is not shown in the form.

Hi!

First of all, thank you VERY VERY MUCH for your work, you're a life saver!

As my project is growing and I need to create entities with entities as properties (for example, an entity "Client" has a property "Person") I have noticed that when I try

@Html.Bootstrap().ControlGroup().TextBoxFor(model => model.Person.Name)

the control is created with everything (label, input and validation message area), but no validation data is created in the input!! I really don't know if I am missing something or if it is really an issue.

Oh, if I try to create or edit a not-valid entity (like the Client above), after the server-side validation all the inputs are created with the validation data in them.

Thanks!

Stephan

would be nice to have

@nav.ActionLink("link text", "action").IconAppend(Icons.book)

generates:

<li><a href="/action"><i class="icon-book"></i> link text</a></li>

When using a nav bar it matches only on controller or controller+ation to determine whether to highlight a link as active.

If you have a "Home" controller and "Index" action in multiple areas this causes multiple nav entries to be highlighted.

Add a condition boolean to the .Disabled Extention Method so we can rewrite
if (Model.HasConfig)
{ @Html.Bootstrap().ActionLinkButton("txt", MVC.x.Config())}
else
{ @Html.Bootstrap().ActionLinkButton("txt", MVC.x.Config()).Disabled()}

to:
@Html.Bootstrap().ActionLinkButton("txt", MVC.x.Config()).Disabled(!Model.HasConfig)

Example is for button but I assume this is handy everywhere .Disabled() is used as an extention method in BMVC.

See http://www.codeproject.com/Messages/4626151/Conditional-Fluent.aspx

Basically allow to prepend/append icons to tab headers, something along the lines of:

@using(var tabs = Html.Bootstrap().Begin(new Tabs("myTabs")))
{
    tabs.Tab("Tab1").PrependIcon(Icons icon);
    tabs.Tab("Tab2").AppendIcon(Icons icon);

    using(tabs.BeginPanel())
    {
        ...
}

And that results into this markup:

<ul id="myTabs" class="nav nav-tabs">
  <li class="active">
    <a href="#home" data-toggle="tab">
      <i class="icon-play-circle"></i>Home</a>
  </li>
  ...
</ul>

This also brings up another question: how to provide a hook for one-off cases like this where one would want to use the fluent syntax but also be able to tweak some of the generated output - coz I'd like to use the fluent syntax as much as possible.

The last update (2.3.1) through NuGet brings only .nuspec and .nupkg files. No library file.

There is a method .Title() on ActionLink to attach a tooltip. Can we have it on a simple Link ? And with placement options ?

I think the PasswordFor must give a blank textbox and shouldn't have prefilled value. The default PasswordFor included in MVC is working that way too.

.ShowValidationMessage on FormGroups does not have a default value, which means true or false must always be specified. Maybe this would be better if it did specify true?