Introduction
In this application, I create a meeting scheduler using which one can schedule a meeting and call other colleagues to attend the meeting. This application uses the WCF services to fetch and save records. I have also used Silverlight child window to get the saved contacts to send mail to them. Child window is used as popup for adding contacts in the scheduler forms. This application is very useful for all those to just started learning Silverlight and have confusion with the basics of its interaction with database only through WCF services or webservices.
Tools and Technologies Used to Develop this Application
- Visual Studio 2010
- C# 4.0
- Silverlight 4
- SQL Server 2008
- WCF Services
Step by Step Description of this Application
Create a new Silverlight application in Visual Studio 2010 File->New->Project -> select Silverlight in Visual C# -> select Silverlight Application. Rename it to Meetingschedule and click on ok. A popup window is prompted, click ok for that too.
You can see two projects in the solution explorer; one is the Silverlight project and another is the web project which is used to consume the Silverlight application.
Now our main purpose is to design the form in MainPage.xaml in Silverlight application. Below, you can see the XAML code for the form design, also how this design should be seen in the browser.
<!---->
Creating Child Window for Popup for Adding Contacts to the Main Page
Create a new folder in Silverlight project and name it view, then right click on it -> click on add ->New items-> select Silverlight child window and rename it popup and click on add.
Following is the XAML and design for the popup.xaml childwindow to show all the contacts from database. In this, a datagrid with all template columns is used to show all contacts and a checkbox (in header too) is used to check those records which should be included in the meeting.
All designing is completed for scheduling a meeting. Now our next task is to fetch records from the database and fill the datagrid in the child window. For this, we have used the WCF service because Silverlight does not support ADO.NET, so we cannot directly interact with the database.
Database Accessing with WCF Services and Consuming WCF Services in Silverlight Application
For adding a WCF service to the web project which consumes the Silverlight application, follow the steps given below.
Right click on web project whatever name you gave to it, in my case it is meetingSchedule.web, then a pop up window is opened. Click on Silverlight under Visual C# -> select Silverlight-enabled WCF Service. Then click on ok button. A WCF service is now added to your project which interacts with Silverlight.
You can write method to save records and fetch records from Silverlight application using this Service1.Svc WCF service. I have written two methods in it; one for filling datagrid in childwindow of Silverlight and the other is saved data from mainpage for scheduling the meeting, which is later used to send mail to all added contacts.
Following is the code in the WCF service to fill the Datagrid.
Add the following namespaces to WCF service:
using System.Data;
using System.Data.SqlClient;
using System.Web.Configuration;
using System.Collections.Generic;
namespace MeetingSchedule.Web
{
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode =
AspNetCompatibilityRequirementsMode.Allowed)]
public class Service1
{
[OperationContract]
public void DoWork()
{
return;
}
[DataContract]
public class contacts
{
[DataMember]
public string FName { get; set; }
[DataMember]
public string LName { get; set; }
[DataMember]
public string Address { get; set; }
[DataMember]
public string Email { get; set; }
}
[OperationContract]
public List<contacts> fetchContacts()
{
List<contacts> allContact= new List<contacts>();
SqlConnection con = new SqlConnection();
con.ConnectionString =
WebConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
SqlCommand cmd = new SqlCommand();
cmd.Connection = con;
cmd.CommandText = "select FirstName,LastName,Address,Email from Contact";
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
var contacts = new contacts
{
FName = dt.Rows[i]["FirstName"].ToString(),
LName = dt.Rows[i]["LastName"].ToString(),
Address = dt.Rows[i]["Address"].ToString(),
Email = dt.Rows[i]["Email"].ToString()
};
allContact.Add(contacts);
}
}
return allContact;
}
Following is the code to save the meeting schedule data from Silverlight using WCF service to database:
[OperationContract]
public string saveSchedule(string agenda, string location,
DateTime StartTime, DateTime EndTime, string contacts, string details)
{
SqlConnection con = new SqlConnection();
con.ConnectionString = WebConfigurationManager.ConnectionStrings
["ConnectionString"].ConnectionString;
SqlCommand cmd = new SqlCommand();
con.Open();
cmd.Connection = con;
cmd.CommandText = "insert into Meeting values
(@Title,@Location,@StartTime,@EndTime,@Contact,@Details,@CreatedDate)";
cmd.Parameters.AddWithValue("@Title", agenda);
cmd.Parameters.AddWithValue("@Location", location);
cmd.Parameters.AddWithValue("@StartTime", StartTime);
cmd.Parameters.AddWithValue("@EndTime", EndTime);
cmd.Parameters.AddWithValue("@Contact", contacts);
cmd.Parameters.AddWithValue("@Details", details);
cmd.Parameters.AddWithValue("@CreatedDate", System.DateTime.Now);
cmd.ExecuteNonQuery();
return "Record is saved successfully,
Thanks for submitting schedule for meeting.";
}
How to Consume this WCF Service in our Silverlight Application
Adding service reference: Right click on Silverlight project and click on add service reference->Click on Discover, this will discover all the WCF services. Please see below:
All those methods we have created will be available to us in our Silverlight project after we add WCF service to our project.
Use WCF Service Method in our Silverlight Project
For showing records in the datagrid of child window, we use fetchContacts() methods result in our .CS page. Below is the code for it:
use this namespace to access WCF service
using MeetingSchedule.ServiceReference1;
public Popup()
{
InitializeComponent();
ServiceReference1.Service1Client newclient =
new ServiceReference1.Service1Client();
newclient.fetchContactsCompleted +=
new EventHandler<fetchcontactscompletedeventargs>
(newclient_fetchContactsCompleted);
newclient.fetchContactsAsync();
}
void newclient_fetchContactsCompleted(object sender, fetchContactsCompletedEventArgs e)
{
dataGrid1.ItemsSource = e.Result;
}
Now the Datagrid is filled with data from the database using WCF service methods.
Show the Popup on Button Click
The main page CS file code for it is:
private void button1_Click(object sender, RoutedEventArgs e)
{
Popup myPopUp = new Popup();
myPopUp.Show();
}
Conclusion
In this article, I have explained how to use WCF service to fetch records from database and shown data in datagrid and popup childwindow from main page.
This application is not complete yet, but this is the basis for this application. The second part will explain how to add contacts from child windows to the main page which are checked, saving the data from my own page, sending mail to all selected contacts. This will be pending till the next article.
Thanks and do read the next part of this article within a few days. I am compiling the second part.
History
- 10th May, 2011: Initial version
