I love it when two development technologies shake hands with each other to make a composite product. I have been playing around with integrating one technology with another lately and today’s blog is dedicated to integrate Silverlight control [Calendar] in MVC 3. For those who are new to .Net development technologies, I suggest you have a look at Silverlight and MVC
It is not always the case when you are bound to use Silverlight in MVC 3 solution especially a Calendar control, you can achieve the similar functionality with tools like JQuery, Telerik Calendar Control and many more. However Integrating Silverlight in MVC 3 is not as easy like the above mentioned tools. I ran into this scenario a while back where I was supposed to have an event calendar control in my MVC 2 project and I decided to take a higher route of implementing this by Silverlight just to learn how to integrate it. It was not easy for me to do that the first time but in the end I have to admit it was slick. 🙂 I will try to give a demo on how to integrate Silverlight Control in MVC 3 razor view. Also you can add other silverlight control just the same way. We will also be using JSON to communicate between Silverlight and MVC 3.
Lets Begin….
First of all
1) Add a Silverlight project in to your MVC 3 Project (Select Defaults, let it create a Test page)
2) In your Silverlight project Add Reference to System.ServiceModel.Web, System.Runtime.Serialization
After all that your solution should look something like this..
Now let’s edit XAML in Silverlight and put a calendar control and textblock in it.
I edited it with some basic design properties and here is how it looks..
Now let’s create MVC View which will host this Silverlight calendar. To do that Just create a view and locate a file called “YourSilverlightAppNameTestPage.aspx” in my case it is CalendarTestPage.aspx, Right Click ->View Code and copy the script and html and paste it into your MVC View.
Do not forget to remove Head and Body tags from your MVC View after pasting the content.
Now set the path of your zap file matching inside your ClientBin folder, or simply use the url to that. Here is how it looks in my case.
Notice I have all the height/width value in “px”. Sometimes some browser does not like % with Silverlight and they will not just display the content in that case so try to use px with Silverlight as much as possible.
Put a method to display view in your controller. And run your web project to see if you can see a Silverlight calendar. You should be able to see something like this….
If you cannot see something like this then, check your source path in your view, That is mostly the culprit, Clear your browser cache and try it in different browsers..
Check above steps if you missed any if you still cannot see it.
Ok so now you have a Silverlight calendar in MVC but we didn’t do all this trouble just to display a calendar we want to pass in some data to this calendar and make is a traditional event calendar.. So we add a model in our MVC now.
I just created a CalendarModel like this to show the demo,
So as I said, you will have a proper db calls to fetch event data or something, in this example a constructor call is enough to have some fake data to test our calendar control… now, In your Controller add a method which fetches this data from the model.. Something like this..
What we did here is we have created a bridge for our Silverlight app to communicate with our mvc and fetch the data for its internal processing..
Now lets code in Silverlight app to get data from this bridge…For this copy the Model you created and paste it into your MainPage.Xaml.cs under your namespace, Why? Because we are going to juse DataContractJsonSerializer which will need the datatype to model to convert json into some sort of datatype.
One can say that why not add a reference to our project and use the model directly, well you cannot add reference of your projects which are not built against Silverlight runtime, so that wont work.
Anyways.. after you added that into your silverlight, add this code to your file..
Ok so you can see couple of ugly red arrows right, lol, they are ugly to get your attention. So you need System.Runtime.Serialization.Json for DataContractJsonSerializer and this is why we added two references at the begining of our project.
You also need member variable of CalendarModel to store and compare the data on SelectedDateChange event.. We will store the data we get from MVC in this member variable, this is why we need to paste our model in Silverlight project too, so we can create an object of that class which can hold the data that came as Json from our special bridge we made..
Notice in Page_Loaded we have created a web client object which will read asynchronously from the “Event” method in our controller [our bridge.. 🙂 ] Also notice that for demo purposes i have hard coded the url [after hard coding the port I am running my web app]
If you deploy it to IIS later on, do not forget to change it to your actual url.
And now finally we have mvc_OpenReadCompleted method, which actually fetches the data from the Json and convert it into our CalendarModel..
Now to make an Event Calendar I have to add these dates to my calendar control hence.. loop going through adding each one in the calendar control…
Now I have not described why i have used member variable loadCompleted in this class, Well here is why, SelectedDateChanged method is called when the calendar control is rendered, which is the same method we are going to use later, to display the details of Meeting. That variable is a mechanism to differentiate between when this method is called by client (the person using the web page) or by our application while loading the calendar control..
And Finally we just add a SelectedDatesChanged method..to complete the task we started..
Here is how it looks.
We are just displaying the details i.e. MeetingTime, MeetingAgenda and Meeting Name here when selected date matches the one that are passed by our MVC. You can do all your complicated stuff here.
That’s it, Finally we will be able to see Silverlight event calendar..
Here is the look
Silverlight is known for its rich media, I will suggest you that if you ever use this, use everything in Silverlight to make is as much pretty as possible so that your efforts look worth, I did it once and I can say no JQuery calendar could look that slick..
And we are done…
You now have a decent Silverlight Event Calendar in your MVC 3 project….
I still strongly suggest using JQuery/Telerik Controls for Calendar control, but I understand sometimes things have to be done some specific way and it might be helpful if we have a knowledge of how to integrate different Microsoft technologies together.
Hope you will stick around… Happy coding..
later…