Make the layout of controls same in all the browsers - UniformJS

Most of the developers must have faced an issue from their client to make the layout of the controls similar in all the browsers.

I recently came across a beautiful and simple plugin which would take care of the UI just by a single line of code.

The implementation is very simple:

<!-- Make sure your CSS file is listed before jQuery -->
<link rel="stylesheet" href="uniform.default.css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.uniform.js"></script>]

// Style everything
$("select, input, a.button, button").uniform();

jQuery cross domain requests with JSONP

jQuery has a provision to make a cross domain AJAX request (GET) and fetch data in JSONP format.

$.ajax({
            type: 'GET',
            url: 'URL to access data',
            contentType: "application/json",
            crossDomain: true,
            cache: true,
            dataType: 'jsonp',
            success: function (result) {
            },
            error: function (e) {
                console.log(e.message);
            }
        });

Even if there is an error handler attached to the ajax call above, cross domain requests won't    handle any error or exceptions.  This is a limitation for jQuery JSONP calls.

LINQ - Filter a List from a comma separated string

I've used a sample Product class shown below.  productList contains 3 static values.

public class Product

{
    public int ProductId { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

string productIds = "1,3";
List<Product> productList = new List<Product>();

productList.Add(new Product() { Name = "iPhone", Price = 60000, ProductId = 1 });
productList.Add(new Product() { Name = "Google Nexus 5", Price = 34000, ProductId = 2 });
productList.Add(new Product() { Name = "iPad", Price = 27000, ProductId = 3 });

ProductIds are split into an IEnumerable<int> array and LINQ WHERE clause is used with "Contains"

//split productIds and populate productIdArray

IEnumerable<int> productIdArray = productIds.Split(',').Select(x => int.Parse(x));

//filter productList and fetch only the records which contains values in "productIdArray"
IEnumerable<Product> productFilter = productList.Where(c => productIdArray.Contains(c.ProductId));

"Children could not be evaluated" issue after updating Entity Framework to version 6

I was recently working on an ASP.NET MVC 4 website using Entity Framework 5.0.  

I updated my entity framework using "update-package -EntityFramework" command in package manager console.  It updated Entity Framework pretty well, but stuck me with an issue.  I was no longer able to debug my values and it showed "Children could not be evaluted" as shown below.  This was working fine before I updated my entity framework.

The solution is really simple but tricky.  I just had to add .ToList() at the end of the query and it worked like a charm.

Test Responsive Layout in different devices

Check the responsive layout of your website in different devices and different modes (landscape & portrait)

http://www.responsinator.com/?url=http://foundation.zurb.com

RequireJS and ASP.NET MVC

RequireJS is a javascript file and module loader.  It is used to load your javascript frameworks/plugins dynamically when needed and can optimize the time taken by your website to load your pages.

I'll demo a simple ASP.NET MVC 3.0 Application with RequireJS

Step 1: Download latest version of RequireJS from http://requirejs.org/docs/release/2.1.10/minified/require.js

Step 2: Create an ASP.NET MVC project and include the require.js file in your _Layout.cshtml page or Site.Master if you're using ASP.NET MVC 2.0.

<script src="@Url.Content("~/Scripts/require.js")" data-main="/scripts/main.js" type="text/javascript"></script>

data-main  attribute refers to main.js file which would act as a single point of interaction.  You can load all your javascript files dynamically through this js file.  This attribute would load the main.js file asynchronously after require.js file is loaded.

Step 3: Include jquery file in your scripts folder

Step 4: Add a div with the id="container" in a view

Step 5: Below is the code for Main.js file

require(['Scripts/jquery'], function () {
    $().ready(function () {
        $('#container').html("Hey! Require.js rocks!!");
    });
});

The code above loads jquery file dynamically and initializes the document.ready event.  The code would simply insert a static html inside "container" div.

Note that "Scripts/jquery"  would be your path of jquery.js file excluding the ".js" extension.

For example, if you are refering to a file jquery-1.10.1.js located in scripts folder, you have to use require(['Scripts/jquery-1.10.1'],....)

Visual C# Code Snippets

http://msdn.microsoft.com/en-us/library/z41h7fat.aspx