Creating Custom Formatter in ASP.NET Web API TO HANDLE SPECIFIC formatted REQUEST

In this article I will show you how to create a custom formatter in ASP.Net Web API to send object in Request body with specific format.

This is a series of the article I wrote earlier in which I showed the way of handling formatted response. http://ovaismehboob.wordpress.com/2014/01/04/creating-custom-formatter-in-asp-net-web-api-for-specific-formatted-response/

Formatters in ASP .NET Web API plays an important role, when the request comes to the server, depending on the media-type, determines which formatter has to be used to parse the request and assemble the data into appropriate format as response. In ASP.Net Web API when the request is made by the user, Web API framework checks if it is Simple Type or a Complex Type. All types like string, integers, etc. are simple types and by default ASP.Net Web API read those values from URI and uses Model binding. On the other hand for complex types, ASP.Net WEB API framework read it from request body by default (the behavior can be overridden) an depending on the content-type load specific formatter from the list of formatters available in HttpConfiguration list.

Let suppose we want to send object in pipe format. In this post I will send a user object in request body in below format.

User object have two properties namely Name and Position and we need to send data in below format

Request Body: Name=Ovais | Position=Technical Architect

This can be done by implementing a custom formatter. When you are creating a custom formatter in ASP.Net Web API, you have two options one is when the request is arrived on server and you want to return the data in specific format or when the request arrives and you want to read/parse the data in specific format.

Steps to follow.

  1. Create a new Web API project in Visual Studio
  2. Add a new User class having two string properties namely Name and Position
  3. Add a new folder named “Infrastructure”. It’s always a good practice to place all the core level classes in particular folder. In my case I have named it Infrastructure.
  4. Add a new class and named it PipeFormatter
  5. Derive this class from BufferedMediaTypeFormatter
  6. Override CanReadType and ReadToStream methods and add the logic to handle incoming request
  7. Below is the complete code of PipeFormatter class


public class PipeFormatter : BufferedMediaTypeFormatter
{
public PipeFormatter() {
SupportedMediaTypes.Add(new System.Net.Http.Headers.MediaTypeHeaderValue(“text/pipe”)); }

public override bool CanReadType(Type type)
{
if (type == typeof(User)) {
 return true;

}
return false

}

public override object ReadFromStream(Type type, System.IO.Stream readStream, System.Net.Http.HttpContent content, IFormatterLogger formatterLogger, System.Threading.CancellationToken cancellationToken) {

 User userObject = new User();

 StreamReader reader = new StreamReader(readStream);

 string str=reader.ReadToEnd();

 String[] propArr = str.Split(new char[] { ‘|’ });

 foreach (var val in propArr) {
string[] propIntArr = val.Split(new char[] { ‘=’ });
if (propIntArr[0].ToLower().Trim().Equals(“name”)){
userObject.Name = propIntArr[1].ToString();
}
else if (propIntArr[0].ToLower().Trim().Equals(“position”)) {
userObject.Position = propIntArr[1].ToString();
}
}
return userObject;
}
}

 8. In the above code you can see that I have added the “text/pipe” media type in the supported media type list. This you have to add it so you can specify the Content-Type attribute when sending HTTP request.

 9. Now open the WebApiConfig class placed under App_Start folder

 10. Add an entry in the config.Formatters collection as below.

config.Formatters.Add(new WebApplication1.Infrastructure.PipeFormatter));

 11. Build the project and run.

 12. In order to test I used Fiddler
13. Requesting from fiddler
 

14. ReadFromStream method is called and populate the User object


15. And finally on my controller Post method I am receiving this object.
 

Hope this helps!

Providing Interactive Grid handling in ASP.Net MVC Application using Kendo UI

Nowadays, in every application, grid plays an important role in providing rich and easy interface for data management. In my last project I used Telerik Kendo UI Grid control for ASP.Net which I found quite easy and robust to use with ASP.NET MVC applications. Developers only need to provide some configuration and the rest of features like paging, sorting, filtering editing, updating, etc. runs accordingly. Moreover, there are lot of different skins available which you can apply depending on your UI design.

Following are the steps shows the usage of Telerik Kendo UI Grid control in ASP .NET MVC applications with a minimal amount of code.

  1. Create a new ASP.Net MVC Web Application in Visual Studio
  2. Make sure you have installed the Telerik ASP.NET MVC Controls suite from telerik website.
  3. In your MVC project add a reference to Kendo.MVC.dll from C:\Program Files (x86)\Telerik\UI for ASP.NET MVC Q1 2014\wrappers\aspnetmvc\Binaries\Mvc5
  4. Under the Scripts folder add kendo.all.min.js and kendo.aspnetmvc.min.js files from C:\Program Files (x86)\Telerik\UI for ASP.NET MVC Q1 2014\JS
  5. Then, create another folder Styles under root MVC project and add three files and a Default folder containing images for telerik controls.

    - kendo.common.min.css

    - kendo.dataviz.min.css

    - kendo.default.min.css

  6. Open BundleConfig.cs file and add entries to newly added Kendo CSS files and Javascript files.

    bundles.Add(new
    ScriptBundle(“~/bundles/kendoUI”).Include(


“~/Scripts/kendo.all.min.js”,


“~/Scripts/kendo.aspnetmvc.min.js”));


bundles.Add(new
StyleBundle(“~/Content/css”).Include(


“~/Content/bootstrap.css”,


“~/Content/site.css”,


“~/Styles/kendo.common.min.css”,


“~/Styles/kendo.dataviz.min.css”,


“~/Styles/kendo.dataviz.default.min.css”));

7. Now open the _Layout.cshtml as this is the default master page in ASP.Net MVC application and add the newly configure kendo bundle in the head section as below

@Scripts.Render(“~/bundles/kendoUI”)

8. Now let’s create a new controller named “DemoController”

 

9.  Create a sample model class that contains few properties

public
class
Person
{

public
Int32 Id { set; get; }

public
String Name { set; get; }

public
String Company { set; get; }

public
String Designation { set; get; }

public
String EmailAddress { set; get; }
}

10. Then in the newly added DemoController add a GetPersons method that returns the list of persons to display in a view.


public
class
DemoController : Controller

{


// GET: Demo


public
ActionResult GetPersons([DataSourceRequest] DataSourceRequest request)

{


List<Person> personLst = new
List<Person>();

personLst.Add(new
Person { Id = 1, Name = “Ovais Mehboob”, Company = “USTS”, Designation = “Technical Architect”, EmailAddress = “ovaismehboob@yahoo.com” });

personLst.Add(new
Person { Id = 1, Name = “Khusro Habib”, Company = “EO”, Designation = “SAP Lead”, EmailAddress = “n/a” });

personLst.Add(new
Person { Id = 1, Name = “David”, Company = “USTS”, Designation = “Network Administrator”, EmailAddress = “n/a” });


return Json(personLst);

}

}

11. Create a Index method that returns ActionResult. As per the default routing engine this will be invoked whenever the controller will be called without action name

12. Add a new empty view by right clicking the Index method

13. Add the html.kendo grid code as shown below in the Index.cshtml page

@using System.Collections;

@using Kendo.Mvc.UI;

<h2>Persons</h2>

@(Html.Kendo().Grid<DemoKendo.Models.Person>()

.Name(“grid”)

.Columns(columns =>

{

columns.Bound(p => p.Name).Width(200).Title(“Name”);

columns.Bound(p => p.Company).Width(300).Title(“Company”);

columns.Bound(p => p.Designation).Width(200).Title(“Designation”);

columns.Bound(p => p.EmailAddress).Width(200).Title(“Email Address”);

})

.HtmlAttributes(new { style = “height: 500px” })

.Editable(editable => editable.Mode(GridEditMode.InCell))

.Pageable()

.Navigatable()

.Filterable()

.Sortable()

.Scrollable()

.ColumnMenu()

.Resizable(resizable => resizable.Columns(true))

.DataSource(dataSource => dataSource

.Ajax()

.Batch(false)

.PageSize(50)

.ServerOperation(false)

.Model(model =>

{

model.Id(p => p.Id);

}

)

.Read(action => action.Action(“GetPersons”, “Demo”))

.Update(“SavePerson”, “Demo”)

)

)

14. If you see the above code the .Read is the method where you can specify the action name followed with a Controller name

15. Likewise read, you can add update and delete methods as well

16. There are many attributes provided which you can configure on the fly like Pageable() for paging, Filterable() for filtering. For detailed documentation for each method please visit telerik.com

17. Once you build and run the project you will see something like below

Hope this helps!

Awarded Microsoft MVP (Most Valuable Professional) Award

I am glad to announce that on 1st July 2014, I received an email from Microsoft on being awarded as the Microsoft MVP (Most Valuable Professional) in ASP.Net/IIS. I got really excited to see the award and that Microsoft has recognized my contributions I did in the community.

I am more impassioned and certainly increases my motivation to contribute more in the community.

I would like to thanks Microsoft for acknowledging my efforts and especially Microsoft Innovation Center, Pakistan for sponsoring my technical sessions/events and giving me opportunity to contribute and participate in Boot camps and Tech Ed events.

Looking forward to continue my efforts and share the knowledge as much as I can to help the community.

Grab eBooks and Videos in a very low price – by Packt Publishing

Being an active participant in reviewing Packt Publishing books related to Software discipline, I would like to celebrate the 10 years completion of Packt and wanted to express the new and exciting promotion in which they are offering all the eBooks and Videos for just $10.

Folks, hurry up and grab some good titles!

Here is a link Packt $10 Offer

 

Common errors in processing EDI documents using BizTalk Server 2013

Following are some errors I encountered while setting up an EDI in BizTalk Server 2013. These are quite common errors but I thought to write a post showing the exact reason of the problem which may help someone configuring EDI.

I will try to keep update this article the more errors I come across so it will be used as a reference.

ERROR 1: Agreement Resolution based on the context properties for x12 Protocol has failed

Resolution:

In order to resolve this error check the Identifiers values in parties agreement and when sending an EDI document specify the exact values that have been set for ISA6 and ISA8 in the identifiers tab of the Source Party agreement. These values should match the value of an EDI document for the same ISA6 and ISA6 properties.



In the above screen shot ISA6 and ISA8 values are PartyA and PartyB and the Sender and Receiver qualifiers are ZZ-Mutually Defined (X12)

So the EDI document header should be something like below

ISA^00^ ^00^ ^ZZ^PartyA ^ZZ^PartyB

 

 

 

ERROR 2: Delimiters are not unique, field and segment separator are the same. The sequence number of the suspended message is 1.

Resolution:

EDI document is fixed length format. This error comes up when the values length exceeded or does not meet the fixed length format. When structuring EDI document its better to define the values properly otherwise sometimes it becomes hard to rectify this type of error.

Step by Step guide of setting up an EDI in BizTalk Server 2013

What is an EDI

EDI – Electronic Data Interchange is an electronic communication medium that is use to exchange documents between different trading partners. EDI have specific text file format followed with specific version and document Id. For example, the Warehouse shipping order document is termed as 940 EDI document.

Why do company prefer EDI to exchange documents?

There are many benefits. Computer to computer exchange is much less expensive, cost is a primary reason, as it’s a standard every business understands and parse the documents easily.

Role of BizTalk Server

BizTalk server is a powerful server side product developed by Microsoft that is used for integrating distributed systems or applications. It acts as a middle hub where the businesses can submit documents and the destination client can get it in his specific format. It works on the publisher/subscriber model in which the client can subscribe to the incoming messages and the publisher publishes it to that port. On the other hand if you need to tweak some attributes of the document or to transform the inputted document into the client’s specific format can be done using mapping or pipeline.

Scenario

In this article I will give the complete step by step in sending 940 EDI document and converting it to the client’s specific XML format, and placing it to the destination folder.

  1. Open Visual Studio 2012. (With BizTalk 2013 you can create BizTalk projects using VS 2012)
  2. Create a new empty BizTalk project

     

     

  3. Specify name and click OK.
  4. As we have to process EDI 940 document we need to add its schema
  5. Right click the project and add existing schema from C:\Program Files (x86)\Microsoft BizTalk Server 2013\XSD_Schema\EDI

     

     

  6. Now create another schema which you wanted to send to the destination client.

     

     

  7. Now add some child elements into the schema as shown below

     

     

  8. Now add a map to provide mapping between the 940 schema file to our custom created schema file.

     

  9. Once this is added, we can see screen like this

     

     

  10. Now click on the Open Source schema and select 940 schema document

     

     

  11. Now click on the Open destination schema and select client specific one we recently created

     

  12. For demo only, I am mapping ST01 with OrderNo and ST02 with CompanyCode

     

 

  1. Save the project and build it.
  2. Before deploying sign the assembly from project properties signing tab

     

  3. Go to the deployment tab and select Restart host Instances to True and specify the Application Name

     

  4. Rebuild and deploy the solution, you will see the application added under the Applications
  5. Go to the BizTalk administrative console and you can see the application added in the Applications tab
  6. Now create a receive port where you will submit the EDI 940 text file.

    Right click the Receive Ports and click add New -> One way receive port

     

     

  7. In order to process EDI document we have add a reference to BizTalk EDI Application
  8. Right click the application and click properties
  9. Go to the references tab
  10. Add application reference as BizTalk EDI Application

     

     

  11. Click on the Receive Locations and add new receive location by hitting the New button
  12. Specify Receive location name as RecieveLocation
  13. Select Type as File as we will be putting the EDI txt file on particular folder
  14. Click configure to select the path and other attributes
  15. Specify the receive folder and select file mask as *.txt
  16. I have specified C:\demo\in as folder path where I will put EDI txt files

     

  17. Now add a send port where the file after processing by BizTalk will be send.

     

     

  18. In the SendPort window select TYPE as file and configure the path where the document will be placed after processing from BizTalk. I have selected file extension as .xml as I will be sending the custom formatter xml on the folder.
  19. Select send pipeline as XMLTransmit
  20. Add Outbound Maps and select the map you have created above.

     

  21. Specify Filter to process only those messages that have specific attributes.
  22. Here I will select BTS.RecievePortName = “RecievePort”

     

  23. Click Ok

     

     

Running Solution

Now when you place the EDI text file at C:\Demo\In folder it will be picked, transformed into client specific xml format and placed it into the C:\Demo\out folder by BizTalk Server.

Output file format looks like below

<?xml version=”1.0″ encoding=”utf-8″?><ns0:DemoData xmlns:ns0=”http://DemoPrj.clientspecific”><OrderNo>94A</OrderNo><CompanyCode>0001</CompanyCode></ns0:DemoData&gt;

 

Hope this helps to those who are new to BizTalk and EDI implementations.

Key practice of MVVM in XAMP apps

In XAML based apps i.e. Silverlight, WPF, Windows store and windows phone apps there are many ways to bind objects or collections with control properties.

In order to bind it with textbox (suppose), one way is to set the DataContext property of the container i.e. Grid, StackPanel etc. and bind it using {Binding Path=PropertyName} where property name could be any property of the object binded with the DataContext property of the container. There are many ways of binding shown in my other article http://ovaismehboob.wordpress.com/2011/06/20/wpf-data-binding-options/

Although there are many other ways of binding, but for example if you want to update the control property when the object value modifies real problem comes in. In order to achieve this we can implement MVVM pattern. MVVM works with Model, View and ViewModel. Where a Model represents a domain model, View contains controls whereas the ViewModel is the model of a view and contains the properties, events, etc. particularly to the View. In order to handle this scenario, we can create a ViewModel in this below example and then bind it to the view in the later stage. To notifying UI thread we have to implement INotifyPropertyChanged interface.

public
class
TestViewModel: INotifyPropertyChanged

 

{


public RegistrationViewModel()

{

attributes = new
ObservableCollection<String>();

}

 


public
event
PropertyChangedEventHandler PropertyChanged;

 


string _name;

 


public
string Name

{

 


set { this._name = value;

NotifyChangeEvent(“Name”);

}


get { return _name; }

}

 


ObservableCollection<String> _attributes;

 


public
ObservableCollection<String> Attributes

{


set

{


This._attributes = value;

NotifyChangeEvent(“Attributes”);

}


get { return _attributes; }

 

}

 

 

 


void NotifyChangeEvent(string propName)

{


if (PropertyChanged != null)

PropertyChanged(this, new
PropertyChangedEventArgs(propName));

}

}

 

 

In the above code you can see I have two properties Name and Attributes. While setting Name value I am calling NotifyChangeEvent that checks the event and call invoke if it’s not null.

You may notice that the Attributes collection is ObservableCollection and not List, etc. if we set it to List, etc. it does not notifies any modification happens to the collection. http://msdn.microsoft.com/en-us/library/ms668604(v=vs.110).aspx

 

Now let suppose you have a form containing two textboxes and a list.

XAML as follows


<Grid Name=”grdreg” Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”>


<TextBox
Name=”txtBox” HorizontalAlignment=”Left” Height=”124″ Margin=”161,128,0,0″ TextWrapping=”Wrap”
VerticalAlignment=”Top” Width=”297″/>


<TextBox Name=”txtBox2″ HorizontalAlignment=”Left” Height=”142″ Margin=”161,276,0,0″ TextWrapping=”Wrap” Text=”{Binding Path=Name}” VerticalAlignment=”Top” Width=”423″/>


<Button Content=”Update” HorizontalAlignment=”Left” Height=”130″ Margin=”475,125,0,0″ VerticalAlignment=”Top” Width=”112″ Click=”Button_Click”/>


<ListBox ItemsSource=”{Binding Path=Attributes}”
HorizontalAlignment=”Left” Height=”290″ Margin=”616,128,0,0″ VerticalAlignment=”Top” Width=”159″/>

 


</Grid>

The first textbox in white is a TextBox control (txtBox) and the second in gray is also a TextBox control (txtBox2), whereas the right one in vertical is ListBox. In the XAML, you can bind any object property like {Binding Path=PropertyName} and in this snippet the txtBox is binded with Name property like {Binding Path=Name}.

For list control you can set ItemsSource property and use the same {Binding Path=PropertyName} to bind with specific collection property. Now how does the runtime know which object property has to be mapped. This can be done by specifying the DataContext property of the container where all controls reside and this I have set it in the code-behind (You can also set in XAML)

Code behind

public
sealed
partial
class
BlankPage1 : Page

{

 


RegistrationViewModel viewModel;


public BlankPage1()

{


this.InitializeComponent();

 

viewModel= new
RegistrationViewModel();

grdreg.DataContext = viewModel;

}

 


private
void Button_Click(object sender, RoutedEventArgs e)

{

viewModel.Name = txtBox.Text;

viewModel.Attributes.Add(txtBox.Text);

}

}

}

On page constructor I am initializing the viewModel and setting it to the DataContext property of grid container “grdreg”.

That’s all…

you can start modifying values of the view model, UI will be updated accordingly.

Tip: In case you have apps for different platforms namely Silverlight, windows phone and windows store apps etc. you can use Portable Class Library and place all your view models there. http://msdn.microsoft.com/en-us/library/gg597391(v=vs.110).aspx

Follow

Get every new post delivered to your Inbox.

Join 60 other followers

%d bloggers like this: