JSONP calls in ASP.NET MVC

JSONP is "JSON with padding".  It is used to access or transfer data across the domains.  The code below is used to access JSONP data from a remote server and fetch the results in ASP.NET MVC

public ContentResult FetchData()
        {
            string signedUrl = ""; //URL to fetch jsonp data from
            WebRequest request = (HttpWebRequest)WebRequest.Create(signedUrl);
            request.Method = WebRequestMethods.Http.Get;
            string result = string.Empty;

            using (var response = (HttpWebResponse)request.GetResponse())
            {
                using (var reader = new StreamReader(response.GetResponseStream()))
                {
                    result = reader.ReadToEnd();
                }
            }

            return Content(result, "application/javascript");
        }

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