Tuesday, March 25, 2014

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.

            type: 'GET',
            url: 'URL to access data',
            contentType: "application/json",
            crossDomain: true,
            cache: true,
            dataType: 'jsonp',
            success: function (result) {
            error: function (e) {

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.

Tuesday, February 18, 2014

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.

Wednesday, January 22, 2014

Monday, January 13, 2014

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'],....)