Google Spell Checker Api Asp.Net C#


In this article you will learn how to use the Google Spell Checker API in Asp.Net C# apps

Download the complete source code from here

The API is very simple,  spell checking is done through a XML http post to the following url

https://www.google.com/tbproxy/spell?lang=en:

Request XML structure

<?xml version=”1.0encoding=”utf-8?>
<spellrequest textalreadyclipped=”0ignoredups=”0ignoredigits=”1ignoreallcaps=”1>
<text>Hotal</text>
</spellrequest
>

The folloing are the Response XML from Google API

<?xml version=”1.0encoding=”UTF-8?>
<spellresult error=”0clipped=”0charschecked=”12>
<c o=”0l=”5s=”0″>
Hotel Hotly Total Ital Hots</c>
<
/spellresult
>

Tag Description
o The offset from the start of the text of the word
l Length of misspelled word
s Confidence of the suggestion
text Tab delimited list of suggestions

See the complete code here

using System;
using System.Net;
using System.Text;
using System.Text.RegularExpressions;

public static class SpellChecker
{
 public static String DidYouMean(string word)
 {
 string retValue = string.Empty;
 try
 {
 string uri = "https://www.google.com/tbproxy/spell?lang=en:";
 using (WebClient webclient = new WebClient())
 {
 string postData = string.Format("<?xml version=\"1.0\" encoding=\"utf-8\" ?><spellrequest textalreadyclipped=\"0\" ignoredups=\"0\" ignoredigits=\"1\" "
 + "ignoreallcaps=\"1\"><text>{0}</text></spellrequest>",word);

 webclient.Headers.Add("Content-Type", "application/x-www-form-urlencoded");
 byte[] bytes = Encoding.ASCII.GetBytes(postData);
 byte[] response = webclient.UploadData(uri, "POST", bytes);
 string data = Encoding.ASCII.GetString(response);
 if (data != string.Empty)
 {
    retValue = Regex.Replace(data, @"<(.|\n)*?>", string.Empty).Split('\t')[0];
 }
 }
 }
 catch (Exception exp)
 {

 }
 return retValue;
 }
 }

protected void Page_Load(object sender, EventArgs e)
{
    string word = SpellChecker.DidYouMean("Hotal");
    if(word != string.Empty)
    {
         labMessage.Text = "<font style='font-size:12px;color:red;'>Did you mean </font><b>" + retValue + "</b>";
    }
}

You can Download the complete source code from here

Hope this help and If you have any comments, please feel free to write your feedback.

Thanks
Deepu

Asp.Net 4.0 URL Routing


It’s been  really easy  in Asp.Net 4.0 for building SEO friendly URL applications with VS 2010. In one my previous article I have explained how we can achieve the same in Asp.Net 3.5  (check it out).  In Asp.Net 3.5 we need to implement the IRouteHandler interface in custom route handler class and bla bla….but now in Asp.Net 4.0 we do not need all extra code.  I am following the same example in my previous article here.  In the Global.asax file I am registering the routes some thing like below

You can download the entire article from here

Global.asax file Configuration

Add Import directive to Import System.Web.Routing name space

<%@ Import Namespace=”System.Web.Routing” %>

void RegisterRoutes(RouteCollection routes)
 {
 routes.MapPageRoute(
 "member-list",
 "member/{name}",
 "~/member-list.aspx"
 );
 }

 void Application_Start(object sender, EventArgs e)
 {
RegisterRoutes(RouteTable.Routes);
}

The first parameter member/{name} which denote the url structure, here the url which starts /member/{name} (ex : /member/deepu/) will point physically to the following path ~/member/member-list.aspx

Create a aspx page called default.aspx

This page will have a list of Members in Tabular format. I am going to use asp.net List view control to achieve this.

<asp:ListView ID=”lvUserList” runat=”server”>
<LayoutTemplate>
<table width=”50%” style=”background-color: lightgrey;” cellpadding=”2″ cellspacing=”1″
border=”0″>
<tr style=”background-color: white”>
<td width=”100″ align=”center”>
Member ID
</td>
<td align=”center”>
Name
</td>
<td width=”75″ align=”center”>
Blog
</td>
<td width=”50″>
</td>
</tr>
<asp:PlaceHolder ID=”itemPlaceholder” runat=”server” />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr style=”background-color: white”>
<td align=”center”>
<asp:Label ID=”lab” Text='<%# DataBinder.Eval(Container.DataItem, “MemberID”)%>’
runat=”server” />
</td>
<td>
<asp:Label ID=”Label1″ Text='<%# DataBinder.Eval(Container.DataItem, “Name”)%>’ runat=”server” />
</td>
<td align=”center”>
<a target=”_blank” href='<%# DataBinder.Eval(Container.DataItem, “BlogURL”)%>’>Blog</a>
</td>
<td align=”center”>
<a href=”<%= ResolveUrl(“~/member/”)%><%# DataBinder.Eval(Container.DataItem, “Name”)%>”>
Detail</a>
</td>
</tr>
</ItemTemplate>
<ItemSeparatorTemplate>
<br />
</ItemSeparatorTemplate>
</asp:ListView>

Default.aspx.cs code behind

public partial class Memeber
{
 public int MemberID { get; set; }
 public string Name { get; set; }
 public string BlogURL { get; set; }
}


public partial class _Default : System.Web.UI.Page
{
 protected void Page_Load(object sender, EventArgs e)
 {
 if (!IsPostBack)
 {
 BindUsers();
 }
 }

 void BindUsers()
 {
 var items = new List<Memeber>()
 {
 new Memeber {MemberID = 1,Name = "Deepu", BlogURL = "https://deepumi.wordpress.com"},
 new Memeber {MemberID = 2,Name = "Scott", BlogURL = "http://weblogs.asp.net/scottgu/"},
 new Memeber {MemberID = 3,Name = "Joe", BlogURL = "http://misfitgeek.com"},
 };


 lvUserList.DataSource = items.ToList();
 lvUserList.DataBind();
 }
}

We have completed the listing page. The next page will be the detail page which will be rendering the member name for the URL routing.

Member-List.aspx Page

<asp:Content ID=”BodyContent” runat=”server” ContentPlaceHolderID=”MainContent”>
Member Name : <asp:Label ID=”labMemberName” runat=”server” />
</asp:Content>

Member-List.aspx code behind Page

var name = Page.RouteData.Values["name"];
 if (name != null)
 {
 Page.Title = name.ToString();
 labMemberName.Text = name.ToString();
 }

You can download the entire article from here

Hope this help and If you have any comments, please feel free to write your feedback.

Thanks
Deepu

Simple Image Scroller Slide Show using Silverlight ListBox control


Last week I was working on a image scroll-er slide show using silverlight listbox control and it worked great and I thought I’d  share this.

Click here to view the live demo (images may take a while to load)
Click here to download the article

If you find the Image Scroller code library useful, please consider donating

Xaml C# Code

public class ImageScroller
 {
 public string Url { get; set; }
 }

 public partial class ImageGallery : UserControl
 {
 int index = 0;

 void StartSlideShow()
 {
 DispatcherTimer timer = new DispatcherTimer();
 timer.Interval = TimeSpan.FromMilliseconds(2500); //delayed for 2.5 seconds
 timer.Tick += (sender, e) =>
 {
 lbScrollGallery.ScrollIntoView(lbScrollGallery.Items[index]); //scroll to the current item
 lbScrollGallery.SelectedIndex = index; //highlight the selected item in the list box scroller
 ImageScroller item = (ImageScroller)lbScrollGallery.Items[index]; // getting the current item
 imgPreview.Source = new BitmapImage(new Uri(item.Url, UriKind.Relative));
 if (index < lbScrollGallery.Items.Count - 1)
 {
 index++;
 }
 else
 {
 lbScrollGallery.ScrollIntoView(lbScrollGallery.Items[0]); //scroll to the first item
 index = 0; //reset the index when it reaches to the last item
 }
 };
 timer.Start();
 }

 public ImageGallery()
 {
 InitializeComponent();
 LoadImages();
 StartSlideShow();
 }

 void LoadImages()
 {
 lbScrollGallery.ItemsSource = new List<ImageScroller>
 {
 new ImageScroller
 {
 Url = "images/Chrysanthemum.jpg"
 },
 new ImageScroller
 {
 Url = "images/Desert.jpg"
 },
 new ImageScroller
 {
 Url = "images/Hydrangeas.jpg"
 },
 new ImageScroller
 {
 Url = "images/Jellyfish.jpg"
 },
 new ImageScroller
 {
 Url = "images/Koala.jpg"
 },
 new ImageScroller
 {
 Url = "images/Lighthouse.jpg"
 },
 new ImageScroller
 {
 Url = "images/Penguins.jpg"
 },
 new ImageScroller
 {
 Url = "images/Tulips.jpg"
 }
 };

 imgPreview.Source = new BitmapImage(new Uri("images/Chrysanthemum.jpg", UriKind.Relative)); //load default image while page loads
 }

 void ScrollerSelectionChanged(object sender, SelectionChangedEventArgs e)
 {
 ListBox listbox = (ListBox)sender;
 ImageScroller item = (ImageScroller)listbox.SelectedItem;
 if(item != null && ! string.IsNullOrEmpty(item.Url))
 {
 imgPreview.Source = new BitmapImage(new Uri(item.Url, UriKind.Relative));
 index = listbox.SelectedIndex;
 lbScrollGallery.ScrollIntoView(lbScrollGallery.Items[index]);
 }
 }
 }

Hope this help and If you have any comments, please feel free to write your feedback.

Click here to view the live demo (images may take a while to load)

You can download the entire article from here

If you find the Image Scroller code library useful, please consider donating

Thanks
Deepu

Loading User Controls Dynamically in Silverlight


When you develop Silverlight web sites you may need to change the content that’s shown in the Silverlight page programmatically, normally changing the layout controls or child controls etc..

In the above image you can see three navigation button’s and when you press each button the content will load dynamically from each separate user control XAML file (shown right side of the image) and render the content inside the canvas.

The below few lines of code which loads the control loading  dynamically and render in to the canvas control

 Type type = this.GetType();
 Assembly assembly = type.Assembly;
 UserControl newPage = (UserControl)assembly.CreateInstance(type.Namespace + "." + "ControlName"); //replace with your user control class name
 canvasBody.Children.Clear();
 canvasBody.Children.Add(newPage);

In the each  button control I am setting the datacontext attribute value as the User Control Class Name ie DataContext=”HomeControl”

XAML Markup

<Canvas Grid.Row="0" Grid.Column="0" Background="Black">
<Button Width="100" DataContext="HomeControl" Canvas.Top="50" Click="Navigation_Click" Canvas.Left="25" Content="Home"/>
<Button Width="100" DataContext="AboutControl" Canvas.Top="50" Click="Navigation_Click" Canvas.Left="140" Content="About"/>
<Button Width="100" DataContext="ContactControl" Canvas.Top="50" Click="Navigation_Click" Canvas.Left="255" Content="Contact"/>
</Canvas>

<Canvas Name="canvasBody" Grid.Row="1"  Grid.Column="0" Background="Black" />

Code behind

 public DefaultPage()
 {
 InitializeComponent();
 RenderControl("HomeControl"); //load default control for home page.
 }

 private void Navigation_Click(object sender, RoutedEventArgs e)
 {
 Button btn = sender as Button;
 if (btn != null && btn.DataContext != null)
 {
     RenderControl(btn.DataContext.ToString());
 }
 }

 void RenderControl(string currentControl)
 {
 Type type = this.GetType();
 Assembly assembly = type.Assembly;
 UserControl newPage = (UserControl)assembly.CreateInstance(type.Namespace + "." + currentControl);
 canvasBody.Children.Clear();
 canvasBody.Children.Add(newPage);
 }

Hope this will help and If you have any comments, please feel free to write your feedback.

Thanks
Deepu

Multiple file uploading in Silverlight


In this article I am going to explain how we can upload multiple files in Silverlight 3.0 using OpenFileDialog class

Click here to download the article

Open VS 2008 and create a new Xaml file called MultiFileUploader.xaml. Copy paste the below markup.

<Canvas Width=”640″>

<TextBlock Canvas.Left=”300″ HorizontalAlignment=”Center” Canvas.Top=”150″ x:Name=”txtProgress”  Foreground=”Green” Width=”120″/>

<Button Canvas.Left=”300″ HorizontalAlignment=”Center” Canvas.Top=”180″ Click=”FileUpload_Click” Width=”100″ Height=”25″ Content=”Select Files”/>

</Canvas>

In above Xaml I have placed two controls ie Button and Textbox.  Button control for selecting files and Texbox control,
shows the total file count which is uploaded in the server.

Code behind for MultiFileUploader.xaml.cs

int totalFilesToUpload = 0;
int totalFilesUploaded = 0;

private void FileUpload_Click(object sender, RoutedEventArgs e)
 {
 this.txtProgress.Text = string.Empty;

 OpenFileDialog oFileDialog = new OpenFileDialog();
 oFileDialog.Filter = "All Image Files ( JPEG,GIF,BMP,PNG)|*.jpg;*.jpeg;*.gif;*.bmp;*.png|JPEG Files ( *.jpg;*.jpeg )|*.jpg;*.jpeg|GIF Files ( *.gif )|*.gif|BMP Files ( *.bmp )|*.bmp|PNG Files ( *.png )|*.png";
 oFileDialog.FilterIndex = 1;
 oFileDialog.Multiselect = true;

 string data = string.Empty;

 if (oFileDialog.ShowDialog() == true)
 {
 foreach (var file in oFileDialog.Files)
 {
 using (System.IO.Stream fileStream = GetFileData(file.OpenRead()))
 {
 StreamResourceInfo oStreamResource = new StreamResourceInfo(fileStream, null);

 byte[] array = new byte[oStreamResource.Stream.Length];

 oStreamResource.Stream.Read(array, 0, (int)oStreamResource.Stream.Length);

 data = Convert.ToBase64String(array);

 WebClient oWebClient = new WebClient();

 string fileName = Guid.NewGuid().ToString().Replace("-", "") + file.Extension;

 oWebClient.UploadStringAsync(new Uri("http://localhost:50848/FileUpload.ashx?file=" + fileName), null, data, fileName);

 oWebClient.UploadProgressChanged += new UploadProgressChangedEventHandler(oWebClient_UploadtxtProgressChanged);

 totalFilesToUpload += 1;

 data = string.Empty;
 }
 }
 }

 }

 System.IO.MemoryStream GetFileData(System.IO.Stream oFileStream)
 {
 oFileStream.Seek(0, System.IO.SeekOrigin.Begin);
 byte[] data = new byte[oFileStream.Length];
 oFileStream.Read(data, 0, (int)oFileStream.Length);
 return new System.IO.MemoryStream(data);
 }

 void oWebClient_UploadtxtProgressChanged(object sender, UploadProgressChangedEventArgs e)
 {
 totalFilesUploaded += 1;

 txtProgress.Text = !string.IsNullOrEmpty(txtProgress.Text) ? (int.Parse(txtProgress.Text) + e.BytesSent).ToString() : e.BytesSent.ToString();

 if (totalFilesUploaded == totalFilesToUpload)
 {
 txtProgress.Text = totalFilesUploaded + " files uploaded successfully (" +  txtProgress.Text + " bytes sent )";
 }
 }

The next step I am going to create a receiver application which can convert the stream object to image file and save to server. I am creating a GenericHandler  file to achieve this task (You can do it in Aspx page also).

using System;
using System.Web;
using System.IO;

namespace SilverlightApplicationDemo.Web
{
    public class FileUpload : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            var fileName = context.Request["file"];
            string data;
            using (StreamReader sr = new StreamReader(context.Request.InputStream))
            {
                data = sr.ReadToEnd();
                byte[] array = Convert.FromBase64String(data);
                using (FileStream fs = new FileStream(context.Server.MapPath("~/images/") + fileName, FileMode.Create))
                {
                    fs.Write(array, 0, array.Length);
                }
            }

        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

Note :  I have hard-coded the FileUpload url as (http://localhost:50848/FileUpload.ashx). Don’t forget to replace with your file  upload URL.

Hope this help and If you have any comments, please feel free to write your feedback.

You can download the entire article from here

Thanks
Deepu

Google Map 3 with Multiple locations in Asp.Net C#


Google Map Version 3 API is especially designed to be faster and more applicable to mobile devices, as well as traditional desktop browser applications ….read more from google map api document.

Click here to download the article

If you find the Google Map 3 code library useful, please consider donating

(No more API registration key needed for Version 3.0)

In this article I am going to explain how we can show multiple locations binding from code behind dynamically (database or any data source).  Couple of moths ago in Asp.Net forum I have posted an article using Google Map Version 2.0
(http://forums.asp.net/p/1507845/3584193.aspx#3584193). Version two was kind of messy Java Script code but now in Version 3.0 Google made it very simple.

Create a ASPX page and copy paste the following markup code..

<html>
<head runat=”server”>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ />
<title>Google Map 3.0</title>
<style type=”text/css”>
.formatText{color:Green;font-size:11px;font-family:Arial;font-weight:bold;}
</style>
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false“></script>
<script type=”text/javascript”>
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(40.764015, -73.982797);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);

for (var i = 0; i < locationList.length; i++) {
var args = locationList[i].split(“,”);
var location = new google.maps.LatLng(args[0], args[1])
var marker = new google.maps.Marker({
position: location,
map: map
});
var j = i + 1;
marker.setTitle(message[i].replace(/(<([^>]+)>)/ig,””));
attachSecretMessage(marker, i);
}
}

function attachSecretMessage(marker, number) {
var infowindow = new google.maps.InfoWindow(
{ content: message[number],
size: new google.maps.Size(50, 50)
});
google.maps.event.addListener(marker, ‘click’, function() {
infowindow.open(map, marker);
});
}
</script>

</head>
<body style=”margin: 0px; padding: 0px;” onload=”initialize()”>
<form runat=”server”>
<div style=”padding-top: 10%;padding-left:20%”>
<div id=”map_canvas” style=”width: 50%; height: 50%”>
</div>
</div>
</form>
</body>
</html>

I have highlighted some of the lines from the above code

1)  The class formatText, simple css class for formating the info window text. You can replace your own css style here
.formatText{color:Green;font-size:11px;font-family:Arial;font-weight:bold;}

2) In the Java Script include statement I have mention sensor=false (because the sample app is targeting on web  page if you are using from Mobile application you should  set sensor=false. Read more about mobile app)

3) In the for loop I’ m using locationList.Length. Here locationList is Java Script array object which is getting generated from an Aspx code behind page and basically the locationList object has array of  Geo code information like Latitude and Longitude. In one my previous article I have explained how we can get the Geo-code location from an address using Yahoo API.

HTML out put

var locationList = new Array( ‘40.756012, -73.972614’ , ‘40.456012, -73.796087’ , ‘40.456012, -73.456807’ );

4) Splitting lattitude and longitude from the array object and assign it to Google function like below.

var args = locationList[i].split(“,”);

var location = new google.maps.LatLng(args[0], args[1])

5)   In marker we can able to set the title value and since I am using html tags and css class I’m replacing the html tags using the following syntax

marker.setTitle(message[i].replace(/(<([^>]+)>)/ig,””));

The rest of the mark up tags are same as mentioned in the Google doc.
So now we need to create the array from code behind. Copy paste the below code in to you code behind page load method
protected void Page_Load(object sender, EventArgs e)
 {
 List<String> oGeocodeList = new List<String>
 {
 " '40.756012, -73.972614' ",
 " '40.456012, -73.796087' ",
 " '40.456012, -73.456807' "
 };

 var geocodevalues = string.Join(",", oGeocodeList.ToArray());

 List<String> oMessageList = new List<String>
 {
 " '<span class=formatText >Google Map 3 Awesome !!!</span>' ",
 " '<span class=formatText>Made it very simple</span>' ",
 " '<span class=formatText>Google Rocks</span>' "
 };

 String message = string.Join(",", oMessageList.ToArray());

 ClientScript.RegisterArrayDeclaration("locationList", geocodevalues);

 ClientScript.RegisterArrayDeclaration("message", message);
 }

The above code List<String> oGeocodeList which creates a list of Geo-Code collection object. I have hard coded latitude and longitude (you can replace with your db procedure). Once you have created the list object we should convert in to Java Script array format like below

var geocodevalues = string.Join(“,”, oGeocodeList.ToArray()); and finally register the array

ClientScript.RegisterArrayDeclaration(“locationList”, geocodevalues); here locationList is the JS array object name.

Similarly I am creating the message array for the pop window (InfoWindow)

List oMessageList = new List
{
” ‘Google Map 3 Awesome !!!‘ “,
” ‘Made it very simple‘ “,
” ‘Google Rocks‘ ”
};

String message = string.Join(“,”, oMessageList.ToArray());   //convert list object to JS array format.

ClientScript.RegisterArrayDeclaration(“message“, message); //message = JS array object name.

Please refer the following links if you need to learn more about Map API 3.0

http://code.google.com/apis/maps/documentation/v3/introduction.html
http://code.google.com/apis/maps/documentation/v3/
http://code.google.com/apis/maps/documentation/v3/reference.html

Hope this help and If you have any comments, please feel free to write your feedback.

You can download the entire article from here or copy paste the URL

http://www.4shared.com/file/251039814/3e491cfc/GoogleMap3.html

If you find the Google Map 3 code library useful, please consider donating

Thanks
Deepu

Silverlight: Consume a web service in Silverlight


Silverlight application can talk to the server via web services like ASMX web services or WCF services or REST based services.  (for ex : file uploading to the server or sending emails etc.). In this article I am going to explain how to consume a web service in Silverlight. I am creating a simple contact form in Silverlight 3.0 (see the below image) which sends the contact information as email using ASMX web service. (You can download the entire article from here)

Open VS 2008 (SP 1.0) and create a new project called Contact Form (see the below image) which would be hosting the Silverlight application in a web application project.

Right click the web application project and add a new asmx file for web service (see the below image) and name it as EmailService.ASMX

Copy paste the below code inside the EmailService.asmx file

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Net.Mail;

namespace ContactForm.Web
{
 [WebService(Namespace = "http://tempuri.org/")]
 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
 [System.ComponentModel.ToolboxItem(false)]

 public class EmailService : System.Web.Services.WebService
 {
 [WebMethod]
 public bool SendMail(string fromAddress, string toAddress, string subject, string body)
 {
 try
 {
 MailMessage msg = new MailMessage();
 msg.From = new MailAddress(fromAddress);
 msg.To.Add(new MailAddress(toAddress));
 msg.Subject = subject;
 msg.Body = body;
 msg.IsBodyHtml = true;

 SmtpClient smtp = new SmtpClient("127.0.0.1"); //replace with your smtp client
 smtp.Send(msg);
 return true;
 }
 catch(Exception exp)
 {
 //log exception here..
 return false;
 }
 }
 }
}

So the next step is creating the contact form interface with xaml markup.

In the xaml page Usercontrol deceleration you may need to include the input control namespace some thing like below and aslo add the reference from the library.

<UserControl x:Class=”ContactForm.MainPage”
xmlns:my=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input”

Copy paste the xaml in to the MainPage.xaml page.

<UserControl x:Class=”ContactForm.MainPage”
xmlns:my=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;
xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243; xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243;
mc:Ignorable=”d” d:DesignWidth=”640″ d:DesignHeight=”480″>

<Grid x:Name=”LayoutRoot” Background=”White” Width=”500″>
<Grid x:Name=”contactGrid” Width=”500″>
<Grid.RowDefinitions>
<RowDefinition Height=”50″/>
<RowDefinition Height=”30″/>
<RowDefinition Height=”30″/>
<RowDefinition Height=”30″/>
<RowDefinition Height=”152″/>
<RowDefinition Height=”30″/>
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
<ColumnDefinition Width=”130″/>
<ColumnDefinition Width=”370″ />
</Grid.ColumnDefinitions>

<my:Label Grid.Column=”0″ FontFamily=”Arial” FontSize=”24″ HorizontalAlignment=”Left” Grid.ColumnSpan=”2″ Grid.Row=”0″ Content=”Contact Me”  />

<my:Label Grid.Column=”0″ HorizontalAlignment=”Right”   FontFamily=”Verdana” FontSize=”13″  Grid.Row=”1″ Content=”*Name : “/>
<TextBox Grid.Column=”1″ FontFamily=”Verdana” Width=”170″ Height=”25″ HorizontalAlignment=”Left” FontSize=”13″ Name=”txtName”  Grid.Row=”1″ Margin=”4,0,0,0″ />

<my:Label Grid.Column=”0″ HorizontalAlignment=”Right”   FontFamily=”Verdana” FontSize=”13″  Grid.Row=”2″ Content=”*Email : “/>
<TextBox Grid.Column=”1″ FontFamily=”Verdana” Width=”170″ Height=”25″ HorizontalAlignment=”Left” FontSize=”13″ Name=”txtEmail”  Grid.Row=”2″ Margin=”4,0,0,0″ />

<my:Label Grid.Column=”0″ HorizontalAlignment=”Right” FontFamily=”Verdana” FontSize=”13″  Grid.Row=”3″ Content=”Subject : “/>
<TextBox Grid.Column=”1″ FontFamily=”Verdana” Width=”170″ Height=”25″ HorizontalAlignment=”Left” FontSize=”13″ Name=”txtSubject”  Grid.Row=”3″ Margin=”4,0,0,0″ />

<my:Label Grid.Column=”0″ HorizontalAlignment=”Right” FontFamily=”Verdana” FontSize=”13″  Grid.Row=”4″ VerticalAlignment=”Top” Content=”*Message : “/>
<TextBox Grid.Column=”1″ FontFamily=”Verdana” Width=”350″ Height=”150″ HorizontalAlignment=”Left” VerticalAlignment=”Top” FontSize=”13″ Name=”txtMessage”  Grid.Row=”4″ Margin=”4,0,0,0″ />

<Button Grid.Column=”0″ Grid.ColumnSpan=”2″ HorizontalAlignment=”Center” Height=”25″ Grid.Row=”5″ Width=”75″ Content=”Send” Name=”btnSend” />

</Grid>
</Grid>
</UserControl>

So the next step is add reference to the web service in the silverlight app.Right click the Silverlight project and add a Service reference (see the below image)

Click the discover button in the image below and get the web service url (if you know the url you can copy paste directly).

In the codebehind page of the xaml file please paste the below code.


using System;
using System.Windows;
using System.Windows.Controls;
using ContactForm.EmailServiceReference;
using System.ServiceModel;
using System.Windows.Browser;

namespace ContactForm
{
 public partial class MainPage : UserControl
 {
 public MainPage()
 {
 InitializeComponent();

 btnSend.Click += new RoutedEventHandler(sendButton_Click);
 }

 private void sendButton_Click(object sender, RoutedEventArgs e)
 {
 if (txtName.Text.Length == 0 || txtEmail.Text.Length == 0 || txtMessage.Text.Length == 0)
 {
 MessageBox.Show("Required fields are missing");
 return;
 }
 string url = HtmlPage.Document.DocumentUri.ToString();

 url = url.Substring(0, url.LastIndexOf("/")) + "/EmailService.asmx";

 BasicHttpBinding bind = new BasicHttpBinding();

 EndpointAddress endpoint = new EndpointAddress(url);

 EmailServiceSoapClient emailService = new EmailServiceSoapClient(bind, endpoint);

 emailService.SendMailAsync(txtEmail.Text, "from@emailid.com", txtSubject.Text, txtMessage.Text);

 emailService.SendMailCompleted += new EventHandler<SendMailCompletedEventArgs>(emailService_Completed);
 }

 private void emailService_Completed(object sender, SendMailCompletedEventArgs e)
 {
 if (e.Result)
 {
 MessageBox.Show("You email has sent successfully");
 }
 else
 {
 MessageBox.Show("Sorry !!! unable to send email");
 }

 }
 }
}

Code Explanation

Once you have completed with add service reference you must include the following namespace in the MainPage.xaml.cs code behind

using ContactForm.EmailServiceReference;    (contact form web service namespace).

using System.ServiceModel; (system web service namespace).

using System.Windows.Browser; (Html Dom namespace).

In the page default constructor I am creating event handler for send button click.

btnSend.Click += new RoutedEventHandler(sendButton_Click);

BasicHttpBinding bind = new BasicHttpBinding();  // initializes http binding to configure endpoints that can communicate ASMX based web service.

EndpointAddress endpoint = new EndpointAddress(url); //provide a unique network address and you can replace with your web service url.

EmailServiceSoapClient emailService = new EmailServiceSoapClient(bind, endpoint);

emailService.SendMailAsync(txtEmail.Text, “from@email.com”, txtSubject.Text, txtMessage.Text); // sending email in Asynchronous method with the some simple parameter  to address, from address, subject and body of the email.

Once the web service method completed emailService_Completed method get fired

emailService.SendMailCompleted += new EventHandler<SendMailCompletedEventArgs>(emailService_Completed);

You can download the entire article from here or copy paste the URL

http://www.4shared.com/file/247655657/750739e9/ContactForm.html

Hope this help and If you have any comments, please feel free to write your feedback.

Thanks
Deepu