erichexter/twitter.bootstrap.mvc

nuget package to make bootstrap easy with mvc4

#twitter.bootstrap.mvc

##Overview This is the nuget package for quickly adding Twitter Bootstrap to an ASP.Net MVC 4 application.

See the overview blog post for screen shots and features. This is a User Interface project that does not require a specific data access or architecture for you MVC applications. The author has some opinions but those are kept in another project that builds on top of this UI package.

##Features

• JS and CSS bundling/minification of Twitter Bootstrap files the MVC4 way
• Incorporate a jQuery validation fix to work with the bootstrap javascript
• Razor Layout templates using Twitter Bootstrap markup.
• Menus using Navigation Routes, including submenus and hiding menus by context(logged in vs anonymous)
• Runtime Scaffolding – default Index, Edit and Detail views.. You provide the POCOs and we will render the CRUD views.
• Post Redirect Get support using the Bootstrap Alert styles.
• A Sample to show how to use all of this stuff

Things we are working on:

• MVC code templates to generate new views from the mvc add view / add controller dialogs
• Strongly typed Html Helpers to render bootstrap concepts like icons

##Install To view a working sample, install the twitter.bootstrap.mvc4.sample in to a MVC4 Empty (template) project.

> Install-Package twitter.bootstrap.mvc4
> Install-Package twitter.bootstrap.mvc4.sample
> Install-Package twitter.bootstrap.mvc4.templates //for MVC Code Templates..(still a work in progress)

###Preview Releases Preview Releases: The preview releases are on this nuget feed (http://www.myget.org/F/erichexter/)

Build Status:

##Contribute

Place your source code in the src\Bootstrap directory, or make your modifications. Run the build.ps1 from the Package Manager Console to create the packages locally.

From a separate VS instance do an install-package for the local package your interested in. Or, to start a fresh MCV project with all twitter.bootstrap.mvc4.* installed, run Test\EndToEnd\test.ps1.

Before your pull request will be accepted you will need to complete the Contributor Agrement: http://sdrv.ms/13eMRXm

Brought to you by Eric Hexter

twitter.bootstrap.mvc's Issues

Support for MVC Areas in NavigationRoutes

Given the following MVC Area Registration:

    public class AdminAreaRegistration : AreaRegistration
    {
        public override string AreaName
        {
            get
            {
                return "Admin";
            }
        }
        public override void RegisterArea(AreaRegistrationContext context)
        {
            context.MapRoute(
                "Admin_default",
                "Admin/{controller}/{action}/{id}",
                new {controller="main", action = "Index", id = UrlParameter.Optional }
            );
        }
    }

and using the following configuration:

  routes.MapNavigationRoute<MainController>("Admin", c=>c.Index());

When using

  @Html.Navigation()

the extension method will generate the following URL

~/main/index

Instead of

~/Admin

Missing Edit.cshtml in Shared folder ?

When on the Index page and clicking the edit action u get an error that there was no Edit.cshtml page found.

Everyone will need to sign the contributor agreement

http://sdrv.ms/13eMRXm

extract navigation routes

• Lift and shift navigation routes into the new reop
• build a nuget package and build for the navigation routes
• consumer navigation routes package dependency
• rework navigation routes
• integrate new navigation routes in a branch in bootstrap

Bad url for "Home" controller actions

"NavigationRouteConfigurationExtensions" generate incorrect url when a action in HomeController (different from index) is added.

File NavigationRouteConfigurationExtensions, method CreateUrl.

Patch:

public static string CreateUrl(string actionName, string controllerName)
{
if (controllerName.Equals("home", StringComparison.CurrentCultureIgnoreCase))
{
if (actionName.Equals("index", StringComparison.CurrentCultureIgnoreCase))
{
return "";
}
//else
//{
// return actionName.ToLower(); <-- Incorrect url for home controller action
//}
}

        return controllerName.ToLower() + "/" + actionName.ToLower();
    }

htmlAttributes not forwarded

Sorry, Github still 404's when trying to edit online.

The bug in src/Bootstrap/BootstrapSupport/ControlGroupExtensions.cs is on line 35. The htmlAttributes parameter is not forwarded on.

Runtime Error with jQuery 1.9 and jQuery.Validate.js

Hi Eric

I'm having some problems with this. I've run the package installer directly on an empty MVC 4 site but seem to be getting some severe javascript issues.

I've not made any changes to the code at all.

I've posted a question on Stackoverflow: http://stackoverflow.com/questions/14459651/twitter-bootstrap-for-asp-net-mvc-4-jquery-1-9-and-jquery-validate-js

Would you mind taking a look, please? I can't figure this out myself. :)

Cheers,

Paul.

Examples of the Navigation features

After installing this nuget package, the one thing I had a hard time grokking from the sample project was the Navigation-related features.

An example would be really useful to show how to set up NavigationRoutes and how those differ from other routes I might define in the application...

For example, it looks like the Navigation related pieces of this package take care of adding the 'active' class to the current route, but how do I define a set of routes "underneath" one of the items on the main menu, or is that against the convention?

dropdown-menu on Azure

Hi,

I've deployed the mvc sample on Azure and noticed that a dropdown-menu does not work on Azure, it does, however, work if the solution is deployed locally. The dropdown-toggle button is displayed on Azure, but nothing happens if clicked.

Has anyone seen similar behavior?

Thanks,
Bart

Support for Order property

Hi.
ViewHelperExtensions.cs -> VisibleProperties() extension ignores DisplayAttribute "Order" property in models.

I have suggest simple solution for this:

public static PropertyInfo[] VisibleProperties(this IEnumerable Model)
        {
            var elementType = Model.GetType().GetElementType();
            if (elementType == null)
            {
                elementType = Model.GetType().GetGenericArguments()[0];
            }
            return elementType.GetProperties().Where(info => info.Name != elementType.IdentifierPropertyName()).OrderedByDisplayAttr().ToArray();
        }

        public static PropertyInfo[] VisibleProperties(this Object model)
        {
            return model.GetType().GetProperties().Where(info => info.Name != model.IdentifierPropertyName()).OrderedByDisplayAttr().ToArray();
        }

        // Support for Order property in [Display()] attribute
        public static IOrderedEnumerable<PropertyInfo> OrderedByDisplayAttr(this IEnumerable<PropertyInfo> collection)
        {
            return collection.OrderBy(col =>
            {
                var attr = col.GetAttribute<DisplayAttribute>();
                return (attr != null ? attr.GetOrder() : null) ?? 0;
            });
        }

Controller alert methods should be extension methods rather than BootstrapBaseController

I suggest Attention, Success, Information, and Error are made extension methods.

Align package naming with sirkirby's `twitter.bootstrap.mvc` package

The package naming used by sirkirby's package twitter.bootstrap.mvc and erichexter's package twitter.bootstrap.mvc4 is confusing.

I think it would be in everybody's best interest to get this sorted out quickly. The sooner, the better. considering both packages are getting some traction (5k+ downloads in several months).

Chris Kirby (a.k.a. sirkirby at nuget & github maintains the twitter.bootstrap nuget package (80k+ downloads), on which erichexter's twitter.bootstrap.mvc4 has a dependency. sirkirby also maintains the twitter.bootstrap.mvc package, which adds bundling and minification for twitter.bootstrap assets to mvc_4_ projects.

I'm developing an MVC4 app and want to add Twitter Bootstrap. Do I ...

PM> Install-Package twitter.bootstrap.mvc4

OR

PM> Install-Package twitter.bootstrap.mvc ?

From what I understand from both projects, by inspecting sirkirby's code and readme and erichexter's code and documentation, the projects only have small overlap: the bundling and minification, and the targeting of mvc4. erichexter's project adds more functionality and is more opinionated. Another difference is the dependencies both projects take.

I think both package meet a need: sirkirby's package targets a developer that only wants to quickly add twitter.bootstrap assets whereas erichexter's package targets a developer that wants more.

I hope you guys don't mind raising this issue; some might consider it nitpicking but I don't and I hope the effort I put in writing this issue reflects this. I can think of many ways to resolve this, but it's probably best to leave it up to eric and chris.

Include code templates that match the (Create/Details/Index) views in ~\Views\Shared

So that when you create a new view, it's layout will match the twitter Bootstrap styles instead of the default mvc 4 ones.

Bug in NavigationRouteConfigurationExtensions

Since the source for the NavigationRoutes stuff is no longer in the repo I cannot check to see if this is fixed, but it looks like it was still an issue when the code was moved into its own package and it's still an issue with the NuGet packages.

With the current code, if you have other actions under the Home controller besides Index, their links will be rendered incorrectly in the navigation bar and will generate a 404. For instance, instead of http://localhost/home/test the URL is http://localhost/test. This is pretty easy to reproduce with the sample project by adding another action to the Home controller, with a View, and then registering that with the navigation routes.

Commenting out the else condition in NavigationRouteConfigurationExtensions.CreateUrl(string actionName, string controllerName) fixes this problem.

Enable support for SimpleMemebership / OAuth / OpenID

In order to use this NuGet package, you must start from an Empty MVC 4 application - which does not have any of the OAuth / membership configured (as in the Internet Application). Would it be possible to allow this to work with the Internet Template for MVC4?

Broken link

The link to http://lostechies.com/erichexter/2012/11/19/twitter-bootstrap-mvc4-the-template-nuget-package-for-asp-net-mvc4-projects/ in the Readme is broken. The site replies with a Not Found page.

Adding Glimpse nuget package breaks navigation extension

To be fair not sure if this is an issue for this project or Glimps but as Glimpse is a popular add on to mvc thought it was worth raising

Adding in Glimps causes the GetRoutesForCurrentRequest method to fail as all routes are returned as Glimpse route proxy types and so the query for objects of type NamedRoute returns zero results

Suggested project settings

Same issue raised against Twitter Bootstrap MVC -

Please consider turning on FxCop rules and the Treat Warnings as Errors. Adding this package into an existing solution causes a lot of work in getting this code to adhere to these settings which are applied against the project.

Cheers :)

Model editor does not display Start Date

Hi Eric, I'm having problems getting the model Edit to work showing the existing Start Date (see attached screenshot).

Also..... Is it possible to have dates edited with a Calendar DatePicker rather than a TextBox?

Any help appreciated.

Regards, Paul

DropDownList

Hi.

I can't seem to figure out how to show a dropdown list in the create/edit view. Is there a specific way of doing that? Or any hints on how to implement it?

Thanks.

How do you test this?

If I make a change, how can I test it before pushing the changes? Also, I was thinking about adding a README.markdown file. Would you be ok with that?

BootstrapForm scaffold template, BootstrapSupport using directive seems wrong

Line 19 in file \CodeTemplates\AddView\CSHTML\BootstrapForm.tt seems wrong.
Should be "@using BootstrapSupport;" instead of "using BootstrapSupport;".

ValidationSummary not rendered in Bootstrap styling

I am using @Html.ValidationSummary(true) but it is rendering in its default div/ul/li styling.

I don't have any integration with LESS yet, so the solution at http://stackoverflow.com/questions/13867307/show-validationsummary-mvc33-as-alert-error-bootstrap is a good option for me ATM.

I have added a partial view as indicated in the SO link.

@if (ViewData.ModelState[""] != null && ViewData.ModelState[""].Errors.Any()) 
{ 
   <div class="alert alert-error"> 
      <a class="close" data-dismiss="alert">×</a> 
      @Html.ValidationSummary(true)
   </div>
} 

I then added this partial view in the bootstrap layout file under the reference to

        @Html.Partial("_alerts")
        @Html.Partial("ValidationSummary")

The only thing missing is the styling of the UL which I removed with the following css:

.validation-summary-errors ul
{
    list-style-type: none;
}

It would be nice if this made it into the package. Not sure how you would want to integrated it though.

Cheers,

Rory

ControllerWithContext.tt template bug

Hi,

I think there is a small bug in the ControllerWithContext.tt template in the line 135. I think there is a "Create" instead of "Edit"

Here is the related code part with a comment:

public ActionResult Edit(<#= primaryKey.ShortTypeName #> id = <#= primaryKey.DefaultValue #>)
{
<# if(isObjectContext) { #>
<#= modelName #> <#= modelVariable #> = db.<#= entitySetName #>.Single(<#= lambdaVar #> => <#= lambdaVar #>.<#= primaryKey.Name #> == id);
<# } else { #>
<#= modelName #> <#= modelVariable #> = db.<#= entitySetName #>.Find(id);
<# } #>
if (<#= modelVariable #> == null)
{
return HttpNotFound();
}
<# foreach (var property in Model.RelatedProperties.Values) { #>
ViewBag.<#= property.ForeignKeyPropertyName #> = new SelectList(db.<#= property.EntitySetName #>, "<#= property.PrimaryKey #>", "<#= property.DisplayPropertyName #>", <#= modelVariable #>.<#= property.ForeignKeyPropertyName #>);
<# } #>
return View("Create", <#= modelVariable #>); // I think it shoud be "Edit" instead of "Create"
}

Thanks,
Tomi

Build errors after installing the package

After installing the package, you may get build errors.

1. Compiling transformation: The type or namespace name 'Web' does not exist in the namespace 'Microsoft.VisualStudio' (are you missing an assembly reference?)
2. Compiling transformation: The type or namespace name 'MvcTextTemplateHost' could not be found (are you missing a using directive or an assembly reference?)

These errors are resolved by closing and reopening the solution.

Verified in Visual Studio 2010 and 2012.

Suggested project settings

Please consider turning on FxCop rules and the Treat Warnings as Errors. Adding this package into an existing solution causes a lot of work in getting this code to adhere to these settings which are applied against the project.

Cheers :)

End-to-end test: the generated solution does not compile

Probably because of the "navigation overhaul" - there are some navigation leftovers AdministrationRouteFilter and ExampleLayoutsRouteConfig.

Please fix, this slows down testing out pull requests like #81 considerably.

route localization

Eric, can you suggest how to use MapNavigationRoute if I want to have ru/en/es in my route.
Thank you!

Support for ScaffoldColumn Attribute

Bootstrap default templates ignore ScaffoldColumn() annotations. In my project I've corrected this by updating the VisibleProperties() extension methods with an additional where clause:

.Where(info => info.GetCustomAttribute<System.ComponentModel.DataAnnotations.ScaffoldColumnAttribute>(false)==null || info.GetCustomAttribute<System.ComponentModel.DataAnnotations.ScaffoldColumnAttribute>(false).Scaffold)

Error with Visual Studio 2012

Several build errors with Visual Studio 2012 such as:

• Error 1 Compiling transformation: The type or namespace name 'Web' does not exist in the namespace 'Microsoft.VisualStudio' (are you missing an assembly reference?) c:\Users\fernando.correia\AppData\Local\Temp\txqr0h41.0.cs 10 34
• Error 2 Compiling transformation: The type or namespace name 'MvcTextTemplateHost' could not be found (are you missing a using directive or an assembly reference?) c:\Temp\MvcApplication4\MvcApplication4\CodeTemplates\AddView\CSHTML\BootstrapForm.tt 149 1 MvcApplication4
• Error 3 Extension method must be defined in a top level static class; HtmlHelperExtensions is a nested class c:\Temp\MvcApplication4\MvcApplication4\BootstrapSupport\ViewHelperExtensions.cs 135 41 MvcApplication4

Steps to reproduce:

• Open Visual Studio 2012 (tested with Microsoft Visual Studio Ultimate 2012 Version 11.0.50727.1 RTMREL)
• Create a new project with ASP.NET MVC 4 Web Application
• Select the Internet Application template
• After project creation, select the command Build | Rebuild Solution
• Verify that the build is successful
• In the Package Manager Console, enter the command "Install-Package twitter.bootstrap.mvc4" (tested with Twitter Bootstrap for ASP.Net MVC 4 1.0.36)
• If prompted by Security Warning, authorize the execution of the text template by clicking OK
• Verify that there are 2 build errors
• Select the command Build | Rebuild Solution
• Verify that now there are 3 build errors (error in ViewHelperExtensions.cs)

adding additional attributes to "EditorFor" control

Hi,
I am migrating an old MVC razor project to use Bootstrap and have been finding this solution to the task great.
However, I have been trying to add additional attributes to an input control for a DateTime property type. I would typically do this as follows:

@html.EditorFor(model => model.DateTimeFrom, new { Attribute1 = "valueOfAttribute1"})

This is not working. The attribute isn't rendered at all in the resulting page. I believe this is down to this Bootstrap for MVC solution. Is it? Or am I using it incorrectly?

Kind regards.

Tomas

Support child menus / dropdowns

like this example. like in this example http://twitter.github.com/bootstrap/examples/hero.html

Implement breadcrumbs

This is a new issue, instead of #58. Work on that issue was discontinued.
I merged the work from #58 onto this branch;

Todo:

• Merge and test work from #58
• Unit test and review the "parent concept" in navigation routes
• Merge in the changes from the "navigation overhaul" #68

Goal with twitter.bootstrap.mvc short/long term

I've been playing with this project a bit and find it quite useful for scaffolding basic CRUD for admin-purposes.

I have created a few generic components for things like:

• paging using bootstrap paging
• dropdowns for create/edit using valid choises provided in view data
• search functionality for lists/paged lists
• replacement of id values with clear text data from referenced objects in displays/lists
• generic partials for actions on items in lists

Would you like things like this to be added to this project? If so I'd be glad to post examples and pull requests.

By adding more of these things this project could be ending up in an Naked Objects implementation (http://en.wikipedia.org/wiki/Naked_objects), might be a goal or perhaps that is another project?

//Jens

Paging issue with active page

The Pager helper function have an error on line 61. The correct code should be:

if (i == (currentPage))
...

But this is awsome!
Regards!

Adding templates for MvcScaffolding

Hi,

I'm using a lot the MvcScaffolding package.
Currently, when I add a controller, I need to change the Inheritance, and add a parameter in the Create view.
Do you thing that is a good idea to add a dependence to the MvcScaffolding package and add templates for scaffolding a controller with a context and with a repository ?

Html5Shiv Partial has incorrect javascript file reference

Currently _html5shiv.cshtml has the following incorrect markup the line

    <script src="~/scripts/html5.js"></script>

it should be

    <script src="~/scripts/html5shiv.js"></script>

I couldn't find the source for the dependency Html5Shiv to fix so I'm reporting the issue.

HomeController Not installed

In Vs2012, installed package via 'Manage NuGet Packages...' from context menu. The Home controller was not installed into the project.

Editor and EditorFor do not write htmlAttibutes

I seem to be in a no win situation here. Editor/EditorFor does not render html attributes (namely the class attribute) so the view appears to be incorrect in its usage for Editor. Unfortunately the alternative of TextBoxFor for example does support html attribute rendering but drops support for html5 input types.

Is there any way around this? I can either have the full bootstrap styling on input fields but no HTML5 or vice versa.

BeginControlGroupFor doesn't always identify property names from an expression

Sorry, Github still 404's when trying to edit online.

src/Bootstrap/BootstrapSupport/ControlGroupExtensions.cs does not correctly determine property names for some data types. For example, we pass in a DateTime which does not get handled correctly. The outcome is that validation styling is not correct because ExpressionHelper.GetExpressionText on line 34 does not identify the property.

The issue is that the expression contains a Convert expression type that GetExpressionText does not cater for.

This is my fix replacing lines 33-35.

    public static IHtmlString BeginControlGroupFor<T>(this HtmlHelper<T> html,Expression<Func<T, object>> modelProperty,IDictionary<string, object> htmlAttributes){
        string propertyName = ExpressionHelper.GetExpressionText(modelProperty);

        if (string.IsNullOrEmpty(propertyName))
        {
            // There may be a cast/Convert in the expression
            // ExpressionHelper.GetExpressionText does not support parsing these out
            propertyName = GetPropertyName(modelProperty);
        }

        return BeginControlGroupFor(html, propertyName, htmlAttributes);
    }

    private static string GetPropertyName<T>(Expression<Func<T, object>> propertyRefExpr)
    {
        return GetPropertyNameCore(propertyRefExpr.Body);
    }

    private static string GetPropertyNameCore(Expression propertyRefExpr)
    {
        // NOTE:  Code taken from http://ivanz.com/2009/12/04/how-to-avoid-passing-property-names-as-strings-using-c-3-0-expression-trees/
        if (propertyRefExpr == null)
        {
            return string.Empty;
        }

        MemberExpression memberExpr = propertyRefExpr as MemberExpression;
        if (memberExpr == null)
        {
            UnaryExpression unaryExpr = propertyRefExpr as UnaryExpression;
            if (unaryExpr != null && unaryExpr.NodeType == ExpressionType.Convert)
                memberExpr = unaryExpr.Operand as MemberExpression;
        }

        if (memberExpr != null && memberExpr.Member != null && memberExpr.Member.MemberType == MemberTypes.Property)
            return memberExpr.Member.Name;

        return string.Empty;
    }

Failing to find Key attribute on the property if the property name in the model not equal to "Id"

Model pseudo-code:
[Key]
public long AnythingDifferentFromId { get; set; }

Breaks at line 49, ViewHelperExtensions.cs :
return model.GetType().GetProperty(model.IdentifierPropertyName()).GetValue(model,new object[0]);
with exception:
Object reference not set to an instance of an object.

Cause, line ~60:
if (type.GetProperties().Any(info => info.PropertyType.AttributeExists<System.ComponentModel.DataAnnotations.KeyAttribute>()))
does not find the Key

Possible solution, replace the if inside IdentifierPropertyName with:
if (type.GetProperties().Any(info => info.GetCustomAttributes(typeof(System.ComponentModel.DataAnnotations.KeyAttribute), true)!=null))
{
return
type.GetProperties().First(info => info.GetCustomAttributes(typeof(System.ComponentModel.DataAnnotations.KeyAttribute), true)!=null).Name;
}

Support `[Display(Autogenerate=false)]`: decorated properties should not be displayed

I have the code for this, only need to merge into this project.
Please fix #82 so I can quickly run the tests again.

Add a license notice

I noticed that there isn't any license notice; I think it would be appropriate to add one.

Create layouts for each of these example sites

http://twitter.github.com/bootstrap/getting-started.html#examples

right now the basic site is the main layout.

validation error throws js exception while using with IE 9 and jquery 1.9

any idea about that? Also what if I don't want to have validation errors in the alerts box but next to my client controls. plz do help i'm very new to js programming

Create.cshtml fails build

Just installed the nuget package and I get this from a build:

\Views\Shared\Create.cshtml(11): error CS1928: 'System.Web.Mvc.HtmlHelper' does not contain a definition for 'Label' and the best extension method overload 'System.Web.Mvc.Html.LabelExtensions.Label(System.Web.Mvc.HtmlHelper, string, string)' has some invalid arguments
\Views\Shared\Create.cshtml(11): error CS1503: Argument 3: cannot convert from 'AnonymousType#1' to 'string'

There is no overload that takes new { @class = "control-label" } as a parameter.

A namespace cannot directly contain members such as fields or methods

This error on build out of the Nuget Templates package, ControllerWithContext.tt showing a .cs output and that is source of error.
Used latest Nuget packages (all 3) in an MVC4 project, Empty template.
This occurred after the recommended project close and reopen.

Deleted the ControllerWithContext.cs output file and build works.

After installing the 3 NuGet packages, Package Manager GUI shows 4 packages, all are 1.0.90 version. Makes sense as I look at packages.config file and note what has been installed:

Looking forward to checking it out further.

Do not use a custom unobrusive validation script

There is no need to provide a script that may fall out of sync. jQuery.Validation provides a way to modify the behavior:

(function ($) {
    var defaults = $.validator.defaults,
        oldHighlight = defaults.highlight,
        oldUnhighlight = defaults.unhighlight;

    defaults.highlight = function (element, errorClass, validClass) {
        oldHighlight(element, errorClass, validClass);
        // Mark the parent controls as erroneous
        $(element).closest('.control-group').addClass('error');
    };

    validator.defaults.unhighlight = function (element, errorClass, validClass) {
        oldUnhighlight(element, errorClass, validClass);
        $(element).closest('.control-group').removeClass('error');
    };
})(jQuery);

Examples should not mix with twitter.bootstrap.mvc4 package

I run most of my tests using the sample package, so I only just noticed that there is a packaging error - we can no longer simply add all files like here in App_Start. There are probably other places that have similar errors, but right now I don't have time to check it out (controllers? example routes?) so instead created this issue.

Before packaging and pushing to NuGet, It's probably best to do a test that installs the packages without the sample and check that everything compiles out-of-the-box.

BootstrapBaseController can't handle multiple alerts

An exception is thrown if any of the functions in this controller are invoked more than once because the key already exists in the dictionary.

The other issue here is that because of this, the TempData support for alerts only supports single messages. An alternative would be to add a collection as the value of the TempData dictionary rather than just string. The _alerts partial view could then enumerate the collection to render multiple alerts.