Conditional JavaScript in MVC Razor Statement

I had an odd case where the Model for a MVC Razor page may or may not be null.   If data exists we need to do some extra javascript on the page that doesn’t get run at any other time.   I had problems figuring out how to check for a “null” Model using javascript.   This StackOverflow post had the example that finally showed me a nice elegant way of writing my code.  Here is another SO post with additional information that uses the <text> option.

    var jsonData = null;
    @if(Model != null)
    {
      @:jsonData=@Html.Raw(Json.Encode(Model.ServerDataItemList))
    }

    koVM = new ScheduledEmailVM(jsonData);
    ko.applyBindings(koVM , document.getElementById("ko_div_id"));

MVC: Disabling buttons on submit

Don’t want to lose this one.  Its some simple javascript that disables the submit buttons on form submission, from here.

$(document).on('invalid-form.validate', 'form', function () {
    var buttons = $('input[type="submit"]');
    setTimeout(function () {
        buttons.removeAttr('disabled');
    }, 1);
});
$(document).on('submit', 'form', function () {
    var buttons = $('input[type="submit"]');
    setTimeout(function () {
        buttons.attr('disabled', 'disabled');
    }, 0);
});

#TinyMCE: Validation with MVC

Today I am trying to figure out how to do validation with TinyMCE editors while using MVC’ s unobtrusive validation.  I did a google search and came up with a large number of results that all said the same thing.  I couldn’t get any of them to work.  While testing I found the following solution.  It isn’t perfect but is pretty close to what I need.

Here is the solution I came up with. I didn’t need to add any other additional code to the page.

      $('form button[type=submit]').not('.cancel').click(function () {
        var form = $('#FormName');
        var isValid = form.valid();
        var istinymceValid = $('#ContentField').valid();
        if (!isValid || !istinymceValid) {
          return false;
        }
        return true;
      });

ReSharper, getting started again

Years ago I used to use ReSharper on a daily basis. Then I left that company and didn’t have easy access to it any more. I missed it. I finally am at a place where I have a copy again. I am in the process of relearning how to use it. Here are a few linking that I found useful:

1. This is ReSharpers PDF file the most used shortcuts
2. Pluralsights “ReSharper Fundamentals” course
3. 24 + 3 ReSharper tips by Rapid Application Development blog
4. A Code Project article with more detailed examples
5. ReSharper documentation of the various functionality

Lazy Programming: Lowercase URLs

Just so everyone knows, when it comes to programming I prefer to be as lazy as possible. This means that when I got my most recent story to render all routes in lowercase I decided fixing the Routing manually was way too much work. I spent some time on Google and discovered that the built-in lowercase functionality that is built into MVC 4 is broken and its a pain to work around. Instead I am adding a nuget package called LowercaseRoutesMVC to the project. It automatically renders routes in lowercase.  Unfortunately my coworker spent a couple hours yesterday working on updating his code to work manually.

Update: Quote from my boss to the coworker who did it manually yesterday, “hard work sometimes pays off tomorrow but procrastination always pays off immediately.”

MVC Tips n Tricks: Using a button like an action link

I had the need to display a button that works like an action link to redirect the user to a page within an Area and didn’t want to wrap the whole thing in a form just to do the redirect.  Here is what I used.  It allows the same styling and behavior as a button but redirects directly like an action link.

<input type="Submit" 
       value="Add Persona" 
       class="btn btn-primary btn-lg" 
       onclick="location.href='@Url.Action("Detail", "Persona", new { area = "ProfileInfo" })'" />

Web Dev Tips n Tricks: Using font awesome as icons to beautify Input boxes

Today I had a requirement that asked for a textbox that looked similar to the following.  Since we don’t currently use BootStrap or anything similar I had to come up with it on my own.  I found the following post that worked perfectly.emailbox

Purpose of this post is to show you how we can use font awesome to beautify a HTML text field or a HTML number box or similar. Its not exactly a background image but our Font awesome icon will be placed on top of our input box so that it act as one.

Read more: http://jaspreetchahal.org/using-font-awesome-as-background-images-to-beautify-input-boxes/#ixzz32HwoWKHw