Hi all,

I received an email from MSFT, Community Program Manager, Microsoft Corporation, India that if I would be interested in MVP Award. For those who are not familiar with the MVP program you can learn more by visiting our web site at: http://www.microsoft.com/india/mvp.

However, the nomination for the MVP Program doesn’t guarantee the award:(

Q: What is the Microsoft MVP award?
A: The MVP Award is an annual award that is given to outstanding members of Microsoft’s peer-to-peer communities, and is based on the past year’s contributions those members make in offline and online technical communities.

Q: How does Microsoft award the MVPs?
A: MVPs are awarded through a nomination period where their past year’s contributions to the technical community are compared against those of their peers. Recipients of the award are determined through review cycles in that nomination period.

Q: Why does the award exist?
A: Microsoft believes that a robust, interactive user community is key to helping customers maximize the solutions and benefits from their software investments. The MVP
Award is the way Microsoft recognizes those participants who have made a highly positive impact in the technical and product communities in which they participate. Microsoft wants community participants and leaders to know that their contributions are greatly appreciated. The MVP Award exists as a way to reach out to and thank outstanding members for their past participation and willingness to help others in these communities, both online and offline.

Q: What does the MVP Award include?
A: The MVP Award includes designation as a Microsoft MVP, your own account manager (MVP Lead), a complimentary one-year subscription to MSDN or TechNet, and a certificate commemorating the award. Upon receipt of a voluntarily signed Non-Disclosure Agreement (NDA) MVPs are also given access to private newsgroups and a channel into Microsoft product groups.

FOR THOSE WHO DO NOT KNOW ME

Hi,

I am SHARKER KHALEED MAHMUD and I am a SILVERLIGHT ADDICT. 

Thanks
Sharker Khaleed Mahmud
DHAKA, BANGLADESH

SKYPEID: sharkerkhaleedmahmud
MSN IQ: shamrat231@hotmail.com

So lets create a simple Silverlight project

Now add couple things on the order shown.

1. Add App_Code folder and then add a Profile.cs
2. Add App_Data folder and then add a Profle.mdf. On Data section in Add New Item form you will be able to add SQL Server Database.
3. Add a folder called WebServices. Then add Silverlight-enabled web service from Add New Item. This item is available at Silverlight section. Now name the service as ProfileService.svc

The output should look something like this.

Now add the newly created database in your SQL Server. In this case I am using SQL Server 2008. Use the attach property to add your database. The below illustration shows database configuration on my laptop. Do not expect the same settings on your pc. Use the attach option to attach the new database (Profile.mdf). Then click on the add button. Choose the database. Afterwards click on the ok button. It will attach the database and will create random name for the db. Rename to Profile. Confused? see below.

Now we add the ConnectionString to our web.Config for this database

Web.Config

<connectionStrings>
    <add name=”ConnectionString” connectionString=”Data Source=(local);Initial Catalog=Profile;Integrated Security=True”
        providerName=”System.Data.SqlClient” />
  </connectionStrings>

Ok now we will use aspnet_regsql.exe to generate all the necessary tables related to Login system. You will find the exe file in for ASP.NET 4.0

Run the exe depending on the version you are using. For this case I will be using v4.0. Give your server name and choose the profile database that you have created.

Click next and finish. If you now go to your database you will see all the necessary tables have been created. Now lets come back to VS2010. Open the profile class. I will now add property that i want to get or set in the database on the profile table. Here is an example on how that can be done. For eg. I will add a property call DashboardIndex where it will store some variables that the current user logged in. Rename the class name from profile to UserProfile and extend the class to ProfileBase as shown below.

Profile.cs

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

namespace Profile.Web
{
    public class UserProfile : ProfileBase
    {
        public string DashboardIndex
        {
            get { return base["DashboardIndex"] as string; }
            set { base["DashboardIndex"] = value; }
        }

        public static UserProfile GetUserProfile(string username)
        {
            return Create(username) as UserProfile;
        }

        public static UserProfile GetUserProfile()
        {
            MembershipUser user = Membership.GetUser();
            if (user != null)
            {
                return Create(user.UserName) as UserProfile;
            }
            else
            {
                return null;
            }
        }
    }
}

The first method creates a user profile against the asp.net login username that you assign. The second method creates an asp.net profile based on the current logged in user. Lets for now keep the profile class as simple as possible. Go to your current Web.config to add the profile tag as shown below.

Web.Config

<system.web>
    <compilation debug=”true” targetFramework=”4.0″ />
    <profile enabled=”true” defaultProvider=”CustomProfileProvider” inherits=”Profile.Web.UserProfile” automaticSaveEnabled=”true”>
      <providers>
        <clear/>
        <add name=”CustomProfileProvider” type=”System.Web.Profile.SqlProfileProvider” connectionStringName=”ConnectionString” applicationName=”/” />
      </providers>
    </profile>
</system.web>

Look at the bold code part. Here Profile.Web is the namespace in Profile.cs (have class UserProfile).

Thats all about setting up profiling. Now to access asp.net profile information, I will create two methods on my Profile.svc. One method is to get the value from the database on DasboardIndex property. Another method will be used to save the dashboard index value given by the user. See the code below.

 ProfileService.svc

using System;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;

namespace Profile.Web
{
    [ServiceContract(Namespace = "")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class ProfileService
    {
        [OperationContract]
        public string GetCurrentDashboardSettings()
        {
            UserProfile profile = UserProfile.GetUserProfile();
            return profile.DashboardIndex;
        }

        [OperationContract]
        public void SaveCurrentDashboardSettings(string indexCollection)
        {
            UserProfile profile = UserProfile.GetUserProfile();
            profile.DashboardIndex = indexCollection;
            profile.Save();
        }
    }
}

Now go to web.config and remove the bindingConfiguration=”Profile.Web.ProfileService.customBinding0″ and change the binding to binding=”basicHttpBinding” as shown below

Web.Config

         <services>
            <service name=”Profile.Web.ProfileService”>
                <endpoint address=”" binding=”basicHttpBinding”
                    contract=”Profile.Web.ProfileService” />
                <endpoint address=”mex” binding=”mexHttpBinding” contract=”IMetadataExchange” />
            </service>
        </services>

Ok now go to Profile Silverlight project. Right click on the project and choose the Add Service Reference option. A form will open. Click on the Discover button.

On clicking the ok button a ProfileServiceReference will be created. Guess I will finish here. Any comments welcome. On next post i will continue with part 2.

Thanks
Sharker Khaleed Mahmud
MCTS, MCPD
DHAKA, BANGLADESH

MVVM

MVVM is a great pattern to start with. MVVM allows the user to separate the View from the data and logic layer. So basically the designer can work on the xaml part on the blend while the developer can work on the data and logic on a separate view model class. In other words, separation of presentation layer and data access layer is being done very easily.

VIEWS

A view can be a simple xaml usercontrol. Usually, you put it in a Views folder. You can put resources, animation, navigation, powerful bindings and themes in the usercontrol. I would suggest that you put the resource in different places like in App.xaml but it is easier for the designer to work on the xaml control in blend if the resources are there. You will be leaving the data logic of binding in your view model class and not in your Views usercontrol (.cs) and thus loose coupling allows greater reusability and easier Dependency Injection(DI) and maintainability .

This is a continuation of Silverlight Prism Part 1 : Get Started of Silverlight Prism. So lets change some of the name and create some directories as shown below to introduce MVVM. For simplicity, we will create directory for each part of Model View ViewModel.

So first lets look at the model class where i will be creating properties for our stories. I will be using Scott Digg example here.

StoriesMdel.cs

    public class StoriesModel
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
        public int NumDiggs { get; set; }
        public Uri HrefLink { get; set; }
        public string ThumbNail { get; set; }
    }

So basically that is an example of model i.e stories. I will now use this model in our view model class by creating dummy collection and modifing the views to show some actual output. For this we will copy the code from Digg  example and put it in our view. I will also be using the same design (App.xaml) that Scott created. At the moment, I am reusing only six Scott styles in the (SearchModuleResultViewModel.xaml) view.

The styles that I have used here are 

1. DiggPanel
2. StoriesList
3. NumDiggs
4. NumDigsSubBlock
5. ThumbNailPreview
6. TitleBlock

SearchModuleResultView.xaml (View)

<UserControl x:Class=”SimplePrismApplication.Search.SearchModuleResultView”
    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation“
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml“
    xmlns:d=”http://schemas.microsoft.com/expression/blend/2008“
    xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006“
    mc:Ignorable=”d”
    d:DesignHeight=”300″ d:DesignWidth=”400″>
    <Grid x:Name=”LayoutRoot” Background=”Beige” Height=”300″>
        <ListBox x:Name=”StoriesList” Style=”{StaticResource StoriesList}” ItemsSource=”{Binding Stories}”>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation=”Horizontal”>
                        <!– Yellow Digg Panel with NumDiggs–>
                        <StackPanel Style=”{StaticResource DiggPanel}” >
                            <TextBlock Text=”{Binding NumDiggs}” Style=”{StaticResource NumDigsBlock}” />
                            <TextBlock Text=”diggs” Style=”{StaticResource NumDigsSubBlock}” />
                        </StackPanel>
                        <!– Story Thumbnail Preview –>
                        <Image Source=”{Binding ThumbNail}” Style=”{StaticResource ThumbNailPreview}” />
                        <!– Story Title–>
                        <TextBlock Text=”{Binding Title}” Margin=”5″ Style=”{StaticResource TitleBlock}”/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</UserControl>

Put the styles in App.xaml file for now. Now, all left is to create some dummy variables and see the output. At code level, we will create constructor injection by injecting our view model in the constructor of the view like this.

SearchModuleResultView.xaml.cs

    public partial class SearchModuleResultView : UserControl
    {
        public SearchModuleResultView(SearchModuleResultViewModel viewModel)
        {
            InitializeComponent();
            this.DataContext = viewModel;
        }
    }

We have set the DataContext to the view model, thus taking care of binding. So lets create some dummy variables and see if this works or not.

SearchModuleResultViewModel.cs

    public class SearchModuleResultViewModel
    {
        public List<StoriesModel> Stories { get; set; }

        public SearchModuleResultViewModel()
        {
            Stories = Stories ?? new List<StoriesModel>();

            Stories.Add(new StoriesModel { Title=”example 1″, Description= “fdfd”, NumDiggs=2 });
        }
    }

Static content output.

Hmm, so far we have tested the MVVM concept and implemented digg sample using static content. Now we will test it using live web service.  Before we create webservice, we need to create an interface. So lets add a new folder call WebService and add a new interface class called ISimpleService.cs. In here we add a method search to do search with a callback mechanism.

ISimpleService.cs

using System.Collections.Generic;

namespace SimplePrismApplication.Search
{
    public interface ISimpleService
    {
        void DiggSearch(string value, Action<IEnumerable<StoriesModel>> SearchCallBack);
    }
}

Now we need to add reference of this interface to the view model class.

SearchModuleResultViewModel.cs

    public class SearchModuleResultViewModel
    {
        public List<StoriesModel> Stories { get; set; }
        public ISimpleService DiggService { get; set; }

        public SearchModuleResultViewModel(ISimpleService service)
        {
            Stories = Stories ?? new List<StoriesModel>();
            this.DiggService = service;
            this.DiggService.DiggSearch(“baseball”, OnSearchCompleted);
        }

        private void OnSearchCompleted(IEnumerable<StoriesModel> StoriesModel)
        {
            this.Stories.Clear();
            foreach(StoriesModel story in StoriesModel)
            {
                this.Stories.Add(story);
            }
        }
    }

We will add a webservice called Service.cs in WebService folder inheriting the interface ISimpleService.cs. Also add a reference of System.Xml.Linq to your Silverlight project. Reusing the code from Scott blog, it looks like this.

DiggService.cs

using System.Xml.Linq;
using System.Linq;

namespace SimplePrismApplication.Search
{
    public class DiggService : ISimpleService
    {
        public void DiggSearch(string value, Action<IEnumerable<StoriesModel>> SearchCallBack)
        {
            // url
            string url = String.Format(“http://services.digg.com/stories/topic/{0}?count=20&appkey=http%3A%2F%2Fscottgu.com“, value);

            // Initiate Async Network call to Digg
            WebClient service = new WebClient();
            service.DownloadStringCompleted += (sender, e) => SearchCallBack(DisplayStories(e));
            service.DownloadStringAsync(new Uri(url));
        }

        private IEnumerable<StoriesModel> DisplayStories(DownloadStringCompletedEventArgs e)
        {
            XDocument xmlStories = XDocument.Parse(e.Result);

            var stories = from story in xmlStories.Descendants(“story”)
                          where story.Element(“thumbnail”) != null &&
                                !story.Element(“thumbnail”).Attribute(“src”).Value.EndsWith(“.gif”)
                          select new StoriesModel
                          {
                              Id = (int)story.Attribute(“id”),
                              Title = ((string)story.Element(“title”)).Trim(),
                              Description = ((string)story.Element(“description”)).Trim(),
                              ThumbNail = (string)story.Element(“thumbnail”).Attribute(“src”).Value,
                              HrefLink = new Uri((string)story.Attribute(“link”)),
                              NumDiggs = (int)story.Attribute(“diggs”),
                          };

            return stories;
        }
    }
}

Now hitting F5 will not display the output as in this case we are using web service, not static content. So we need to register the webservice in the UnityContainer. We do that in our module section.

in the SearchModule constructor we set

        public SearchModule(IRegionManager regionManager, IUnityContainer container)
        {
            this.regionManager = regionManager;
            this.container = container;
        }

and register the service in the IUnityContainer like this

        public void Initialize()
        {
            this.container.RegisterType<ISimpleService, DiggService>(new ContainerControlledLifetimeManager());
            this.regionManager.RegisterViewWithRegion(“ResultRegion”, typeof(SearchModuleResultView));
        }

Hit F5 and see the output. Funny thing it will not show the deserved output. Why? The binding is being done before we receive the data from the webservice. Well that is the scenario at the moment. Now to avoid that i will use ObservableCollection instead of List like this

Output

Thanks
Sharker Khaleed Mahmud
Software Developer
(MCP,MCTS,MCPD[web])

References:

5 Minute Overview of MVVM in Silverlight : JohnPapa.net
Codeplex Sample
Scott DiggExample

This will be for now two part series.

1. Silverlight Prism Part 1 : Get Started
2. Silverlight Prism Part 2 : Model View View Model (MVVM) Concept

So first of all lets create a simple web project in Silverlight 3. Add a Silverlight usercontrol page named as Shell.xaml. Think of shell as the top level where the view will be shown. Delete the built in mainpage.xaml. Ok now to use prism, you need to connect the project to prism or add reference of the prism dll. To do that goto add reference and add the prism libraries. 

Open the folder, where u have unpack the exe file. Run the bat file with name [Desktop & Silverlight - Open Composite Application Library.bat]. Compile the project . According to the readme file, the Composite Application Library assemblies for a Silverlight application will be placed in the CAL\Silverlight\ (look in all debug folder)

Put all the dll file in a folder(eg. Prism). There will be total 7 dll files. 

1. Microsoft.Practices.Composite.dll
2. Microsoft.Practices.Composite.Presentation.dll
3. Microsoft.Practices.Composite.UnityExtensions.dll
4. Microsoft.Practices.ServiceLocation.dll
5. Microsoft.Practices.Unity.dll
6. Microsoft.Silverlight.Testing.dll
7. Microsoft.VisualStudio.QualityTools.UnitTesting.Silverlight.dll

Ok, now before we add a simple class called BootStrapper.cs, lets talk more about the Shell. Shell.xaml is more like your ASP.NET Masterpage. In here, we define the placeholders as regions. We can show a view on the shell by assigning a view to a particular region. You can design your shell page and apply styles as u like. So basically u will have a single shell page where u can apply mutiple designs according to the styles you create to give different outlook.

Ok we will now add code to BootStrapper.cs

BootStrapper.cs

    public class BootStrapper : UnityBootstrapper
    {
        protected override DependencyObject CreateShell()
        {
            Shell main = new Shell();
            Application.Current.RootVisual = main;
            return main;
        }

        protected override Microsoft.Practices.Composite.Modularity.IModuleCatalog GetModuleCatalog()
        {
            ModuleCatalog modules = new ModuleCatalog();
            // in here we add modules 
           return modules;
        }
    }

At code level, inherit the UnityBootstrapper from using Microsoft.Practices.Composite.UnityExtensions; In has a abstract class called CreateShell(). In this method we will return the Shell user control we have created . Now we have to connect the Bootstrapper to our application. For that, lets go to app.xaml and remove the line from Application_Startup and add the new line

App.xaml

        private void Application_Startup(object sender, StartupEventArgs e)
        {
            new BootStrapper().Run();
        }

Ok, lets talk about bootstrapper class.  Here we are assign the RootVisual of the SL application and register modules. We have finished with our shell part, so lets create a module. We add now a second project and name it SimplePrismApplication.Search. Same as before, we add the Prism dll to this project. Now create the files listed below

1. SearchModuleResultView.xaml in Views [folder]
2. SearchModule.cs
3. SearchResult.cs
4. and SearchModuleResultViewModel.cs

The output should be as shown below  

What do we mean by Module?

Module can be views, collection of related components, such as features, views, or business logic.  GetModuleCatalog() in our BootStrapper.cs we are adding the modules that our application will be using. So lets define a module.

SearchModule.cs

using Microsoft.Practices.Composite.Modularity;
using Microsoft.Practices.Composite.Regions;
using Microsoft.Practices.Unity;

 namespace SimplePrismApplication.Search
{
    public class SearchModule : IModule
    {
        #region IModule Members

        private IRegionManager regionManager;
        IUnityContainer container;

        public SearchModule(IRegionManager regionManager, IUnityContainer container)
        {
            this.regionManager = regionManager;
        }

        public void Initialize()
        {
            this.regionManager.RegisterViewWithRegion(“ResultRegion”, typeof(SearchModuleResultView));
        }

         #endregion
    }
}

Our module class is inheriting the IModule interface. Here we are registering a view in the region manager. We are assigning our SearchModuleResultView view with a particular region name “ResultRegion” in our Shell.xaml. In our Shell.xaml we add a region as shown below.

Shell.xaml

 <UserControl x:Class=”SimplePrismApplication.Shell”
    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation“
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml“
    xmlns:d=”http://schemas.microsoft.com/expression/blend/2008“
    xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006“
    mc:Ignorable=”d”
    xmlns:Desings=”clr-namespace:Microsoft.Practices.Composite.Presentation.Regions;assembly=Microsoft.Practices.Composite.Presentation”
    >
    <Grid x:Name=”LayoutRoot” Background=”Silver”>
        <StackPanel>
            <ItemsControl Desings:RegionManager.RegionName=”ResultRegion” Width=”800″ Height=”600″ ></ItemsControl>
        </StackPanel>
    </Grid>
</UserControl>

Look at the bold part, you have to add the region namespace to define a particular region. We will show our current view to this itemcontrol having the region name “ResultRegion”. So lets add some text in our view and run the project.

SearchModuleResultView.xaml

<UserControl x:Class=”SimplePrismApplication.Search.SearchModuleResultView”
    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation“
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml“
    xmlns:d=”http://schemas.microsoft.com/expression/blend/2008“
    xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006“
    mc:Ignorable=”d”
    d:DesignHeight=”300″ d:DesignWidth=”400″>
    <Grid x:Name=”LayoutRoot” Background=”Beige”>
        <TextBlock Text=”end of part 1, will continue in part 2″ />
    </Grid>
</UserControl>

For the view to show in the given region, first you have to add the reference SimplePrismApplication.Search in your SimplePrismApplication. Then on the bootstrapper.cs add the module in our GetModuleCatalog()

            ModuleCatalog modules = new ModuleCatalog();
            modules.AddModule(typeof(SearchModule)); //using SimplePrismApplication.Search;
            return modules;

Hit F5 and see the output.

Guess I will finish here. Any comments welcome. Next week I will continue with part 2.

Thanks
Sharker Khaleed Mahmud
MCTS, MCPD
DHAKA, BANGLADESH

• Managed Code url routing
• Hard-Coded url routing
• Markup url routing
• Unnamed url routing
• Catching routing parameters

First of all lets create a simple project in ASP.NET.

Once you click on ok, a sample asp.net project will be created. Now lets add 5 web form pages(.aspx) in a folder name UrlDemo. Each page is using the builtin master page (Site.Master). Afterwards, create a class UrlRoute.cs in a new folder. Give the folder name App_Code.

Now add a simple static method in UrlRoute.cs using the System.Web.Routing class

public static void RegisterRoutes(RouteCollection routes)
{
}

RouteCollection just provides a collection of route for ASP.NET routing. So lets add some routes to this collection.

MapPageRoute is a helper method. In the first parameter you give a name of the route. For simplicity, lets assing name like AboutRoute, SearchRoute etc. The second parameter is the parameter that will be shown on the browser url. You can also pass parameter if needed. The over loading method for MapPageRoute also allows you to add constraint and default parameter. See the below example.

Here we have created two routes. The first one has name “MainRoute”. The second parameter is the pattern that will be shown to the user. It may contain multiple place holder(s) if needed. I will talk about it a bit later. The last parameter contains the physical location of the file that we are routing.

Ok, now we will call this RegisterRoutes method from Application_Start

Great we are almost there. Now I am going to show you how we can use this routing from code level. First, open default.aspx web form that is provided by default. Add some hyperlink(s)

Now on default.aspx.cs, i will create a sample virtual path (VirtualPathData) for MainRoute.

Hit F5 and put a debug on the last line. At runtime, you will be able to see the url pattern at debuging virtual path as shown below. So we can conclude uptil now its working.

So far we have created a sample virtual path from code level. The next route is AboutRoute. In this one i will show you on how can we assign path directly. Look at the picture below. Remember, we have already added the route path in RegisterRoutes method.

By the way, try adding information  in all of the pages like the way given below. So you will know that the routing is actually working.

Ok, so we have cover the basics. Now I will register more routes by adding new routes.

Here, we have created a CustomerRoute with a second parameter containing the pattern. In this case, it’s a simple pattern with a {year} place holder and  to-catch other {*paramerters} here. In the third parameter we are giving the physical location of the file. In the fifth parameter we assign default value for the routes. In the last parameter we define the constrains for the default value for the defined route. Now, in default.aspx.cs, we will call this route and assign it to CustomerRoute navigation url.

Hit F5 and see for yourselves. Similarly we can assign markup variables in aspx page.

The above code is an example of markup language. The hyperlink with id ProfileRoute, in this case we did not assign any route name. As a result, it will automatically take the unnamed route in routecollection.

In this case unnamed route here is profile. Ok, the last thing left is to catch the routing values. So in the next section, at code level, we will try to catch the parameter that we passed. For this case, we will use Customer.aspx.cs

Guess I will finish here. Any comments welcome. Next week I will talk about Silverlight Prism and MVVM.

Thanks
Sharker Khaleed Mahmud
MCTS, MCPD
DHAKA, BANGLADESH

References:
ASP.NET Routing
Route
PageRouteHandler