User ID:
Password:
Remember Me:
Forgot Password?
Not a member?
Click here for more information and to register.

    Binding Data to Silverlight 4.0 Controls Using ASP.NET MVC Framework 2.0



    Introduction

    Silverlight is a browser plugin that promotes a collaborative development environment of rich online media content that enables developers and designers alike to integrate multimedia and graphics into web pages within the context of the managed environment of Microsoft .NET framework. Over the past few years, Silverlight, formerly known as Windows Presentation Foundation (WPF), has quickly become the technology of choice for developing the next generation of cross-browser, cross-platform Rich Internet Applications (RIAs). ASP.NET MVC Framework is a platform that enables you to design and implement applications that are based on the MVC design pattern. This article takes a look at how ASP.NET MVC Framework 2.0 applications can be used to bind data to Silverlight 4.0 data controls.

    Pre-requisites

    To execute the code examples illustrated in this article, you should have the following installed in your system:

    • ASP.NET MVC 2.0
    • Microsoft Visual Studio 2008

    Alternatively, you can have Microsoft Visual Studio 2010 installed in your system--you'll get the ASP.NET MVC Framework and the necessary templates you need to work embedded there.

    Before we delve deep into implementing an application that would demonstrate how to integrate Silverlight 4.0 and ASP.NET MVC Framework 2.0, let's take a quick tour of a few basic concepts.

    What is the ASP.NET MVC Framework?

    The ASP.NET MVC Framework is based on the proven time tested Model View Controller (MVC) Design Pattern and provides you a platform for designing and implementing web applications where you can have a cleaner separation of concerns, better code organization, seamless extensibility, scalability and code reuse. Applications designed using the ASP.NET MVC Framework is easier to test and maintain. The Model View Controller Design Pattern comprises mainly of three components: the model to store the data and business components of the application, the view to present data to the user and the controller to integrate all the components nicely.

    Implementing a Sample Application

    In this section we will implement a sample application that would use Silverlight 4.0 to present data to the user in a data grid. When you create a new Silverlight project, you have the option of choosing ASP.NET MVC as its host.The Silverlight 4.0 application will use an ASP.NET MVC 2.0 application as its host. In essence, Json data returned from the ASP.NET MVC application will be data bound to a Silverlight 4.0 data grid.

    In this example we will make use of the AdventureWorks sample database for SQL Server 2008. To implement an application that uses ASP.NET MVC 2.0 to bind data to a Silverlight 4.0 data grid, follow these steps:

    1. Open Visual Studio 2008/2010 IDE
    2. Click on File -> New -> Project
    3. Select Silverlight Application from the list of the project templates displayed

      A list of the project templates displayed, choose Silverlight
      (Full Size Image)
      Figure 1

    4. Select ASP.NET MVC Web Project as a host for the Silverlight application

      This screenshot shows where Select ASP.NET MVC Web Project as a host for the Silverlight application
      (Full Size Image)
      Figure 2

    5. Refrain from creating a Unit Test Project as we wouldn't be discussing anything on how we can do unit tests in this article

      Refrain from creating a Unit Test Project
      (Full Size Image)
      Figure 3

      Here's how the Solution Explorer would look like:

      The Solution Explorer should look like this
      Figure 4

    6. Right-click on the models folder in the ASP.NET MVC web project and select LINQ to SQL classes to create a data context for the AdventureWorks database
    7.  ASP.NET MVC web project and select LINQ to SQL classes
      (Full Size Image)
      Figure 5

    8. Create a new Controller class and name it as CustomerController. Paste the following code for the List action method into this class:
    9.            public ActionResult List()
                 {
                     MyDataClassesDataContext dataContext = new MyDataClassesDataContext();
                     var customers = from c in dataContext.Customers
                                select new
                                {
                                    c.CustomerID,
                                    c.AccountNumber
                                };
                     return Json(customers,JsonRequestBehavior.AllowGet);
                 }
       



    Keywords: MVC, ASYNCHRONOUS, SILVERLIGHT 4, ASP.NET MVC, ASP.NET MVC FRAMEWORK 2.0,

    About the Author

    Microsoft Most Valuable Professional, Author and Speaker. Featured in "MSDN Featured Developer of the Fortnight (India)" a number of times. Winner of Community Credit Awards at www.community-credit.com several times. Authored numerous books and articles in Microsoft .NET and its related technologies. Authored the following books:-- ASP.NET 4.0 Programming (Mc-Graw Hill Publishing) Entity Framework Tutorial (Packt Publishing) Pro Sync Framework (APRESS) Sams Teach Yourself ASP.NET Ajax in 24 Hours (Sams Publishing) ASP.NET Data Presentation Controls Essentials (Packt Publishing)


    IT Offers


    Top Authors