These are the confessions of GitHub for Windows user who is new to Git. I’m using GitHub to make code available from my demonstrations, presentations and workshops and am generally enjoying Git for source control.

Today I put in about 30 minutes (and a few too many commits) into trying to prevent AuthConfig.cs from being committed to my project on GitHub. AuthConfig.cs is a new file in the basic Asp.Net MVC 4 template that allows for seamless OAuth integration with sites like Facebook and Twitter. I need the file in the repository, but I don’t want to share my API keys.

As a side note, I’ve long been a fan of Asp.Net authentication and authorization and the recent overhaul is sexy with OAuth awesomesauce. Check out my link at the end of this post to see what I mean.

Just Trying to Git It

Yes, I’m still a relative rookie to Git and there are some things that I haven’t wrapped my head around, but most of the time I at least have the vocabulary I need to find out what was going on.

EDIT: Ready a rookie! You don’t have to ignore if you’re telling Git to “assume-unchanged”.

First off, ignoring doesn’t work on files that are already tracked. This means that if you’ve created a file before you’ve added your ignore rule, then Git is already “tracking” the file and it doesn’t matter if you try to add an ignore rule after the fact.  At this point - which is where I was - you need to add your ignore rule and then instruct Git to assume that the file is unchanged.

I added the following line to my ignore file, which is easily accessed through the GitHub for Windows UI, under settings.

      # Membership
      AuthConfig.cs

The last step was to tell Git that we don’t really want to submits changes anymore.  To do this, right-click on your repo in GitHub for Windows and select “Open a Shell Here”:

Finally, type this in the shell that opens up, replacing the project name and path as appropriate to your AuthConfig.cs file:

    git update-index –assume-unchanged YourProject\App_Start\AuthConfig.cs

This is really just a 2 second process, but I wish I knew it 30 minutes ago. Hope this helps out!

Link-o-liciousness

• Asp.Net OAuth Integration in the default templates with Scott Hanselman
• The documentation on update-index, straight from Git
• GitHub for Windows info and download page

If you are using jQuery UI on your project and you update jQuery to 1.8.0 you’ll also want to grab the latest bits of jQuery UI (which is, at the time of this post, sitting at 1.8.23).  This is an important maintenance release, particularly if you’re using any jQuery UI components that make use of position.

For our project, it was the slider control as well as autocomplete that revealed the problem.

The jQuery library folks had marked $.curCSS as deprecated as of jQuery 1.4, but they still had it in at least 12 spots in jQuery UI 1.8.20. With the 1.8.0 release of the jQuery, $.curCSS is no longer there and you’ll start to get errors such as:

Object doesn’t support property or method “curCSS”

Or, similarily:

$.curcss is not a function >

Moving to jQuery UI 1.8.23 will fix this for you. There is a post here explaining some of the details and a very brief changelog that details the position bits.

As we explore Twitter’s CSS and JavaScript library in Asp.Net MVC, we’re starting to get into the meat of “Bootstrapping” our site, and exploring control templates. If you’d like to keep up with the project code, you can check out the repository on GitHub. With a few clean-ups on the create form, our site is now looking like this:

When you create display and editor templates to override the default templates offered for types by the Mvc Framework, you don’t always want those templates used. How do you get around this?

Change the name of your template to something that doesn’t match an existing type, then use the UIHint attribute to coerce the property into using your template when being rendered.  Nice!  Here’s a property with the correct attributing:

[Display(Name = "VIP - Skip the Line")]
[UIHint("SwitchedBoolean")]
public bool CanSkipLine { get; set; }

 

You can follow the posts in this series from the main page, where I’m curating the links to the instalments of the series.

Cheers!

We’re diving deeper today and getting to some of the good stuff, in particular, we’re going to start muxing the best of Bootstrap (the jQuery plugins) with some of the framework features Mvc has to offer.  Again, I’m working through the CSS and JavaScript library called “Bootstrap” from Twitter, and munging it in with Asp.Net’s Mvc Framework using Visual Studio 2012 RC.

The default display templates for boolean property values can be quite different – nullables are rendered as drop downs, non-nullable bools are checkboxes – but we have the ability to override the Framework and change the way these are rendered.  This video walks you through, and of course, you can download the code from GitHub on this project’s page. You can also keep up with this entire series from the intro page, where I’m listing all of the posts related to these posts.

Here’s today’s entry:

The video is in HD, so make sure you full-screen-a-size-it to see the code.  Speaking of code…

The Code That Makes it Tick

What I did for this post was override the default templates in MVC that are used to render boolean properties. If you use DisplayFor and EditorFor explicitly in your views, or if you use the scaffolders that are part of the MVC tooling, then you may be familiar with the controls that are rendered. They are fine, but they just don’t look like the rest of our site when we’re using Bootstrap.

For our DisplayTemplate, I’m using Bootstrap’s label classes on spans. You can’t edit the properties when you’re in ‘display’ mode anyways, so let’s try to pretty it up a bit.  Put this code in a partial view called Boolean.cshtml under Views/Shared/DisplayTemplates:

@model bool?

@if (Model.HasValue)
{
    if (Model.Value)
        { <span class="label label-success">Yes</span> }
    else
        { <span class="label label-important">No</span> }
}
else
    { <span class="label label-inverse">Not Set</span> }

 

And for the editor, in EditorTemplates, you’ll need a Boolean.cshtml partial view as well. Here, we’re setting up some vars that will allow us to make use of the new nullable class attributes in MVC4.  Then, we render yes/no buttons and conditionally render the “do not set” button based on the field’s metadata.

    @model bool?

    @{
        // make use of MVC4 nullable class attribute values
        var yesSelected = Model.HasValue && Model.Value ? "active" : null ;
        var noSelected = Model.HasValue && !Model.Value ? "active" : null;
        var noSelection = !Model.HasValue ? "active" : null;   

        // get the name of the ID - this is to support multiple fields     
        var htmlField = ViewData.TemplateInfo.HtmlFieldPrefix;
    }

    @Html.HiddenFor(model => model)

    <div class="btn-group" data-toggle="buttons-radio">
        <button type="button" class="btn btn-info @yesSelected bool-@htmlField" onclick="javascript:$('#@htmlField').val(true);" >Yes</button>
        <button type="button" class="btn btn-info @noSelected bool-@htmlField" onclick="javascript:$('#@htmlField').val(false);" >No</button>

        @if (ViewData.ModelMetadata.IsNullableValueType)
            { <button type="button" class="btn btn-info @noSelection bool-@htmlField" onclick="javascript:$('#@htmlField').val('');" >Do Not Set</button> }

    </div>

Wrapping Up

Again, the project is on GitHub for you to follow along or experiment, but it’s very easy to File –> New Project and follow along with the video.  We’re going to keep working through the jQuery plugins and find uses – contrived if we have to! – for each one.

If you don’t already have a copy of Visual Studio 2012, get it here.  Happy coding!

Cheers!

Installment number three in the series where I’m covering Bootstrap and Asp.Net MVC 4, primarily working in Visual Studio 2012.  In this video I’m walking through the completed template and showing what you get with just a short amount of effort.  Hey, it’s looking pretty good!

Yes, for sure, we’ll likely be folding in some other updates as we go, but we’re off to a good start here folks. If you squint enough, this site looks just like Twitter.

Next up is our foray into the jQuery plugins that Bootstrap offers, and we’re going to have a little fun with that. I mean, c’mon, what good is playing with Bootstrap in Mvc 4 if we don’t play with the fun bits* of Mvc 4?  Teaser: I’m about to redefine the way you love you some checkboxes.

Check out the series page to see the list of videos I’m working on.

*Please note, no fun bits were injured in the making of this video.

So, last time I walked you through how easy it was to get Twitter.Bootstrap into your Asp.Net Mvc project in Visual Studio 2010. In this post, I walk you through what it takes to get the _Layout.cshtml updated so that your web site starts spanking like Spanish mule.  I have no idea what that means.

Be sure to pop out the player or view it on YouTube as I put the post up in HD so that the code was easy to see. You’ll want to do that to follow along.  This is a bit of a longer post, but I walk you through a fair bit of content.

And hey, stay tuned…in the coming days I’m going to cover a ton of stuff.  Check out the intro post to see the list of videos I’m working on.

See ya soon!