Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Silverlight 2 + ASP.NET MVC beta + WCF + LINQ - A low quality show case.

0.00/5 (No votes)
14 Nov 2008 1  
An experimental shopping website of combine new microsoft technologies.

Introduction

It's experimental shopping website that combine Silverlight 2 + ASP.NET MVC beta + WCF + LINQ + other .NET features.

I started this project just for fun and curious about how these technologies work together.

Background

You need some silverlight 2, ASP.NET MVC, WCF, LINQ knowledge. :)

But it's not complicated project, so you can read the codes easily.

Using the code

(You can download this source code from googlecode,

using subversion checkout the source from "http://allshop.googlecode.com/svn/trunk/"

Because of DB file I couldn't upload source code here directly.)

First of all description about CartListControl, please check this article. :)

I left comments on the source code, and lack of my writing skill and size of the project(it's not that big but it's not that small) I recommend read source code.

Architecture of the project

MVC with silverlight and WCF and DB

architecture4.png

Silverlight Constrol List

CartControl Project
CartControl - The main control that show product list and cart.
ItemsInCart - show items in cart
Popup - show popup that contains more detail information of a product
ProductControl - control for a product
QuantityDialogBox - dialog for insert and update quantity of an order

OrderListControl Project
OrderListUserControl - show list of orders using Datagrid
OrderListDetailControl - show list of products in a order using Datagrid
Popup - show popup contains OrderListDetailControl

ProductListControl Project
ProductListControl - show list of products using Datagrid(only for administrator)

Interaction Silverlight and javascript in the host page.

    [ScriptableType]
    public partial class CartUserControl : UserControl
    {
        //Register this Control as a Scriptable Object then this object can be invoked from the host webpage's javascript.
        HtmlPage.RegisterScriptableObject("CartUserControl", this);
        
        //Expose this method as a Scriptable Method so that we can access this method at Javascript.
        [ScriptableMember]
        public void GetProductsByCategoryId(int categoryId)
        {
 

Then you can access GetProductsByCategoryId method from host webpage's javascript like below,

        function LoadData()
        {
            var silverlight = document.getElementById("silverlight"); 
            if(silverlight)
            {
               silverlight.Content.CartUserControl.GetProductsByCategoryId(1);
            }
        }
    </script>
<div id='errorLocation' style="font-size: small;color: Gray;"></div>
    <div id="silverlightControlHost">
  <object id="silverlight" data="data:application/x-silverlight," type="application/x-silverlight-2" width="100%" height="100%">
   <param name="source" value="../../ClientBin/CartControl.xap"/>
   <param name="onerror" value="onSilverlightError" />
   <param name="onLoad" value="LoadData" />
   <param name="background" value="white" />............

Architecure of main CartControl

 CartListControl2.png

ASP.NET MVC beta

I have learned ASP.NET MVC from Scott Guthrie's blog.

So you better read the blog instead of reading my description.

The list of posts that I have read.

ASP.NET MVC Preview 5 and Form Posting Scenarios
ASP.NET MVC Preview 4 Release (Part 1)
ASP.NET MVC Preview 3 Release

And my project is based on ASP.NET MVC Framework Tutorial(Preview 2).
http://weblogs.asp.net/scottgu/archive/2007/11/13/asp-net-mvc-framework-part-1.aspx
http://weblogs.asp.net/scottgu/archive/2007/12/03/asp-net-mvc-framework-part-2-url-routing.aspx
http://weblogs.asp.net/scottgu/archive/2007/12/06/asp-net-mvc-framework-part-3-passing-viewdata-from-controllers-to-views.aspx
http://weblogs.asp.net/scottgu/archive/2007/12/09/asp-net-mvc-framework-part-4-handling-form-edit-and-post-scenarios.aspx

But as you can see the post based on preview 2 and there's some breaking changes from preview 2 to preview 3.

So I updated the tutorial to preview 3. You can download the tutorial here.

Deployment

You don't need to any deployment job to run this project.

Just load the project and run(or debug) the project.

Because of my lack of skill and time, I didn't make the project run on the IIS.

I think there's some deployment issues with silverlight and WCF.

But I couldn't figure that out.

I just wanted share my work.

But it's not reader-friendly article, I'm sorry about that.

If you have any question, just let me know. :)

Hope this helps. :)

Points of Interest

I have learned that MVC is not just a technology, it's a way of thinking and a way of view of how to solve problems.

History

First vesion. :)

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here