Using GIT with Visual Studio 2013

Git, has been around for quite some time now. All major repository hosting services like GitHub, Bitbucket and now even Codeplex recommended users to opt for GIT as a recommended/default type of source control system for your project.

I have been avoiding GIT for a very longg time, the only reason being is familiarity and love for SVN :) So when I wanted to created a new project – qask on Codeplex and found that the SVN option was no longer present on codeplex. I decided to (finally) give GIT a try…

enter image description here

You might also want to read this beautiful question & answer on GIT vs SVN : Why is Git better than Subversion?

1. Changing the Source Control plugin

Once you have your project opened, go to ‘Tools > Options’, go to ‘Source Control’ sub menu and select ‘Microsoft Git Provider’ from the source control plugin dropdown and press ‘ok’.

enter image description here

and that’s it.

2. Commit and Sync

Once you have configured as above, your team explorer will look something like this :

enter image description here

you can see your pending changes, and commit with a message using the screen below :

enter image description here

enter image description here

Post every commit you will be given an option to sync, you can sync every time you commit or whenever you want to.

enter image description here

enter image description here

enter image description here

Hope this helps. A more detailed post on Git version control with Visual Studio 2013 is present here, a must read for any newbies to GIT.

Using timeouts in Angular JS

Angular provides $timeout, a wrapper forwindow.setTimeout. To use $timeout you will need to inject it into your controller.

Syntax:

$timeout(fn[, delay][, invokeApply]);

Example:

var app = angular.module('myApp', []);

function Ctrl($scope, $timeout) {  
     $scope.message = "Hello";
     $timeout(function(){$scope.message = "Hello after 3 seconds";}, 3000);       
} 

Update : Found this really interesting thread on SO – What advantage is there in using the $timeout in Angular JS instead of window.setTimeout?

Hope this helps :)

PageDown Editor for Angular JS

I have always been fascinated by stackoverflow’s markdown/pagedown editor, So when I needed an text editor for a project(question & answer site) I have been working on lately in my spare time – QASK, I decided to go with a similar editor built for Angular JS.

Though there were many directives available for this, none of them were as complete and easy to use as angular-pagedown

Demo : http://plnkr.co/edit/9PHabp?p=preview

    <script data-require="angular.js@1.2.22" src="angular.js"></script>

    <script src="Markdown.Converter.js"></script>
    <script src="Markdown.Sanitizer.js"></script>
    <script src="Markdown.Editor.js"></script>

    <!-- The directive -->
    <script src="angular-pagedown.js"></script>

    <script src="script.js"></script>
  </head>

  <body ng-app="myApp">
    <div ng-controller="myController">
      <pagedown-editor content="data.content" 
                       help="showSomeHelp()" 
                       show-preview="false" 
                       insert-image="insertImage()">
      </pagedown-editor>
      <hr />
      <pagedown-viewer content="data.content"></pagedown-viewer>
    </div>
  </body>

</html>

A little change in css and here’s how my final page looks like :)

enter image description here

Continue reading “PageDown Editor for Angular JS”

C# ExceptBy() extension method.

The following extension method is used to compare values from two list and it returns entities from the first list which is not present in the second list based on the key that is passed to it.

public static IEnumerable<T> ExceptBy<T, TKey>(this IEnumerable<T> items, IEnumerable<T> other,  Func<T, TKey> getKey)
{
    return from item in items
           join otherItem in other on getKey(item)
           equals getKey(otherItem) into tempItems
           from temp in tempItems.DefaultIfEmpty()
           where ReferenceEquals(null, temp) || temp.Equals(default(T))
           select item;

}

Writing a Custom Html Helper for Button in ASP.NET Razor

Html Helpers are used when we want to have a custom html with/without some logic repeated across your application. Today I wanted to have all the buttons shown across the application behave in a particular way depending upon the logged in user, this can easily be done using HtmlHelper.

Code

public static class CustomHtmlHelpers
{
    public static MvcHtmlString CustomButton(this HtmlHelper htmlHelper, string innerHtml, IDictionary<string, string> htmlAttributes)
    {
        var builder = new TagBuilder("a") {InnerHtml = innerHtml};
        builder.MergeAttributes(htmlAttributes);
        return MvcHtmlString.Create(builder.ToString());
    }
}

In the IDictionary<string, string> htmlAttributes parameter you can pass all the html attributes you need your button to have, for example: class, href, or any other html attribute for that matter.

Example

@Html.CustomButton("<i class='fa fa-plus'></i>&nbsp; Create Something", new Dictionary<string, string> { { "class", "btn btn-primary" }, { "href", "#create" } })

You might wanna read another related article on Html Helpers.

How to pass values from ASP.NET MVC Razor Views to Angular Controller ?

I have been using a lot of AngularJs code on my razor views lately. On one of my page, I wanted to pass to my angular controller the model which is being passed to my razor view.

Can be done with the following code

ng-init="init(@JsonConvert.SerializeObject(Model))"

JsonConvert.SerializeObject helps you convert an object to a JSON string and you can use ng-init to pass and use this value in your controller.