Blog posts about snippet

  • Show text line breaks in ASP.NET MVC Razor view

    December 10, 2014 | Tags: CSS, ASP.NET, MVC, Snippet

    If you have a string with line breaks and want to show that text with the line-breaks intact in your Razor-based view, you can do this without replacing all \r\n with <br/>-tags. Instead present the text in an element that has the style property white-space set to pre-line. You should really add a class like:

    <style>
    .line-breaks { white-space:pre-line; }
    </style>

    <span class="line-breaks">@Model.MyText</span>

  • Offset a background image from the right or bottom using CSS

    December 10, 2014 | Tags: CSS, Snippet

    If you want to offset your background image a certain amount of pixels from the right with CSS you can do this by first defining it as right and then count away the pixels.

    Say that you wish the background image to start 20 pixels from the right you write your CSS as:

    .myclass {
      /* additional styles */
      background-position: right 20px top;
    }

    This will align your background image to the top right and then offset it 20 pixels to the left. This can also be done as an offset from bottom.

    If you want you can also inline the position in the background tag directly. The following will align the background image 20 pixels from the right bottom corner:

    .myclass {
      /* additional styles */
      background: url("/images/my-image.png") no-repeat bottom 20px right 20px;
    }

  • Get all model validation errors in ASP.NET MVC

    December 08, 2014 | Tags: C#, ASP.NET, MVC, Snippet, Validation

    In ASP.NET MVC you can get a list of all validation errors for your model from the ModelState:

      if (!ModelState.IsValid) {
        var modelErrors = new List<string>();
        foreach (var modelState in ModelState.Values) {
          foreach (var modelError in modelState.Errors) {
            modelErrors.Add(modelError.ErrorMessage);
          }
        }
        // do something with the error list :)
      }

  • Disable navbar collapse in Bootstrap 3

    August 28, 2014 | Tags: CSS, Snippet

    If you don't want the navbar to be collaspeable in Bootstrap 3 it's pretty easy to disable it using LESS.

    Open the file variables.less and locate @grid-float-breakpoint, it will look something like this:

    @grid-float-breakpoint: @screen-sm-min;

    To disable collapse just change the value to zero:

    @grid-float-breakpoint: 0;

    And the navbar will not collapse ever again!


  • How to set this when calling a javascript function

    February 04, 2014 | Tags: Javascript, jQuery, Snippet
    Ever wondered how the this entity was set in a function like for instance a jQuery event handler? Or maybe even needed to invoke that event handler from code passing the object that would be accessed through this within the function? The secret is to use the call-function that is available on every function in JavaScript.

    If you for instance have an event handler setup in jQuery like the one below:
    function buttonClickHandler(e) {
    $(this).addClass('clicked');
    }

    $('a.btn').click(buttonClickHandler);
    ..that you would like to invoke from code and passing the object that would be accessed through this within the function, using the call-function on your event handler function will do the trick:
    var btn = $('#button1');
    buttonClickHandler.call(btn);

    The syntax of the call-function is: call(thisArg[, arg1[, arg2[, ...]]]). The first parameter you pass is what will be accessible through the this entity. Then follows optional parameters that will be passed as parameters to the function being called in the given order.

    If you which to pass an object as this to a function that takes two parameters (lets say showName(firstName, surName)) you would do it like this:
    function showName(firstName, surName) {
    $(this).val(firstName + ' ' + surName);
    }

    var element = $('#element');
    showName.call(element, 'alice', 'cooper');