19 November 2013

Json object from MVC view to controller as Parameter

JSON (JavaScript Object Notation) is a lightweight text-based open standard designed for human-readable data interchange. When working together with jQuery and ASP.NET MVC in building web applications, it provides an efficient mechanism to exchange data between the web browser and the web server. This includes built-in JSON binding support that enables action methods to receive JSON-encoded data and model-bind it to action method parameters. To see this feature in action, consider the client-side jQuery below.


   1:      $('#Save').click(function () {
   2:          var customer = {
   3:              Name: $('#Name').val(),
   4:              Code: $('#Code').val()
   5:          };
   6:          $ajax({
   7:              url: 'Custoer/Save',
   8:              type: "POST",
   9:              data: JSON.stringify(customer),
  10:              dataType: "json",
  11:              contentType: "application/json",
  12:              success: function () {
  13:                  $('#message').html('Data Saved').fadeIn();
  14:              },
  15:              error: function () { $('#message').html('Operation failed').fadeIn(); }
  16:          })
  17:          return fasle;
  18:      });

Next is to consume this data at the server side, i.e. at MVC control, create a model class with exact number of fields to hold the desterilized data.And then have a action method in your controller method.


   1:      public class Customer
   2:      {
   3:          public string Name { get; set; }
   4:          public string Code { get; set; }
   5:      }
   6:      public ActionResult Save(Customer jsonCustomerData)
   7:     {
   8:          bool result = true;
   9:          Customer customerData;
  10:          JavaScriptSerializer jss = new JavaScriptSerializer();
  11:          customerData = jss.Deserialize<Customer>(jsonCustomerData);
  12:          // Logic to save data
  13:          return Content(result.ToString());
  14:     }

As you see above sample server side we have an action which accepts strongly-typed Customer object as a parameter. Serialized json object will be routed here. That means ASP.NET MVC 3 automatically bind the incoming JSON post values to the .NET Customer type on the server – without you having to write any custom binding or marshalling logic. Now inside the method you may desterilize this data using JavaScriptSerializer which is available in System.Web.Script.Serialization library.

17 November 2013

Connection not found in the configuration exception

Problem:
I have a MVC 3 application which talks to Business Layer to get the Business objects that paint my UI. Client application consumes Business layer to pull the data from database and business library have one entity framework object. The connection string is added to app.config in connection string section, but when I want create new entity context and use this connection string, this error is appear:
“The specified named connection is either not found in the configuration, not intended to be used with the EntityClient provider, or not valid.”
Solution:
You need to copy the connection string in the app.config to your web.config, or copy the entire file to the project which displays the output. It is one of the conditions to consume the framework.

   1:    <connectionStrings>
   2:      <add name="ADONETEntities" connectionString="metadata=res:
//*/Customer.csdl|res://*/Customer.ssdl|res://*/Customer.msl;
provider=System.Data.SqlClient;provider connection string=&quot;
data source=DatabaseTest,10501\SQLEXPRESS;initial catalog=dbTest;
persist security info=True;user id=user_dbo;password=pwd123;
multipleactiveresultsets=True;App=EntityFramework&quot;
" providerName="System.Data.EntityClient" />
   3:    </connectionStrings>

07 November 2013

async/await with MVC4

The .NET 4.5 Framework introduced the new async/await asynchronous programming model. With ASP.NET MVC 4 comes the application of the async/await model to controller actions. A traditional ASP.NET MVC control action will be synchronous by nature; this means a thread in the ASP.NET Thread Pool is blocked until the action completes. Calling an asynchronous controller action will not block a thread in the thread pool. The greatest advantage of using this is to bring UI more responsive.
Well before .NET 4.5 (and MVC 4), we need to controller to inherit from AsyncController and implement this. With latest release this made simple and brought up to language level. To do Async in ASP.NET MVC, all you have to is return a Task and use the async keyword in your action methods.
As ASP.NET MVC 4 runs on top of .NET framework 4.5, we can use the magical async and await keywords to simplify this process. Using these keywords, we can easily create asynchronous controller actions just like we created methods. Following is a sample implementation of a controller action method:
Enough of theory, let’s walk the talk.

   1:  public class HomeController : Controller
   2:  {
   3:      public async Task<ActionResult> Index()
   4:      {
   5:          Task<int> weatherInfoTask = WeatherApi.GetFollowersAsync();
   6:          Task<int> stockTickerTask = StockTickerApi.GetFollowingAsync();
   7:          await Task.WhenAll(weatherInfoTask, stockTickerTask);
   8:          ViewBag.WetherInfo = await weatherInfoTask;
   9:          ViewBag.StockTicker = await stockTickerTask;
  10:          return View();
  11:      }
  12:  }

Here we first invoke both asynchronous Weather API calls and only then await them using Task.WhenAll. Finally, we use the Result property of each task to get the Weather and Stock Ticker info.
An async method will be run synchronously if it does not contain the await keyword.  In the above code, we are calling a WCF services asynchronously. As a method marked as async must return a Task, the return type is modified to Task.await pauses the method until the operation completes.
Well, to conclude:
async: A method modifier that signals to the .NET language compiler that the marked method will run within its own thread, and that execution cannot continue past the point until the awaited asynchronous process is finished. Meanwhile, control is returned to the caller of the async method.
await: An operator that suspends the execution of the method to which it applies. When called, an asynchronous method synchronously executes the body of the function up until the first await expression on an awaitable instance that is not yet completed, at which point the invocation returns to the caller.
In this tutorial we learned how writing asynchronous controllers is a powerful optimization that has become much easier to implement since MVC 4 and C# 4.5.

03 November 2013

Simple jQuery getJSON Example in ASP.NET MVC


First off, what is JSON? It is an alternative to XML as a way of sending information from one device to another. Now, how do we use it as a mediator between a database and a web page in ASP.NET MVC 4?
Well, it is going to be simple two step process as mentioned below:
1. Write a controller that contains a method that is called when a client requests a web page from the server.
2. Write a view that is linked to the controller method, and which generates the markup that is returned to the client.

The controller method will usually collect some data from some other source, such as a database or some other C# code (which is usually part of the Model in MVC). This data is then packaged up, possibly in a C#/JSon object, and sent to the View, where the View formats the data and generates the HTML which is interpreted by the browser.
Basically what happens is this:
1.    Client requests a web page.
2.    Controller method is called to process this request.
3.    The corresponding View is returned to the browser.
4.    The View contains some JavaScript code that makes another request to the server, this time asking for some data in JSON format.
5.    A different Controller method from that called in step 2 is called to generate the JSON, which is returned to the browser.
6.    The JavaScript code processes the JSON and generates some HTML which is displayed (JSON is not meant to be displayed as raw data by the browser; rather, it is retrieved by the browser and then processed on the client side before it is displayed)

In this post, I will create a very basic and simple example demonstrating jQuery's getJSON method using ASP.NET MVC.
First up, I create an empty MVC project with one Controller. The code for this controller is shown below. For simplicity, the data model is also stored here and we create the data on fly. In a production application, this will be separated   using multiple layers and the data, of course, would come from the database.
   1:  <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
   2:      <script type="text/javascript">
   3:          $(document).ready(function () {
   4:              $('#btnGetCustomers').click(function () {
   5:                  $.getJSON("/Json/GetJsonData", null, function (data) {
   6:                      var div = $('#ajaxDiv');
   7:                      div.html("<br/> " + "Customeres received from server: " + "<br/>");
   8:                      $.each(data, function (i, item) {
   9:                          printCustomer(div, item);
  10:                      });
  11:                  });
  12:              });
  13:          });
  14:   
  15:          function printCustomer(div, item) {
  16:              div.append("<br/>" + "FName: " + item.FirstName + ", LName: " + item.LastName);
  17:              });
  18:          }
  19:      </script>
  20:   
  21:      <input id="btnGetCustmers" type="button" value="Get Customers" />
  22:      <div>
  23:          <div id="ajaxDiv">
  24:          </div>
  25:      </div>
  26:   
  27:  $(document).ready(function () {
  28:      $('#save').click(function () {
  29:          var person = {
  30:                          Id: 100,
  31:                          Name: $('#Name').val(),
  32:                          Age: $('#Age').val(),
  33:                          PhoneNumber: $('#PhoneNumber').val()
  34:                      };
  35:          $.ajax({
  36:              url: '/Home/CreatePerson',
  37:              type: "POST",
  38:              data: JSON.stringify(person),
  39:              dataType: "json",
  40:              contentType: "application/json; charset=utf-8",
  41:              success: function (result) {
  42:                  $('#message').html('Person Saved' + result).fadeIn();
  43:              },
  44:              error: function () {
  45:                  $('#message').html('Error Occurred').fadeIn();
  46:              }
  47:          });
  48:          return false;
  49:      });
  50:  });
C# code 

   1:       public ActionResult Index()
   2:          {
   3:              return View();
   4:          }
   5:   
   6:          public JsonResult GetJsonData()
   7:          {
   8:              var Customer = new List<Customer>
   9:                                {
  10:                                    new Customer{Id = 1, FirstName = "John", 
  11:                                        LastName = "Randy", PhoneNumber = "(614)370-0220"},
  12:                                                                                                          
  13:                                    new Customer{Id = 2, FirstName = "Sheila", 
  14:                                        LastName = "Wood", PhoneNumber = "(614)370-0200" }};
  15:   
  16:              return Json(Customer, JsonRequestBehavior.AllowGet);
  17:   
  18:          }
  19:   
  20:      }