AspPageBox CodeSample - Communicate with hosting Visual WebGui application from a WebForm within an AspPageBox

From Visual WebGui Wiki

Jump to: navigation, search

Contents

Overview

This sample will show how to fire an event from a WebForm to the hosting Visual WebGui AspPageBox. This is a very simple sample, but does demonstrate the basics you need to know of when in need of such communications.

Please note that this codesample is written for Visual WebGui version 6.4 and later and will not work on earlier versions (see 6.3 section at bottom).

The Aspx WebForm

When creating Aspx WebForms, the pages you create do by default inherit from System.Web.UI.Page. In order to have Visual WebGui specific attributes available within the WebForm, you need to change the inheritance so that your WebForm inherits from Gizmox.WebGUI.Forms.Hosts.AspPageBase. For the Aspx code, this is exactly the same, but does make the Visual WebGui functionality and properties available.

For your convenience, you should also include some Visual WebGui JavaScript interface code in your WebForm, which makes the Visual WebGui JavaScript library more easy to address. The JavaScript to include is Resources.Gizmox.WebGUI.Forms.Skins.CommonSkin.Interfaces.js.wgx, where the "wgx" extension will be dependend on what extension you use for your application.

For our test case, we will be using an Aspx WebForm with a TextBox and a Button, and when you click the button, the text within the TextBox will be transmitted to your Visual WebGui application.

The code for the WebForm loks like this: 

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb" Inherits="IssueAppVS2008_VB.WebForm2" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script src="Resources.Gizmox.WebGUI.Forms.Skins.CommonSkin.Interfaces.js.wgx" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
// <!CDATA[
        function SendMessage() {
            var strMessage = document.getElementById("TextBox1").value;
            var objEvent = VWG.Events.CreateEvent("<%= PageContext.ID %>", "message");
            VWG.Events.SetEventAttribute(objEvent, "messagetext", strMessage);
            VWG.Events.RaiseEvents();
        }
// ]]>
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
 
        <input id="Button1" type="button" value="Send Message" onclick="return SendMessage()" />
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </div>
    </form>
</body>
</html>

About the WebForm code

We already mentioned the inclusion of the JavaScript from Resources.Gizmox.WebGUI.Forms.Skins.CommonSkin.Interfaces.js.wgx. Including this script, will make the "VWG" object (namespace) available for you to use in your scripts, as you can see in the code's SendMessage JavaScript function.

The "<%=" is a signal to the Aspx preparser to replace  the contents that follow by evaluating the expresson. In our case we use "<%= PageContext.ID %>" to get the ID of the containing Visual WebGui AspPageBox, which we will need here to be able to fire out JavaScript event towards the correct Visual WebGui control. If you view the Html code within your browser, you will see that the Aspx parser has replaced this with a literal string, which is the Id of our hosting AspPageBox.

The SendMessage JavaScript function follows Visual WebGui standards of creating and raising events. First it retrieves the current value of TextBox1, and then it creates the actual event object. Parameters to that object are the ID of the control the event will be fired at (see last paragraph) and the second parameter is the user selected name that you want to give your event. In this case we choose to name the event "message". The name of the event will be relevant when you write the FireEvent() override for you AspPageBox which you will see later.

The next task of the SendMessage function is to set an event attribute that will carry our message text to the AspPageBox. You can declare as many attributes as you like and you can select their names. They will then be received within the FireEvent() override that we still have not discussed. In our case we choose to name the attribute "messagetext" and the value will be the contents of the TextBox on the form.

Finally you call RaiseEvents() that will actually fire the event towards the control you gave as a parameter to the CreateEvent() function.

A potentially dangerous request

In some cases, ASP.NET's request validation will decide that requests made in this manner are potentially cross-site scripting attacks, decides it's a dangerous request and gives an error "A potentially dangerous Request.Form value was detected from the client". Further information can ge found here. In order to get rid of that error, you may need to replace the first line of the WebForm to look like this:

<%@ Page Language="vb" AutoEventWireup="false" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb" Inherits="IssueAppVS2008_VB.WebForm2" %>

The Form Code

VB.NET code 

Public Class Form1
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Dim a As MyAspxBox = New MyAspxBox
        a.Path = "WebForm2.aspx"
        a.Dock = DockStyle.Fill
        Me.Controls.Add(a)
    End Sub
End Class
 
Public Class MyAspxBox
    Inherits Gizmox.WebGUI.Forms.Hosts.AspPageBox
 
    Protected Overrides Sub FireEvent(ByVal objEvent As Gizmox.WebGUI.Common.Interfaces.IEvent)
        If objEvent.Type = "message" Then
            Dim s As String = objEvent("messagetext")
            MessageBox.Show(s)
        Else
            MyBase.FireEvent(objEvent)
        End If
    End Sub
End Class

C# Code 

public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
 
        private void Form1_Load(object sender, EventArgs e)
        {
            MyAspxBox a = new MyAspxBox();
            a.Dock = DockStyle.Fill;
            a.Path = "WebForm2.aspx";
            this.Controls.Add(a);
        }
    }
 
    public class MyAspxBox : Gizmox.WebGUI.Forms.Hosts.AspPageBox 
    {
        protected override void FireEvent(Gizmox.WebGUI.Common.Interfaces.IEvent objEvent)
        {
            if (objEvent.Type == "message")
            {
                string s = objEvent["messagetext"];
                MessageBox.Show(s);
            }
            else
            {
                base.FireEvent(objEvent);
            }
        }
    }

About the form code

In order to receive custom events fired from JavaScript code, you will need to create a new class inheriting from AspPageBox and overriding the FireEvent method.

The FireEvent method will be called after you call RaiseEvents() from your JavaScript code, and you should see the resemblence in what you are doing here, meaning that you are actually "unpacking" what you did "pack" inside of the event attributes in your JavaScript code.

Version 6.3 specifics

With only minor changes, the above code can be made to work with version 6.3 of Visual WebGui. With references to the code snippets above, please change the following to have a working solution for version 6.3.

WebForm code

You only need to change two things here.

  • The Include script path should be changed to:
<script src="Resources.Gizmox.WebGUI.Forms.Commons.Interfaces.js.wgx" type="text/javascript"></script>
  • The PageContext.ID should be replaced with PageContext.Guid, so your JavaScript function should look like this:
function SendMessage() {
    var strMessage = document.getElementById("TextBox1").value;
    var objEvent = VWG.Events.CreateEvent("<%= PageContext.Guid %>", "message");
    VWG.Events.SetEventAttribute(objEvent, "messagetext", strMessage);
    VWG.Events.RaiseEvents();
}

Visual WebGui code

The Visual WebGui code (code-behind) can be used unchanged for version 6.3




Retrieved from "http://wiki.visualwebgui.com/pages/index.php/AspPageBox_CodeSample_-_Communicate_with_hosting_Visual_WebGui_application_from_a_WebForm_within_an_AspPageBox"
Personal tools