How to deploy Silverlight web application through installer

Suppose we want to create  MSI installer package of Silverlight web application for server deployment using Microsoft Installer.

For this, we need to utilize Microsoft Visual Studio "Web Deployment" project template and "Web Setup" project template.

Web Deployment project template comes only when we install its plugin. We can download its plugin from here.

Now in our web project we will right click and Add Web Deployment Project

1

 

This will prompt me for what I want to name the project and where to store its project file:

2

The web deployment project will then show up as part of my solution. We can change some optional settings by double clicking it

3

We have choose the default option for output assemblies  i.e  to merge the entire web-site into a single assembly that we can name whatever we want. This merges the output of all page/control compilation, app_code, and web-services into a single assembly (leaving one file to deploy).

Now, its time to add another project which is "Web Setup" project. This project actually creates MSI package. To add Web Setup project, right click on the solution in Solution Explorer and click "Add" then "New Project". Then, select "Web Setup Project" from Visual Studio project templates list. "Web Setup Project" will be available under "Setup and Deployment", which in Visual studio 2010 is under "Other Project Types".

4

We can see our project is added

5

Now, lets define the "Project Output" for the Web Setup project we just added. Right click on Web Setup project and click Add>Project Output

6

Now we will see "Project Output" dialog box. Project Output defines what output we want to include in our MSI package. In our case, we want output of pre-compiled website generated by Web Deployment project. So, select Web deployment project from "Project:" dropdown as your output project name and and select "Precompiled Web Outputs" from the listbox and click "OK".

7

This will add "Precompiled Web Outputs" to the Web Setup project.

8

Now, lets configure "Project Dependencies". "Project Dependencies" will set dependency or order in which each of the projects will get compiled. This will set the priority on how you want to perform your build.

9

Since our main Silverlight project is not dependent on anything, it should build first. Then our website should be build as it is dependent on Silverlight project. Then it should build WebDeployment project as it depends on WebSite build. Finally WebSetup project should build, which depends on both WebSite build and WebDeployment build.

image 

image

image

image

Noe we need to configure "Configuration Manager". "Configuration Manager" settings will tell Visual Studio which projects to include during "Release" build and "Debug" build.
To get "Configuration Manager" dialog, right click on the solution in "Solution Explorer" and click "Configuration Manager".

11

In "Configuration Manager" dialog, include all  projects for "Release" build and just include WebSite for "Debug" build. We normally create MSI package for server deployment only from "Release" build.

image

image

And Finally, we can build the entire solution by clicking "Build Solution

If everything goes fine and the build is successful, we will be able to see the MSI package under "Release" folder in Web Setup setup project file path

12

Now we can install this MyUserControl.msi

image

image

image

image

Now our web project has been deployed. We can check it by opening IIS

13

also we can browse our application

14

(Note Directory Browsing should be enabled )

image

and after clicking MYucTestPage we will get our result

image

I have attached the sample application..

MyucMsi.rar (459.43 kb)

Posted by: Mohd Ahmed

Categories: ASP.NET, IIS, msi, Silverlight

Tags: , , , ,

How to enable/disable specific item(s) of RadComboBox in Silverlight

Suppose we want to hide specific items of RadCombo box, For example to show instead of this:

.  item2
item1
item2
item3

we want to show like this

.  item2
item1
item3

To do so first lets Take a telerik’s RadComboBox and populate it with some data

So our xaml would have code like

  <Grid x:Name="LayoutRoot" Background="White"> <telerik:RadComboBox x:Name="cbxItem" Height="25" 
DisplayMemberPath
="Text" SelectedValuePath="Index" Width="150" SelectedIndex="0"/>
</
Grid>

 

1

and code behind like

public partial class MainPage {
       public ObservableCollection<DataItem> Items;
       public MainPage()
       {
           InitializeComponent();
           Loaded += MainPage_Loaded;
       }
       void MainPage_Loaded(object sender, RoutedEventArgs e)
       {
           if (Items == null)
               Items = new ObservableCollection<DataItem>
               {
                   new DataItem(1),
                   new DataItem(2),
                   new DataItem(3),
                   new DataItem(4),
                   new DataItem(5),
               };
           cbxItem.ItemsSource = Items;
       }
   }
   public class DataItem {
       public DataItem(int index)
       {
           Index = index;
           Text = string.Format("Item {0}", index);
       }
       public int Index { get; set; }
       public string Text { get; set; }
     }

 

2

and we will get output like

3

Now to achieve our scenario we will configure our DataItem class as -

public class DataItem : INotifyPropertyChanged {
        public DataItem(int index)
        {
            Index = index;
            Text = string.Format("Item {0}", index);
        }
        public int Index { get; set; }
        public string Text { get; set; }
        private bool isActive = true;
        public bool IsActive
        {
            get { return isActive; }
            set {
                if (isActive != value)
                {
                    isActive = value;
                    OnPropertyChanged("IsActive");
                }
            }
        }
        public event PropertyChangedEventHandler PropertyChanged;
        private void OnPropertyChanged(string PropertyName)
        {
            if(PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(PropertyName));
            }
        }

    }

4

and we will set our logic at the selection changed event of RadComboBox (logic defines which item to show (Enable) or hide (Disable))

private void cbxItem_SelectionChanged(object sender, Telerik.Windows.Controls.SelectionChangedEventArgs e)
      {
          foreach (var item in Items)
          {
              if (((DataItem)(e.AddedItems[0])).Text == item.Text)
              {
                  item.IsActive = false;
              }
              else {
                  item.IsActive = true;
              }
          }
      }

Now we have to directly bind the RadComboBoxItem's IsEnabled property to the IsEnabled property exposed by your domain object. We can do this through the ContainerBindingCollection class exposed by the Telerik RadControls' API.

Xaml

 <UserControl.Resources> 
<
Controls:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
<
DataTemplate x:Key="cbxItemTemplate">
<
Controls:ContainerBinding.ContainerBindings>
 <
Controls:ContainerBindingCollection>
 <
Controls:ContainerBinding PropertyName="Visibility"
Binding
="{Binding IsActive, Converter={StaticResource BooleanToVisibilityConverter}}" />
 </
Controls:ContainerBindingCollection>
</
Controls:ContainerBinding.ContainerBindings>
<
TextBlock Text="{Binding Text}" />
 </
DataTemplate>
</
UserControl.Resources>

 <
Grid x:Name="LayoutRoot" Background="White">
 <
telerik:RadComboBox x:Name="cbxItem" Height="25" ItemTemplate="{StaticResource cbxItemTemplate}"
 
SelectedValuePath="Index" Width="150" SelectionChanged="cbxItem_SelectionChanged" SelectedIndex="0"/>
 </
Grid>

 

5

So now we will get our output as

7

8

I have attached the sample solution..

TestRadComboBox.rar (2.38 mb)

Posted by: Mohd Ahmed

Categories: C#, Silverlight, Telerik

Tags: , , , , ,