Lookup Tutorial from scratch (VS2008, VS2010)
For this tutorial you need to have VS2008 SP1 or VS 2010, (if you have VS2008 you can download the SP1 from here) and the Trial Version of ASP.net Awesome which you can download here
1. Create a Web Application in Visual Studio
File -> New Project -> ASP.NET Web Application
2. Create folder Content and Scripts ( if they dont exist already )
Right click on the WebApplication in Solution Explorer -> Add -> New Folder
3.Copy content and script files to respective folders
copy AwesomeWebForms.css and all the images to the Content Folder
copy AwesomeWebForms.js to Scripts Folder
4. Add references to jQuery, Awesome scripts and CSS
put this inside the <head> </head> tags in your Site.master or Default.aspx if there is no Site.master
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="<%=ResolveUrl("~/Content/AwesomeWebForms.css") %>" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/Scripts/AwesomeWebForms.js") %>"></script>
5. Add reference to Omu.AwesomeWebForms.dll
Right click on the WebApplication -> Add Reference -> Find and select Omu.AwesomeWebForms.dll
6. Add the "o" tagPrefix in web.config:
<system.web>
<pages>
<controls>
<add tagPrefix="o" namespace="Omu.AwesomeWebForms" assembly="Omu.AwesomeWebForms" />
...
</controls>
</pages>
</system.web>
7. Add an Ajax-Enabled WCF Service, name it Aja.svc
( if you rename it after you've created it your going to have to rename some words in the lines that were added in web.config)
Right click on the Web Application - Add New Item - Ajax Enabled WCF Service (this template is available in VS2008 SP1 or higher)
8. In Aja.svc.cs add this:
using Omu.AwesomeWebForms; using System.Collections.Generic;
for some test data add this class after the Aja class:
public class Fruit
{
public int Id { get; set; }
public string Name { get; set; }
}
and inside the Aja class add this field:
static readonly IList<Fruit> Fruits = new List<Fruit>
{
new Fruit{Id=1, Name = "Mango"},
new Fruit{Id=2, Name = "Apple"},
new Fruit{Id=3, Name = "Papaya"},
new Fruit{Id=4, Name = "Banana"},
new Fruit{Id=5, Name = "Cherry"}
};
and now add 2 methods inside the Aja class for our Lookup:
[WebGet]
[OperationContract]
public KeyContent FruitGet(string v)
{
var f = Fruits.Where(o => o.Id.ToString() == v).Single();
return new KeyContent(f.Id, f.Name);
}
[WebGet]
[OperationContract]
public LookupResult FruitSearch(string search)
{
var items = Fruits.Where(o => o.Name.Contains(search))
.Select(f => new KeyContent { Key = f.Id, Content = f.Name });
return new LookupResult
{
Items = items
};
}
9. In default.aspx, add this line:
<o:Lookup runat="server" GetUrl="~/Aja.svc/FruitGet" SearchUrl="~/Aja.svc/FruitSearch"/>
10. Run it F5 or Ctrl+F5
