Office Web Component v11.0 Spreadsheet And AJAX Interoperatibility Part 1

• Download OWCAJAXDemo - 3.92 KB

Introduction

Office Web Component (OWC) are a group of OLE classes implemented as ActiveX controls in Microsoft Office 2000, Office XP and Office 2003. This ActiveX controls can be plugged into web pages, Visual Basic and VBA forms, Windows forms or programmed in-memory. The OWC can be used by any COM-compliant Component Object Model programming language. Sometimes in our Application we may require a feature of Excel Spreadsheet with minimum level of functionality in such cases OWC is the solution to our problem.

Note: OWC is not available for Design Time toolbox in Visual studio .Net.

System Requirement

http://www.microsoft.com/downloads/details.aspx?FamilyId=7287252C-402E-4F72-97A5-E0FD290D4B76&displaylang=en

Or just search for “Office Web Component v11.0 Download” , yeah I trust ‘Google’ that it would provide us with the exact result if Microsoft does not change the location of the download. The important point to note here is, that the server does not require to install microsoft Excel. Neither the client.

Implementation

Once you have installed the office web component, use the tag to insert component control on to your aspx page.

Blocks of code should be set as style "Formatted" like this:

<object classid="clsid:0002E559-0000-0000-C000-000000000046" id="sp" width="100%" style="height: 300px">
<param name="XMLData" value="<a></a>" />
</object>

        

Note: OWC version 10 and 11 appear disabled in Visual Studio 2005. For more information click

http://connect.microsoft.com/VisualStudio/feedback/ViewFeedback.aspx?FeedbackID=114448

Using OWC Activex Control with AJAX:

This is helpful when one wants to save spreadsheet content of OWC into server side database. This requires exposing client side OWC to server side which is best achieve using Ajax implementation. The OWC renders spreadsheet data into XML data. This xml data is stored in database table. When this xml data is retrieved back to front-end it gets rendered as spreadsheet data.

Step 1

.ASPX

<object classid="clsid:0002E559-0000-0000-C000-000000000046" id="sp" width="100%" style="height: 300px">
<param name="XMLData" value="<a></a>" />
</object>

<input type="button" value="Save" onclick="SaveTemplate()" class="ButtonStyle" />

The above code will insert and OWC control in the page. The control displays the spreadsheet. For storing the data in the database I have used AJAX. The javascript function does the post back to the server. At the same time it saves the XMLData in the server side hidden variable and this data is stored into database.

 
function LoadTemplate()
    {  
  
    try
    {
            XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
            var spreadsheet = document.getElementById("sp");
            
            if(XMLHttpRequestObject) 
            {                         
                var documenttype = document.getElementById("Select1")
                XMLHttpRequestObject.open("POST", "UpdateTemplate.aspx?operation=loadTemplate");      
                XMLHttpRequestObject.onreadystatechange = function ()
                {
                    if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) 
                    {
                           spreadsheet.XMLData = XMLHttpRequestObject.responseText;                      
                           //alert(XMLHttpRequestObject.readyState );
                    }
                }            
                XMLHttpRequestObject.send(null);
                document.getElementById('<%= lblMessage.ClientID %>').innerText=XMLHttpRequestObject.responseText;
            }                  
          }
          catch(err)
          {}
            
    }
  
 

Step 2

CODE BEHIND

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Try

            Dim strOperation As String = String.Empty
            strOperation = Request("operation")


            If strOperation = "save" Then
                Dim streamReader As New System.IO.StreamReader(Request.InputStream)
                Dim spreadsheetdata = streamReader.ReadToEnd() '' this this needs to be updated in teh database
                SaveTemplate(spreadsheetdata)

                Response.Write("DataSaved")
                Response.End()
            End If

        Catch ex As Exception
            'Response.Write("error occured")
            'Response.End()
        End Try
    End Sub

Wrapping up

Office web component is a good tool to get excel type spreadsheet feature onto your web page rather than using the excel object and creating spreadsheet at runtime. The later approach is tedious and not user friendly. This involves creating new component altogether. OWC really saves significant amount of development time and simulate real time excel worksheet on web.

Any Idea, Suggestion or References on similar topics will surely add values to our learning.

For more information you can contact me on gautams.mail@gmail.com