Consuming ASP.NET Web API Service using HttpClient: Part2 of Many

How to Self-Host ASP.Net Web API: Part 3 of Many

In this post we will consume ASP.Net Web API HTTP Service in Windows Phone Application. If you do not specify header information in HTTP request then by default ASP.Net Web API service returns JSON data. So essentially there are three steps involved in consuming HTTP Service from ASP.Net Web API in Windows Phone Application.

1. Make a HTTP Request
2. Read data from HTTP Response
3. Parse returned JSON data and bind data to data bound control

In this post we are going to consume service created in this POST

I have created a Windows Phone Application by choosing target framework 7.1. We are going to display Bloggers Data returned from ASP.Net Web API service in a ListView. Essentially we are going to consume a JSON Data from a HTTP Service. For that add below references in the project.

We are going to de-serialize JSON data using DataContractJsonSerializer class. We need to create a class at client side representing Bloggers entity from the service. Let us create a class called BloggersClient. We will de-serialize JSON data returning from the HTTP service in this object of this class.

namespace WindowsPhoneClient
{
public class BloggersClient
{
public string Id { get; set; }
public string Name { get; set; }
public string AreaOfIntrest { get; set; }

}
}

Once the client class is in placed add following references,

We are going to download JSON data from ASP.Net Web API service using WebClient class. Make sure that you are passing URL of your HTTP Service.

In the completed event, we will parse returned JSON using DataContractJsonSerializer class. In following code,

• Creating MemoryStream form returned result
• Creating object to de-serialize the returned JSON data
• Reading de-serialized data object in List of BloggersClient
• Setting List of BloggerClient as ItemSource of ListBox. On the XAML we have put a ListBox with name lstBloggers.

Code behind to load data from ASP.Net Web API HTTP Service on page load of the application and s display in ListBox is as following

using System;
using System.Collections.Generic;
using System.Net;
using Microsoft.Phone.Controls;
using System.Runtime.Serialization.Json;
using System.IO;
using System.Text;

namespace WindowsPhoneClient
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
WebClient proxy = new WebClient();
proxy.DownloadStringCompleted +=
new DownloadStringCompletedEventHandler(proxy_DownloadStringCompleted);
proxy.DownloadStringAsync(new Uri("http://localhost:39192/api/Bloggers"));
}

void proxy_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
Stream s = new MemoryStream(Encoding.Unicode.GetBytes(e.Result));
DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(List<BloggersClient>));
List<BloggersClient> result = (List<BloggersClient>) ser.ReadObject(s);
lstBloggers.ItemsSource = result;
}
}
}

On the XAML, we have put ListBox control do bind data from HTTP Service in the control.

If you are not aware of Data Binding in ListBox then watch a quick Video here

<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="ASP.Net Web API" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox x:Name="lstBloggers">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Name}" Style="{StaticResource PhoneTextTitle2Style}" />
<TextBlock Text="{Binding AreaOfIntrest}" Style="{StaticResource PhoneTextAccentStyle}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>

Now press F5 to run the application. You should able to get Bloggers detail from ASP.Net Web API service in Windows Phone Application.

I hope you find this post useful. Thanks for reading.

In this post, we will step by step walkthrough that How to Self-Host ASP.Net Web API. We are going to host Web API in a console application. To do that creates a Console Application.

After creating Console Application make sure to change target framework to .NET Framework 4.0. To change framework right click on the project and select Properties and choose .NET Framework 4 from drop down

Next we need to add reference of ASP.Net Web API. We will add reference using NuGet. We will add NuGet Web API package. To add this right click on the project and click on Manage NuGet Package

In the search box type Microsoft.AspNet.WebApi.SelfHost and click on search button. Make sure to install Microsoft ASP.NET Web API Self Host in the project.

Accept the license term to install the package.

By this time we have set up the environment for self-hosting of Web API. Next we will add a Model class. To add that right click and add a class to the project.

Bloggers.cs

namespace webapihostapp
{
public class Bloggers
{
public string Id { get; set; }
public string Name { get; set; }
public string AreaOfIntrest { get; set; }
}
}

Next we will add a Controller class. To add that right click and add a class to the project. Make sure that you are appending Controller with the class name. For example you want to give controller name as abc then make sure that you are giving class name ABController. In this case we are giving controller name BloggersController .

Controller class needs to be inherited from ApiController class.

Next we need to write Action in the controller. We are writing a simple Action and this is returning List of Bloggers. Controller class will look like following

BloggersController.cs

using System.Collections.Generic;
using System.Web.Http;

namespace webapihostapp
{
public class BloggersController :ApiController
{
public List<Bloggers> GetBloggers()
{
return new List<Bloggers>
{
new Bloggers { Id="1", AreaOfIntrest ="Sql Server " , Name ="Pinal Dave"},
new Bloggers { Id="2", AreaOfIntrest ="ASP.Net " , Name =" Suprotim Agarwal " },
new Bloggers { Id="3", AreaOfIntrest ="C Sharp " , Name ="ShivPrasad Koirala"},
new Bloggers { Id="4", AreaOfIntrest ="Sql Server" , Name =" vinod Kumar " },
new Bloggers { Id="5", AreaOfIntrest ="JavaScript " , Name ="John Papa"},
new Bloggers { Id="6", AreaOfIntrest ="Dan Wahlin " , Name ="HTML5" },
new Bloggers { Id="7", AreaOfIntrest ="Business Intelligence " , Name ="Stephen Forte"},
new Bloggers { Id="8", AreaOfIntrest ="Web API " , Name ="Glen Block" },
new Bloggers { Id="9", AreaOfIntrest ="Windows Azure " , Name ="Gaurav Mantri"},
new Bloggers { Id="10", AreaOfIntrest ="Entity Framework" , Name ="Julie Lerman " },
new Bloggers { Id="11", AreaOfIntrest ="HTML" , Name ="John Bristow"},
new Bloggers { Id="12", AreaOfIntrest ="Silverlight" , Name ="Kunal" },

};

}
}
}

As of now we have Model and Controller in place. We will write code in Program file to host the Web API. Very first add the following namespaces in Program.cs

Then create instance of HttpSelfHostConfiguration

Next add a default route

After adding default route we need to create instance of HttpSelfHostServer and pass the configuration we just created as parameter.

Consolidating all the discussion together code to self-host ASP.Net Web API would be as following

Program.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.Http;
using System.Web.Http.SelfHost;

namespace webapihostapp
{
class Program
{
static void Main(string[] args)
{
var config = new HttpSelfHostConfiguration("http://localhost:9999");
config.Routes.MapHttpRoute(
"API Default", "api/{controller}");

using (HttpSelfHostServer server = new HttpSelfHostServer(config))
{
server.OpenAsync().Wait();
Console.WriteLine("Press Enter to quit.");
Console.ReadLine();
}
}
}
}

Now press F5 to run the application

Now browse to URL and should able to download Bloggers detail as JSON.

In this way we can self-host ASP.Net Web API in a console application. I hope you find this post useful. Thanks for reading.

I am in love with ASP.NET Web API hence I started writing on the same. In first part of this blog series I have written Creating First HTTP Service using ASP.NET Web API: Part1 of Many.

In this post I will show you how you could consume service created in previous blog post in a managed application?

Service is hosted at http://localhost:14892/api/Bloggers

To download JSON data from service as string you can use WebClient class from System.Net as below. In below code essentially we are downloading JSON data as string from the service.

using System;
using System.Net;

namespace ConsoleApplication39
{
class Program
{
static void Main(string[] args)
{
using(WebClient proxy = new WebClient())
{
var response = proxy.DownloadString("http://localhost:14892/api/Bloggers");
Console.WriteLine(response);
Console.ReadKey(true);

}
}
}
}

As output you will get downloaded string on console

In above code while making call to service; we are not providing any header type and as response we are getting JSON since default serealizer of ASP.NET Web API is JSON serealizer. If you want to get XML data as response then you need to set Accept Header type to XML. Below code will download XML data from the service.

using System;
using System.Net;

namespace ConsoleApplication39
{
class Program
{
static void Main(string[] args)
{
using(WebClient proxy = new WebClient())
{
proxy.Headers.Add(HttpRequestHeader.Accept, "application/xml");
var response = proxy.DownloadString("http://localhost:14892/api/Bloggers");
Console.WriteLine(response);
Console.ReadKey(true);

}
}
}
}

On Console you will get expected XML as below,

Other than WebClient class, you can use HttpClient class. It is rich Http Client for .NET. It exposed the API to

1. Receive HttpResponseMessage
2. Send HttpRequestMessage

To work with HttpClient class you need to add below DLL in the project. You can download these dll from here

You can download data as JSON array using HttpClient as below. We are downloading data asynchronously and using properties name printing them.

using System;
using System.Net.Http;
using System.Json;

namespace ConsoleApplication39
{
class Program
{
static void Main(string[] args)
{

HttpClient proxy = new HttpClient();
proxy.GetAsync("http://localhost:14892/api/Bloggers").ContinueWith((r) =>
{
HttpResponseMessage response = r.Result;
response.Content.ReadAsAsync<JsonArray>().ContinueWith(
(a)=>
{
foreach(var w in a.Result)
{
Console.WriteLine(w.ValueOrDefault("Name").ToString());
Console.WriteLine(w.ValueOrDefault("Intrest").ToString());
}
});

});

Console.ReadKey(true);

}

}
}

You will be getting output on console as below.

Now question may come to your mind that why to use HttpClient over WebClient? You can use same instance of HttpClient to make as many call to service as you want. HttpClient allows you to configure headers extension etc.

In this way you can consume an Http Service created using ASP.Net Web API in a managed client. I hope this post is useful. Thanks for reading.

To work with ASP.NET Web API, you need to install ASP.NET MVC 4.0. Download ASP.NET Web API from here and install it from Web Installer.

After installation create a new project choosing ASP.NET MVC 4 Web Application as project type.

Next choose Web API as template.

On examining project structure you will find it is exactly as usual ASP.NET MVC project structure. Let us go ahead and add a MODEL. For that right click on the Model folder and add a class. Let us add a model called Blogger

Blogger.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace firstwebapiapplication.Models
{
public class Blogger
{
public int Id { get; set; }
public string Name { get; set; }
public string Intrest { get; set; }
}
}

After adding Model let us go ahead and add Controller. There are two differences between Controller of usual ASP.NET MVC Controller and ASP.NET Web API Controller.

• ASP.NET Web API Controller returns data not view
• ASP.NET Web API Controller is derived from ApiController class.

Now go ahead and add a Controller called BloggerController. For that right click on Controller folder and add a controller.

Choose Empty Controller as Scaffolding options.

Next you need to change the class controller is inheriting. Change Controller to ApiController.

Controller class needs to inherit ApiController class from System.Web.Http namespace. Let us add a function to return information about Bloggers.

BloggerController.cs

using System.Collections.Generic;
using firstwebapiapplication.Models;
using System.Web.Http;

namespace firstwebapiapplication.Controllers
{
public class BloggersController : ApiController
{
//
// GET: /Bloggers/



public IEnumerable<Blogger> GetAllBloggers()
{
return new List<Blogger>
{
new Blogger(){ Id= 1,Name="DebugMode",Intrest="ASP.NET Web API"},
new Blogger(){ Id= 2,Name="KodefuGuru",Intrest ="C Sharp"},
new Blogger(){ Id= 3,Name="ActiveNick",Intrest = "Windows Phone" },
new Blogger(){ Id= 4,Name= "GBLOCK ", Intrest ="REST"},
new Blogger(){ Id= 5,Name = "WadeWegner",Intrest = "Windows Azure " }
};
}

}
}

By this point you have created HTTP Service. Press F5 to host the service on Cassini server.

And you will get a file to download

Next we can consume it in any client. In later post I will show you to consume in JavaScript client and Windows Phone as well. I hope this introductory blog post is useful to get started with ASP.NET Web API. In next post we will get into consuming ASP.NET WEB API Services in various clients

In this tutorial, We will fetch data from SQL Server database using LINQ and display that data in Silver Light, while we are following ASP.Net MVC Framework

Step 1
Create a Silver Light application.
File -> New -> Project -> Silver Light

Step 2
To hosting SILVERLIGHT application there are three options available for hosting a Silver Light application. Select ASP.Net MVC Web project. Then after, Select option NO for creating UNIT Test Project.
Step 3

Right click on Controller. Click on Add-> New Item and select add LINQ to SQL classes. Give a name.
Step 4

Here, I have already created a TEST data base in my database. I am going to display data from this database.

1. Open Server Explorer
2. Right click on Data Connection
3. Click Add New Data Connection.
   

Now give a Server name and select database to connect
Expand test.dbo. Here there are 2 tables in Test database. One is Test_Details and other is testsample. In this tutorial, I am going to display data from Test_Detatils table. So select this table from Server explorer and drag it on Test.dbml page. Now if you click on Test.Dbml.CS file. You will find code has been created for you.Up to this step, Linq class has been created.

Step 5

We will add here one more action called List inside Home Controller. Purpose of this action is to fetch out all records of Test_Details table and return List of records as JSON. Add following code in Home Controller class. Don’t forget to include at the top of HomeController.cs .

The above action List is returning JSON of all the records fetch from Test_Dtails table of Test Database.So now the complete code of HomeController.cs will look like,
HomeController.cs

 Step 6
Now click on View -> Home -> Right Click -> Add -> View.Give name of the View exactly of action name. Here action name is List so name of view will be List. Leave other things as default and click on Add. It will create a List.aspx page.

List.aspx will have following code. 

 Remove
<h2>List</h2>
And add below code

 Here at value property of source, name is SilverLightMvcTest.xap . Here make sure you are giving the name, which name you gave to your SilverLight Project at Step 1

So now complete code for List.aspx would be

List.aspx

 Step 8

Page.Xaml.cs

 Step 9
Right click on SilverLight Project and add new class . Give it name Test_Details.Add following code in Test_Details.cs

Test_Details.cs

 Make sure here property name and return type is exactly same of the column name and types in table of database.

Step 10

1. Run your application, by clicking F5.
   
2. Below screen will come
   
3. Click on address bar and type
   

    http://localhost:2675/home/list
   Copy this URL.
   

Step 11

1. Add a reference to System.RunTime.Serilization and System.ServiceModel.Web to SilverLight Project.
   
2. Include namespace
   

   using System.Runtime.Serialization.Json to Page.Xaml.Cs
   

    Page.Xaml.CS
    

Run the application.

The Final Output would be something like below.

Creating the Resource folder for Image

1. Create an ASP.Net MVC application, by New->Project->Web->ASP.Net MVC Application.
   
2. Now add a folder in application and give it name as Images.
   

1. Add few images in Images folder. For that right click on Image folder and add existing items.
   

1. After adding Images in Images folder. Folder will look like below.
   

1. Add an XML file in Image directory as source of the images. Give any name, here name is ImageMetaData.xml. To add XML file in Images directory, right click on directory and add XML File as shown below.
   

1. Create XML elements for images. Here filename and description are xml elements. Give value according to name of your added images. For my Images the xml file is as below.
   

<?xmlversion=“1.0“encoding=“utf-8“ ?><images><image>

<filename>anthonyrobins.jpg</filename>

<description>Anthony Robbins</description></image>

<image>

<filename>chetanbhagat.jpg</filename>

<description>Chetan Bhagat</description>

</image>

<image>

<filename>deepak.jpg</filename>

<description>Deepak Chopra</description>

</image>

<image>

<filename>robinsharma.jpg</filename>

<description>Robin Sharama</description>

</image>

<image>

<filename>stevenkovey.jpg</filename>

<description>Steven Covey</description>

</image>

<image>

<filename>taslima.jpg</filename>

<description>Taslima Nasrren</description>

</image>

<image>

<filename>vikarm.jpg</filename>

<description>Vikram Seth</description>

</image>

</images> 

Displaying Images

Creating the Model

Right click on Model folder and add new class. Give name of the class as Image.

 Type the below code inside the Image class. This class is acting as a business class. This class got two properties . One for Path of the image and other for Description of the image.

Image.cs

 using System;

using System.Collections.Generic;
using System.Linq;

using System.Web;

 namespace ImageViewer.Models
{
public class Image
{
public Image(string path, string desc)
{
Path = path;
Description = d}
public string Path { get; set; }
public string Description { get; set;}
}
}
We need to fetch data from the disk. For this, we will add one more model class and in constructor of that class, we will fetch all the images from xml file. So add one class in Model folder as shown in step above. Give name ImageModel.

ImageModel.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Xml.Linq;

namespace ImageViewer.Models

{

public
class
ImageModel:List<Image>

{

public ImageModel()

{

string directoryOfImage = HttpContext.Current.Server.MapPath(“~/Images/”);

XDocument imageData = XDocument.Load(directoryOfImage + @”/ImageMetaData.xml”);

var images = from image in imageData.Descendants(“image”) select
new
Image(image.Element(“filename”).Value, image.Element(“description”).Value);

this.AddRange(images.ToList<Image>());

}

}

}

Creating the Controller

Right Click on Controller and add a controller called ImageController.

Type or paste below code inside ImageController class. This class got an action, which is returning View with instance of ImageModel in View dictionary.

Controller\ImageController.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Web.Mvc.Ajax;

using ImageViewer.Models;

namespace ImageViewer.Controllers

{

public
class
ImageController : Controller

{

//

// GET: /Image/

public
ActionResult Index()

{

return View(new
ImageModel());

}

}

}

Creating the View
Right click on View folder and add new View. Name of the View must be Index because controller name is here Index.

1. Again right click on Image Folder in View and add a class. Give name of the class as Index.cs.
   
2. Make this class as a partial class.
   
3. Add reference
   

   using ImageViewer.Models;
   

4. Inherit ViewPage<> in this partial class.
   
5. Pass model class as parameter of ViewPage<ImageModel>
   

    

View/Image/Index.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using ImageViewer.Models;

namespace ImageViewer.Views.Image

{

public
partial
class
Index : ViewPage<ImageModel>

{

}

}

1. Open Index.aspx
   
2. Set code behind file as
   

   CodeBehind=”~/Views/Image/Index.cs”
   

3. Here we will fetch all the images from ViewData dictionary.
   

    

View/Image/Index.aspx

<%@
Page
Title=”"
Language=”C#”
MasterPageFile=”~/Views/Shared/Site.Master”
Inherits=”ImageViewer.Views.Image.Index”
CodeBehind=”~/Views/Image/Index.cs”
%>

<asp:Content
ID=”Content1″
ContentPlaceHolderID=”TitleContent”
runat=”server”>

    Index

</asp:Content>

<asp:Content
ID=”Content2″
ContentPlaceHolderID=”MainContent”
runat=”server”>

<%
foreach (var image in ViewData.Model) { %>

<span
class=”image”>

<a
href=”images/<%= image.Path %>“>

<img
src=”images/<%= image.Path %>“
height=”100″
width=”100″
/></a>

<span
class=”description”><%= image.Description %></span>

</span>

<% }%>

</asp:Content>

Adding Link to navigate Image from Home page

1. Click on View/Shared/site.Master
   
2. Add below Action Link
   

   <li><%=Html.ActionLink(“Images”,“Index”,“Image”) %></li>
   

   So, now three action links would be there in master page
   

<ul
id=”menu”>

<li><%= Html.ActionLink(“Home”, “Index”, “Home”)%></li>

<li><%= Html.ActionLink(“About”, “About”, “Home”)%></li>

<li><%=Html.ActionLink(“Images”,“Index”,“Image”) %></li>

</ul>

Press F5 to run with debugging

Click on Image tab to get Images.

Adding Image

Amending the Model

Go to ImageModel class and add below method, which will add image in Images folder and its entry in XML file.

public
void Add(Image image, HttpPostedFileBase filebase)

{

string imagerep = HttpContext.Current.Server.MapPath(“~/Images/”);

filebase.SaveAs(imagerep + image.Path);

this.Add(image);

XElement xml = new
XElement(“images”, from i in
this

orderby image.Path

select
new
XElement(“image”,

new
XElement(“filename”, i.Path),

new
XElement(“description”, i.Description))

);

XDocument doc = new
XDocument(xml);

doc.Save(imagerep + “/ImageMetaData.xml”);

}

So, now the ImageModel class is been modified to

Models\ImageModel.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Xml.Linq;

namespace ImageViewer.Models

{

public
class
ImageModel:List<Image>

{

public ImageModel()

{

string directoryOfImage = HttpContext.Current.Server.MapPath(“~/Images/”);

XDocument imageData = XDocument.Load(directoryOfImage + @”/ImageMetaData.xml”);

var images = from image in imageData.Descendants(“image”) select
new
Image(image.Element(“filename”).Value, image.Element(“description”).Value);

this.AddRange(images.ToList<Image>());

}

public
void Add(Image image, HttpPostedFileBase filebase)

{

string imagerep = HttpContext.Current.Server.MapPath(“~/Images/”);

filebase.SaveAs(imagerep + image.Path);

this.Add(image);

XElement xml = new
XElement(“images”, from i in
this

orderby image.Path

select
new
XElement(“image”,

new
XElement(“filename”, i.Path),

new
XElement(“description”, i.Description))

);

XDocument doc = new
XDocument(xml);

doc.Save(imagerep + “/ImageMetaData.xml”);

}

}

}

Amending the Controller

In ImageController add actions which will perform task of adding the image into the resource. For that add below actions called Add and Save in Image Controller.

So, now Image Controller would look like below. Both Add and Save actions are highlighted in different colors.

 using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Web.Mvc.Ajax;

using ImageViewer.Models;

namespace ImageViewer.Controllers

{

public
class
ImageController : Controller

{

//

// GET: /Image/

public ActionResult Index()

{

return View(new ImageModel());

}

public
ActionResult Add()

{

return View();

}

[AcceptVerbs(HttpVerbs.Post)]

public
ActionResult Save()

{

foreach (string name in Request.Files)

{

var file = Request.Files[name];

string fileName = System.IO.Path.GetFileName(file.FileName);

Image image = new
Image(fileName, Request["description"]);

ImageModel model = new
ImageModel();

model.Add(image, file);

}

return RedirectToAction(“index”);

}

}

}

 Creating the View

Right click on View folder and add new View. Name of the View must be Index because controller name is here Add.

1. Again right click on Image Folder in View and add a class. Give name of the class as Add.cs.
   
2. Make this class as a partial class.
   
3. Add reference
   

   using ImageViewer.Models;
   

4. Inherit ViewPage<> in this partial class.
   
5. Pass model class as parameter of ViewPage<ImageModel>
   

    

View/Image/Add.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using ImageViewer.Models;

namespace ImageViewer.Views.Image

{

public
partial
class
Add: ViewPage<ImageModel>

{

}

}

1. Open Add.aspx
   
2. Set code behind file as
   

   CodeBehind=”~/Views/Image/Add.cs”
   

3. Type the below code in Add.aspx
   

    

View/Image/Add.aspx

<%@
Page
Title=”"
Language=”C#”
MasterPageFile=”~/Views/Shared/Site.Master”
Inherits=”System.Web.Mvc.ViewPage”
CodeBehind=”~/Views/Image/Add.cs”
%>

<asp:Content
ID=”Content1″
ContentPlaceHolderID=”MainContent”
runat=”server”>

    Add

    <form
method=”post”
action=”<%=Url.Action(“Save”) %>“
enctype=”multipart/form-data”>

<input
type=”file”
name=”file”
/>

<input
type=”submit”
value=”submit”
/>
<br
/>

<input
type=”text”
name=”description”
/>

</form>

</asp:Content>

Amending Views\Index.aspx

Add below ActionLink in index.aspx.

<p><%= Html.ActionLink(“Add your own image”, “Add”, “Image”)%></p>

So, Now modified Index.aspx will look like below,

<%@
Page
Title=”"
Language=”C#”
MasterPageFile=”~/Views/Shared/Site.Master”
Inherits=”ImageViewer.Views.Image.Index”
CodeBehind=”~/Views/Image/Index.cs”
%>

<asp:Content
ID=”Content1″
ContentPlaceHolderID=”TitleContent”
runat=”server”>

    Index

</asp:Content>

<asp:Content
ID=”Content2″
ContentPlaceHolderID=”MainContent”
runat=”server”>

<%
foreach (var image in ViewData.Model) { %>

<span
class=”image”>

<a
href=”images/<%= image.Path %>“>

<img
src=”images/<%= image.Path %>“
height=”100″
width=”100″
/></a>

<span
class=”description”><%= image.Description %></span>

</span>

<% }%>

<p><%= Html.ActionLink(“Add your own image”, “Add”, “Image”)%></p>

</asp:Content>

Press F5 to run the application

Click on Add your own image to add new Image. Browse the Image, give a description and click on submit button.

This article will explain step by step that how to inject dependency using UNITY framework in ASP.Net MVC Application

Step 1

Create a MVC application

Step 2

Add Unity references to the MVC application.

Step 3

Idea here is to create a custom controller factory. This custom controller factory will create the controller and inject the dependencies in that. Add a class to the project. Feel free to give any name; here name of the class is CustomUnityControllerFactory.

Extend this CustomUnityControllerFactory class from DefaultControllerFactory class.

Create reference of IUnityContainer. Don’t forget to add include namespace Unity.

Create the constructor for CustomUnityControllerFactory and pass reference of Unity Container in that.

Override GetControllerInstance of DefaultControllerFactory. Here we will pass type of the controller , which we are going to create. In parameter of overrideen function we are passing type of the controller to be instanciated.

So the complete CustomUnityControllerFactory class will look like below.

CustomUnityControllerFactory.cs

Step 4:

 Now we need to do something at start up of the application. For that open Global. asax file. We need to modify Application.Start() method.

1. Create instance of IUnityContainer.
   
2. Create instance of CustomUnityControllerFactory and pass instance of unity container in that.
   
3. Set the CustomUnityControllerFactory as the default controller factory to be used. For this call Current method on ControllerBuilder and pass instance of CustomUnityControllerFactory in that. (see below code in blue)
   

1. Compile the application.
   

Step 5

Now it is time to check that, how Custom Unity Container Factory is working. To test that, we will create a service interface and concrete service class in Model.

1. Right click on Model and add an interface

   

   Interface contains the below code.

1. Right click on Model and add a class and implement the Message() method.
   

    

   Class contains the below code
   

                                                                                                                                                                                           
   

Step 6

Go to Application_Start() and register the type 

So, now the complete code at Application Start () will look like

 Step 7
Now put a breakpoint at constructor of HomeController and run the application. We could see while debugging that dependency has been injected.

Now, you can see that dependency has been injected. Now normal routing will process. For Routing and other details of MVP read my articles here.

Conclusion:

 I showed how to inject dependency using Unity in MVC application.