Let’s hookup with ASP.NET Webhooks Preview

Posted on October 24, 2015 by Thuru

Webhook – A simple HTTP POST based pub/sub mechanism between web applications or services. This is a very effective that most of the modern web applications use this in order to handle event based pub/sub.

ASP.NET WebHooks is a framework which is in the preview release; this eases the task of incorporating webhooks in ASP.NET applications. It provides some predefined clients to subscribe events from, like Instagram, GitHub and others. It also provides a way to setup our custom ASP.NET web applications to send webhook notifications to the subscribed clients and prepare the clients to receive the webhook notifications. See the below URL for the more information.

https://github.com/aspnet/WebHooks

How WebHooks work and the structure of the ASP.NET WebHook Framework

Webhooks are simple HTTP POST based pub/sub.

Webhooks has the following structure.

The web application/service which publishes the events should provide an interface for the subscribers to register for the webhooks.
Subscribers select the events they want to subscribe to, submit the callback URL to be notified along with other optional parameters. Security keys are most common among the other optional parameters.
The publisher will persist the subscriber details.
When the event occurs publisher notifies all the eligible subscribers by triggering POST request to the callback back along with the event data.

The above 4 steps are the most vital steps of a working webhook. Let’s see how ASP.NET Webhooks implement this.

As of this writing ASP.NET Webhooks are in preview and nugget packages also in the preview release.

The support for sending WebHooks is provided by the following Nuget packages:

Microsoft.AspNet.WebHooks.Custom: This package provides the core functionality for adding WebHook support to your ASP.NET project. The functionality enables users to register WebHooks using a simple pub/sub model and for your code to send WebHooks to receivers with matching WebHook registrations.
Microsoft.AspNet.WebHooks.Custom.AzureStorage This package provides optional support for persisting WebHook registrations in Microsoft Azure Table Storage.
Microsoft.AspNet.WebHooks.Custom.Mvc This package exposes optional helpers for accessing WebHooks functionality from within ASP.NET MVC Controllers. The helpers assist in providing WebHook registration through MVC controllers as well as creating event notification to be sent to WebHook registrants.
Microsoft.AspNet.WebHooks.Custom.Api This package contains an optional set of ASP.NET Web API Controllers for managing filters and registrations through a REST-style interface.

ASP.NET Webhooks works well in Web API and it has the Azure Table Storage provider for persisting the publisher metadata and event data.

Please go through this article for the detailed information

What is missing

According to the article, webhooks are delivered to the users based on authorization. So ASP.NET webhooks store the information of the subscriber along with the user information. This helps the ASP.NET webhooks to publish the event to the right subscriber.

For example, 2 users have subscribed to the same event.

User Id	Event	Callback URL
Thuru	PhotoAdded	https://thuru.net/api/webhooks/in/content
Bob	PhotoAdded	http://bob.net/api/hooks/incoming/photo

ASP.NET Webhooks requires the subscribers to login to the application or the REST service in order to subscribe the events.

So when the event is triggered based on the logged in user the POST request is made to the right client. ASP.NET webhooks use user based notifications. Is there any limitation in this?

Yes, consider a scenario – where you have an application with multiple customers. Each customer has many users. And the admin of one customer wants subscribe to the PhotoAdded event as above. Her intention is to be notified whenever any of her users add a photo. So if she registers for a webhook by logging in using her credentials, she will get the notifications only when she adds a photo, because ASP.NET webhooks by default provide user based notifications. Also we can’t register this event in the global level with no authentication, the she will be notified when users of the other customers add a photo.

I hope ASP.NET webhook will provide a way to customize the notification. As of now NotifyAsync is a static extension method to which the overriding is not possible.

The requested content appears to be script and will not be served by the static file handler.

Posted on February 23, 2014 by Thuru

If you get the above message from IIS while working with ASP.NET 4.5 or above, the most likely cause is that you’re missing the ASP.NET 4.5 in your development IIS.

Here’s the resolution

To install or uninstall ASP.NET 4.5 on Windows 8 or Windows Server 2012, use one of the following options:

Run the following command from an administrative command prompt: dism /online /enable-feature /featurename:IIS-ASPNET45
For Windows 8 client computers, turn on “IIS-ASPNET45” in “Turn Windows Features On/Off” under “Internet Information Services-> World Wide Web Services -> Application Development Features -> ASP.NET 4.5”.
For Windows Server 2012 computers, enable “IIS-ASPNET45” using Server Manager, under “Web Server (IIS) -> Web Server ->Application Development -> ASP.NET 4.5”.

In Windows 8 Turn Windows Features On/Off

CRUD operations in Infragistics WebDataGrid

Posted on December 4, 2013 by Thuru

DataGrids are vital controls in many user interfaces. Like it or not still 2D tables are one of the most comfortable user interface elements in not only viewing data but also in performing rapid inserts and updates.

CRUD operations of DataGrid is not a big innovation, but there are plenty of ways to do that. This post explains how to perform CRUD operations using Infragistics WebDataGrid control in ASP.NET.

This code is written using Infragistics version 12.2

Create a simple WebDataGrid.

<ig:WebDataGrid ID="WebGridCarton" runat="server" Height="350px" Width="100%" AutoGenerateColumns="False" 
   DataKeyFields="CartonViewModelGuid" EnableDataViewState="True" 
   OnRowAdded="WebGridCarton_RowAdded" OnRowAdding="WebGridCarton_RowAdding" 
   OnRowDeleted="WebGridCarton_RowDeleted" OnRowsDeleting="WebGridCarton_RowsDeleting" 
   OnRowUpdated="WebGridCarton_RowUpdated" OnRowUpdating="WebGridCarton_RowUpdating">
   <Columns>
       <ig:BoundDataField DataFieldName="CartonViewModelGuid" Key="CartonViewModelGuid" Hidden="true" HtmlEncode="true">
       <Header Text="Guid">
       </Header>
       </ig:BoundDataField>
       <ig:BoundDataField DataFieldName="CartonInfoId" Key="CartonInfoId" Hidden="true" HtmlEncode="true">
           <Header Text="Id">
           </Header>
       </ig:BoundDataField>
       <ig:BoundDataField DataFieldName="SelectionColumn" Key="SelectionColumn" HtmlEncode="true" Width="15">
       </ig:BoundDataField>
       <ig:BoundDataField DataFieldName="Size" Key="Size" HtmlEncode="true">
           <Header Text="Size">
           </Header>
       </ig:BoundDataField>
       <ig:BoundDataField DataFieldName="Length" Key="Length" HtmlEncode="true">
           <Header Text="Length (cm)">
           </Header>
       </ig:BoundDataField>
       <ig:BoundDataField DataFieldName="Width" Key="Width" HtmlEncode="true">
           <Header Text="Width (cm)">
           </Header>
       </ig:BoundDataField>
       <ig:BoundDataField DataFieldName="Height" Key="Height" HtmlEncode="true">
           <Header Text="Height (cm)">
           </Header>
       </ig:BoundDataField>
       <ig:BoundDataField DataFieldName="Volume" Key="Volume" HtmlEncode="true">
           <Header Text="Volume (cbm)">
           </Header>
       </ig:BoundDataField>
       <ig:BoundDataField DataFieldName="Weight" Key="Weight" HtmlEncode="true">
           <Header Text="Weight (kg)">
           </Header>
       </ig:BoundDataField>
       <ig:BoundDataField DataFieldName="WeightLimit" Key="WeightLimit" HtmlEncode="true">
           <Header Text="Weight Limit (kg)">
           </Header>
       </ig:BoundDataField>
   </Columns>
   <Behaviors>
       <ig:Activation Enabled="true"></ig:Activation>
       <ig:Selection CellClickAction="Row" RowSelectType="Single" Enabled="true"></ig:Selection>
       <ig:EditingCore AutoCRUD="false">
           <Behaviors>
               <ig:CellEditing EditModeActions-EnableF2="true" EditModeActions-MouseClick="Single" Enabled="true">
                   <ColumnSettings>
                       <ig:EditingColumnSetting ColumnKey="CartonInfoId" ReadOnly="true" />
                       <ig:EditingColumnSetting ColumnKey="SelectionColumn" ReadOnly="true" />
                       <ig:EditingColumnSetting ColumnKey="CartonViewModelGuid" ReadOnly="true" />
                       <ig:EditingColumnSetting ColumnKey="Size" EditorID="DropDownProvider_Size" ValidatorID="RequiredFieldValidator1" />
                       <ig:EditingColumnSetting ColumnKey="Length" EditorID="WebTextEditor1" ValidatorID="DecimalValidator" />
                       <ig:EditingColumnSetting ColumnKey="Width" EditorID="WebTextEditor1" ValidatorID="DecimalValidator" />
                       <ig:EditingColumnSetting ColumnKey="Height" EditorID="WebTextEditor1" ValidatorID="DecimalValidator" />
                       <ig:EditingColumnSetting ColumnKey="Volume" EditorID="WebTextEditor1" ReadOnly="true" ValidatorID="DecimalValidator" />
                       <ig:EditingColumnSetting ColumnKey="Weight" EditorID="WebTextEditor1" ValidatorID="DecimalValidator" />
                       <ig:EditingColumnSetting ColumnKey="WeightLimit" EditorID="WebTextEditor1" ValidatorID="DecimalValidator" />
                   </ColumnSettings>
                   <EditModeActions MouseClick="Single" />
               </ig:CellEditing>
               <ig:RowAdding Alignment="Top" EditModeActions-EnableF2="true" EditModeActions-EnableOnActive="true"
                   EditModeActions-MouseClick="Single" Enabled="true">
                   <EditModeActions EnableOnActive="True" MouseClick="Single" />
                   <ColumnSettings>
                       <ig:RowAddingColumnSetting ColumnKey="SelectionColumn" ReadOnly="true" />
                       <ig:RowAddingColumnSetting ColumnKey="Size" EditorID="DropDownProvider_Size" ValidatorID="RequiredFieldValidator1" />
                       <ig:RowAddingColumnSetting ColumnKey="Length" EditorID="WebTextEditor1" ValidatorID="DecimalValidator" />
                       <ig:RowAddingColumnSetting ColumnKey="Width" EditorID="WebTextEditor1" ValidatorID="DecimalValidator" />
                       <ig:RowAddingColumnSetting ColumnKey="Height" EditorID="WebTextEditor1" ValidatorID="DecimalValidator" />
                       <ig:RowAddingColumnSetting ColumnKey="Volume" EditorID="WebTextEditor1" ReadOnly="true" ValidatorID="DecimalValidator" />
                       <ig:RowAddingColumnSetting ColumnKey="Weight" EditorID="WebTextEditor1" ValidatorID="DecimalValidator" />
                       <ig:RowAddingColumnSetting ColumnKey="WeightLimit" EditorID="WebTextEditor1" ValidatorID="DecimalValidator" />
                   </ColumnSettings>
               </ig:RowAdding>
               <ig:RowDeleting Enabled="true" />
           </Behaviors>
       </ig:EditingCore>
   </Behaviors>
   <EditorProviders>
       <ig:TextBoxProvider ID="WebTextEditor1">
           <EditorControl ID="EditorControl1" ClientIDMode="Static" runat="server"></EditorControl>
       </ig:TextBoxProvider>
       <ig:DropDownProvider ID="DropDownProvider_Size">
           <EditorControl ClientIDMode="Predictable" DropDownContainerMaxHeight="100px" EnableAnimations="False"
               EnableDropDownAsChild="False" ID="CartonSizeDrdEditor" DropDownContainerWidth="185px" AutoPostBack="true" 
               EnableAjaxViewState="true">
           </EditorControl>
       </ig:DropDownProvider>
   </EditorProviders>
</ig:WebDataGrid>

This grid has one drop down editor and others fields are text box editors. And it supports CRUD. The grid control has 6 CRUD events associated with it. They’re RowAdding, RowAdded, RowUpdating, RowUpdated, RowDeleting and RowDeleted.

This is the ViewModel class used for data binding.

public class CartonInfoGridViewModel
{
    public string CartonViewModelGuid { get; private set; }
  
    public int CartonInfoId { get; set; }
    public string Size { get; set; }
    public string Length { get; set; }
    public string Width { get; set; }
    public string Height { get; set; }
    public string Volume { get; set; }
    public string Weight { get; set; }
    public string WeightLimit { get; set; }
  
    public CartonInfoGridViewModel()
    {
        this.CartonViewModelGuid = Guid.NewGuid().ToString();
    }
}

CartonViewModelGuid property is used identify the objects in the Session collection.

Adding Rows

In the RowAdding event we create a new ViewModel object with the values entered in the grid. And add it to the Session collection then we bind the Session collection to the grid. Please note these property names are same as the ones in the ASPX file.

protected void WebGridCarton_RowAdding(object sender, Infragistics.Web.UI.GridControls.RowAddingEventArgs e)
{
    var cartonRow = new CartonInfoGridViewModel();
  
    cartonRow.CartonInfoId = -1;
    cartonRow.Size = e.Values["Size"].ToString();
    cartonRow.Length = e.Values["Length"].ToString();
    cartonRow.Width = e.Values["Width"].ToString();
    cartonRow.Height = e.Values["Height"].ToString();
    cartonRow.Volume = e.Values["Volume"].ToString();
    cartonRow.Weight = e.Values["Weight"].ToString();
    cartonRow.WeightLimit = e.Values["WeightLimit"].ToString();
  
    if (this.Session["GridGridCartonsInfo"] != null && this.Session["GridCartonsInfo"] is List<CartonInfoGridViewModel>)
    {
        var collection = Session["GridCartonsInfo"] as List<CartonInfoGridViewModel>;
        collection.Add(cartonRow);
    }
    else
    {
        var collection = new List<CartonInfoGridViewModel>();
        collection.Add(cartonRow);
    }
  
    this.DataBindCaronInfoGrid();
}

DataBindCaronInfoGrid method binds the Session data to the Grid.

Just to prevent any Javascript errors popping up during this process in the RowAdded event we suppress the exceptions.

protected void WebGridCarton_RowAdded(object sender, Infragistics.Web.UI.GridControls.RowAddedEventArgs e)
{
    e.ExceptionHandled = true;
}

Deleting Rows

To delete a row we get the Id of the object and remove it from the Session collection. And bind the Session data to the grid.

protected void WebGridCarton_RowsDeleting(object sender, Infragistics.Web.UI.GridControls.RowDeletingEventArgs e)
{
    string id = e.Row.DataKey.First().ToString();
  
    if (this.Session["GridGridCartonsInfo"] != null && this.Session["GridCartonsInfo"] is List<CartonInfoGridViewModel>)
    {
        var collecion = this.Session["GridGridCartonsInfo"] as List<CartonInfoGridViewModel>;
  
        var removeItem = collecion.FirstOrDefault(c => c.CartonViewModelGuid == id);
  
        if (removeItem != null)
            collecion.Remove(removeItem);
    }
  
    this.DataBindCaronInfoGrid();
}
  
protected void WebGridCarton_RowDeleted(object sender, Infragistics.Web.UI.GridControls.RowDeletedEventArgs e)
{
    e.ExceptionHandled = true;
}

Updating Rows

Updating the rows happens the same way, we identify the object via the Id and update the values.

protected void WebGridCarton_RowUpdating(object sender, Infragistics.Web.UI.GridControls.RowUpdatingEventArgs e)
{
    if (Session["GridGridCartonsInfo"] != null && Session["GridGridCartonsInfo"] is List<CartonInfoGridViewModel>)
    {
        var collection = Session["GridGridCartonsInfo"] as List<CartonInfoGridViewModel>;
  
        if (e.OldValues["CartonViewModelGuid"].ToString() == e.Values["CartonViewModelGuid"].ToString())
        {
            string id = e.Values["CartonViewModelGuid"].ToString();
  
            var editItem = collection.FirstOrDefault(c => c.CartonViewModelGuid == id);
  
            if (editItem != null)
            {
                editItem.CartonInfoId = Convert.ToInt32(e.Values["CartonInfoId"]);
                editItem.Size = e.Values["Size"].ToString();
                editItem.Length = e.Values["Length"].ToString();
                editItem.Width = e.Values["Width"].ToString();
                editItem.Height = e.Values["Height"].ToString();
                editItem.Volume = e.Values["Volume"].ToString();
                editItem.Weight = e.Values["Weight"].ToString();
                editItem.WeightLimit = e.Values["WeightLimit"].ToString();
            }
        }
  
        this.DataBindCaronInfoGrid();
    }          
}
  
protected void WebGridCarton_RowUpdated(object sender, Infragistics.Web.UI.GridControls.RowUpdatedEventArgs e)
{
    e.ExceptionHandled = true;
}

Note

In the ViewModel class CartonViewModelGuid property is used as the object identifier in the collection. (In this case collection is persisted in the ASP.NET Session) For the new rows we set the CartonInfoId to –1, because this is an identity column in the database.

When we update the objects which are stored in the database already we can’t change the CartonInfoId that’s the reason why we use a separate Id property for the ViewModels.

The code for the DataBindCaronInfoGrid method

private void DataBindCaronInfoGrid()
{
    if (this.Session["GridCartonsInfo"] != null && this.Session["GridCartonsInfo"] is List<CartonInfoGridViewModel>)
    {
        this.WebGridCarton.DataSource = Session["GridCartonsInfo"] as List<CartonInfoGridViewModel>;
        this.WebGridCarton.DataBind();
    }
    else
        this.LblStatus.Text = "Session expired, Please reload the page.";
}

HTTP Headers

Posted on May 13, 2013 by Thuru

This is a quick and a small post on reading the HTTP headers in ASP.NET. Code gets the HTTP header key – value pairs and write it to a text file.

protected void Page_Load(object sender, EventArgs e)
{
    var headers = Request.Headers;
    StreamWriter writer = new StreamWriter(Server.MapPath("~/data.txt"));
  
    foreach (var item in headers.AllKeys)
    {
        string data = item + "---" + headers[item];              
        writer.WriteLine(data);
    }
  
    writer.Flush();
    writer.Close();
}

Output text file as follows.

Connection---Keep-Alive
Accept---text/html, application/xhtml+xml, */*
Accept-Encoding---gzip, deflate
Accept-Language---en-US
Host---localhost:24859
User-Agent---Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)

UI Updates – Part 2

Posted on April 10, 2013 by Thuru

ASP.NET

ASP.NET UI updates are handles using Ajax. In this example it is described how to use the ASP.NET Ajax for the updates.

In ASP.NET Ajax we can have update panel and make the updates via Ajax calls. Prepare your ASPX markup like below.

<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        
        <div>
            <asp:Button ID="BtnPostback" runat="server" Text="PostBack" OnClick="BtnPostback_Click" />
        </div>
  
        <div>
            <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                <ProgressTemplate>
                    <asp:Label Text="Working..." ID="LblBusyIndicator" runat="server"></asp:Label>
                </ProgressTemplate>
            </asp:UpdateProgress>
        </div>
  
        <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="BtnPostback" />
                </Triggers>
            </asp:UpdatePanel>
        </div>
  
    </form>
</body>

Code behind..

private void PerformTask()
{
    // job time 4 - 10 seconds
    int time = new Random().Next(4, 11);
    Thread.Sleep(1000 * time);
    Label1.Text = String.Format("Hello from worker - ran for {0} seconds", time);
}
  
  
protected void BtnPostback_Click(object sender, EventArgs e)
{
    PerformTask();
}

Silverlight

Silverlight the platform itself is asynchronous. And we can have the same mechanism we used in WPF for the UI updates, but little different.

Read the Silverlight Dispatcher for the Silverlight UI updates

Put watermarks on uploaded images–ASP.NET

Posted on January 22, 2013 by Thuru

Here’s the simples piece of code in C# which can write some text on an image, eventually making it as a watermark.

StreamReader reader = new StreamReader(Server.MapPath("sample.jpg"));

Bitmap bi = new Bitmap(reader.BaseStream); // base image 
Graphics gr = Graphics.FromImage(bi);
            
string customString = "your string goes here";
gr.DrawString(s, new Font("Cooper Black", 25), Brushes.ForestGreen, new PointF(140, 115));
           
StreamWriter writer = new StreamWriter(Server.MapPath("edited.jpg"));
writer.AutoFlush = true;

bi.Save(writer.BaseStream, ImageFormat.Jpeg); // saving the edited image

reader.Close();
writer.Close();

Charting with DotNet HighCharts

Posted on January 6, 2013 by Thuru

This post explains how to use the DotNet HighCharts wrapper for the HighCharts Javascript library. You can download the wrapper from Codeplex.

First create an ASP,NET file and add the following Javascript references.

<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>   1:  
<script src="http://code.highcharts.com/highcharts.js">
</script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

Download the wrapper and add the single .dll reference to the project and add the following using statements to the code.

using DotNet.Highcharts;
using DotNet.Highcharts.Options;
using DotNet.Highcharts.Helpers;
using DotNet.Highcharts.Enums;

The wrapper provides pure C# methods for generating the charts and has a method ToHtmlString() which returns the JavaScript version of the chart. This can be set to a ASP.NET Literal control for rendering.

Then here’s a sample for creating a column chart with two series.

DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart").SetXAxis(new XAxis
            {
                Categories = sales.GetSales().Select(list => list.ProductName).ToArray<string>()
            })
            .SetSeries(new Series []
            {
                new Series()
                {
                    Type = ChartTypes.Column,
                    Data = new Data(new object [] {125,824,122}),
                    Name = "Sales"
                },
                new Series()
                {
                    Type = ChartTypes.Column,
                    Data = new Data(new object [] { 57,234,67 }),
                    Name = "Freight"
                }
            });

‘sales’ is the object data source, and we get the product name from it and the values are hard coded. All charts has a name, here the column chart’s name is ‘chart’ itself. Names should be unique for the page. If you have another chart with same in the same page only the last chart will be displayed.

Then chart has SetXAxis method where set the X-Axis properties. And the chart has number of series. We feed the data to the series through its Data property which takes an object array.

Finally we serialize the chart as HTML content to the Literal control (ltrChart)

Example of a pie chart generation.

DotNet.Highcharts.Highcharts piechart = new DotNet.Highcharts.Highcharts("pie").SetXAxis(new XAxis
            {
                Categories = sales.GetSales().Select(list => list.ProductName).ToArray<string>()
            })
            .SetSeries(new Series[]
            {
                new Series()
                {
                    Type = ChartTypes.Pie,
                    Data = new Data(new object [] {125,824,122}),
                    Name = "Sales"
                }
            });
  
            piechartLiteral.Text = piechart.ToHtmlString();

Versatile Digital DNA

Category Archives: ASP.NET

Let’s hookup with ASP.NET Webhooks Preview

The requested content appears to be script and will not be served by the static file handler.

CRUD operations in Infragistics WebDataGrid

HTTP Headers

UI Updates – Part 2

Put watermarks on uploaded images–ASP.NET

Charting with DotNet HighCharts

Share this:

Share this:

Share this:

Share this:

Share this:

Share this:

Share this:

Share this: