Archive

Posts Tagged ‘mvc’

ASP.NET WEB API – What and Why

Hi Friends,

Microsoft has introduced a helpful framework with ASP.NET MVC4 called WEB API for building the http based services.

In this article we will cover following points about this new framework

1) WHAT
2) WHY  WEB API

WHAT

ASP.net Web API is an api which helps in creating the http based client and server endpoints on top of the ASP.net framework.

The Client side http based programming model has been built in to the System.net and the server side http based programming model has been built in to the WCF.

The First version of WCF did not support the Http based services.
It strongly supported the traditional Soap based service endpoints which really lack in the many other features in http like caching , compression etc.

With the release of the .NET Framework 3.5 in November 2007, Microsoft released the feature to create the simple http based endpoints but it was again more embedded in the WCF.

So Microsoft WCF team has decided to come up with the framework which is completely used for the http based services ,
As ASP.NET team is more engage in the web / http  work , routing , html Microsoft has decided to merge this framework with the ASP.Net
and introduced WEB API with the ASP.NET MVC 4 release.

WHY

If we are implementing an application whether html 5 or mobile , they need services for accessing data or to artifact the system.
In the modern programming land scape services should be created by keeping wide range of clients in mind.

Most of the applications are accessing data as JSON using HTTP based services which is going to be a trend than accessing data from traditional Soap services.

 

This article is the summary of the video by Jon Flander on the pluralsight website.

please refer http://www.asp.net/web-api for details of web api.

 

Thanks

Ganesh Divekar

Advertisements

ASP.NET # MVC # 21 Telerik Grid with checkboxes problem – Grid does not maintain the state of the checkboxes on changing page index

Telerik provides the best UI controls for the ASP.NET MVC application development.
Especially the Telerik Grid is used often in the web development.

However Checkbox column functionality of Telerik Grid does not maintain the state of the checkboxes on the page index changing event.
If user selects check boxes on the first page and then goes to the other and the checks made on the first page disappears.

Solution for above problem is explained with the help of following example by using the jQuery live event and the JavaScript arrays:

In this example we have a grid with checkboxes that is bound to the Model class name Order.

The order class has three properties OrderId,OrderName and IsChecked.                  IsChecked property is a Boolean  flag to see whether order is previously checked or not.

Controller code contains _ChckBoxesAjax method with a GridAction attribute that returns the IEnumerable list of type Order class.

Code on Controller
  1. [GridAction]
  2.       public ActionResult _CheckBoxesAjax()
  3.       {
  4.           List<Order> lstOrder = new List<Order>();
  5.  
  6.           lstOrder.Add(new Order { OrderId = 1, OrderName = "Order 1", IsChecked = false });
  7.           lstOrder.Add(new Order { OrderId = 2, OrderName = "Order 1", IsChecked = false });
  8.           lstOrder.Add(new Order { OrderId = 3, OrderName = "Order 2", IsChecked = true });
  9.           lstOrder.Add(new Order { OrderId = 4, OrderName = "Order 3", IsChecked = false });
  10.           lstOrder.Add(new Order { OrderId = 5, OrderName = "Order 4", IsChecked = false });
  11.           lstOrder.Add(new Order { OrderId = 6, OrderName = "Order 5", IsChecked = false });
  12.           lstOrder.Add(new Order { OrderId = 7, OrderName = "Order 6", IsChecked = true });
  13.           lstOrder.Add(new Order { OrderId = 8, OrderName = "Order 7", IsChecked = false });
  14.           lstOrder.Add(new Order { OrderId = 9, OrderName = "Order 8", IsChecked = false });
  15.           lstOrder.Add(new Order { OrderId = 10, OrderName = "Order 9", IsChecked = false });
  16.           lstOrder.Add(new Order { OrderId = 11, OrderName = "Order 10", IsChecked = true });
  17.           lstOrder.Add(new Order { OrderId = 12, OrderName = "Order 11", IsChecked = false });            
  18.           return View(new GridModel(lstOrder.AsEnumerable()));
  19.       }
  20.  
  21.   }
  22.  
  23.   public class Order
  24.   {
  25.       public int OrderId { get; set; }
  26.       public string OrderName { get; set; }
  27.       public bool IsChecked { get; set; }
  28.  
  29.   }

 

The client side code is written in the View file.There are two JavaScript function

1. RegisterLiveEventForCheckBoxes – This method should be called on the document.ready    method of the page which has the Grid on it.

2.OnCheckBoxGridDataBound – This method will be called on the OnDataBound event of the grid.

View and Client side code
  1. @{
  2.     ViewBag.Title = "_CheckBoxesAjax";
  3.     Layout = "~/Views/Shared/_Layout.cshtml";
  4. }
  5. <script type="text/javascript">
  6.  
  7.     var selectedIds;
  8.     var deselectedIds;
  9.     $(document).ready(function () {
  10.         RegisterLiveEventForCheckBoxes();
  11.  
  12.     });
  13.     function RegisterLiveEventForCheckBoxes() {    
  14.         selectedIds = []; deselectedIds = [];
  15.         $('#OrderId:checkbox').die();
  16.         $('#OrderId:checkbox').live('click', function (e) {
  17.             var $check = $(this);
  18.             if ($check.is(':checked')) {
  19.  
  20.                 if ($.inArray($(this).val(), deselectedIds) > -1) {
  21.                     deselectedIds = jQuery.grep(deselectedIds, function (value) {
  22.                         return value != $check.val();
  23.                     });
  24.                 }
  25.                 selectedIds.push($check.val());
  26.             }
  27.             else {
  28.  
  29.                 if ($.inArray($(this).val(), selectedIds) > -1) {
  30.                     selectedIds = jQuery.grep(selectedIds, function (value) {
  31.                         return value != $check.val();
  32.                     });
  33.                 }
  34.  
  35.                 deselectedIds.push($check.val());
  36.             }
  37.         });
  38.     }
  39.  
  40.     function OnCheckBoxGridDataBound(e) {
  41.         
  42.         $('input:checkbox[id*=OrderId]:checked').each(function () {
  43.             if ($.inArray($(this).val(), selectedIds) < 0) {
  44.                 selectedIds.push($(this).val());
  45.             }
  46.         });
  47.         selectedIds = jQuery.grep(selectedIds, function (item) {
  48.             return jQuery.inArray(item, deselectedIds) < 0;
  49.         });
  50.         var gridID = ($(e.target.id).selector);
  51.         $('#' + gridID + ' :checkbox').each(function () {
  52.  
  53.             $(this).attr('checked', jQuery.inArray($(this).val(), selectedIds) > -1);
  54.  
  55.         });
  56.     }
  57. </script>
  58. @{ Html.Telerik().Grid<TelerikGridWithCheckboxes.Controllers.Order>()
  59.         .Name("Grid")
  60.         .Columns(columns =>
  61.         {
  62.             columns.Bound(o => o.OrderId)
  63.             .ClientTemplate("<input type='checkbox' id='OrderId' name='OrderId' value='<#= OrderId #>' <#= IsChecked ? checked='checked' : '' #>/>")
  64.                    .Title("")
  65.                    .Width(36)
  66.                    .HtmlAttributes(new { style = "text-align:center" });
  67.  
  68.             columns.Bound(o => o.OrderId).Width(100);
  69.             columns.Bound(o => o.OrderName).Width(200);
  70.         })
  71.         .DataBinding(dataBinding => dataBinding.Ajax()
  72.                 .Select("_CheckBoxesAjax", "Home"))
  73.                 .ClientEvents(c => c.OnDataBound("OnCheckBoxGridDataBound"))
  74.         .Scrollable()
  75.         .Pageable()
  76.         .Render();
  77. }

 

Regards

Ganesh D