The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

UserControlLoader handling events define in User Control

Page 1 of 2 12 LastLast
  1. #1

    UserControlLoader handling events define in User Control

    Since moving the UserControl into a UserControlLoader, my events are not firing. I have created a sample as best I can to show the issue. Basically my UserControl raises an event that the containing page handles, which worked prior to moving it into a UserControlLoader for the issue linked below. I think the problem is basically before I had the actual user control defined in the page and now I just have a reference to the UserControlLoader and not the actual UserControl. Just not sure how to define the handler for the event in the containing page.

    This is a result of having to use UserControlLoader instead of a defined user control inside of a Content tag, see:
    http://forums.ext.net/showthread.php...a-user-control

    UserControl
    <%@ Control Language="vb"%>
    
    <script runat="server">
    
        Partial Public Class QSearch
            Inherits System.Web.UI.UserControl
    
            Public Event Selected As EventHandler
    
            Public Class QuickSearchEventArgs
                Inherits Ext.Net.DirectEventArgs
    
                Public SelectedEntity As String
    
                Public Sub New(extraParams As Ext.Net.ParameterCollection)
                    MyBase.New(extraParams)
                End Sub
    
            End Class
    
            Public Sub Results_Select(ByVal sender As Object, ByVal e As Ext.Net.DirectEventArgs)
                Dim value = e.ExtraParams("Key")
                Dim params As New Ext.Net.ParameterCollection()
                params.Add(New Ext.Net.Parameter("SameWindow", True))
                Dim args As New QuickSearchEventArgs(params) With {
                        .SelectedEntity = "x"
                        }
                RaiseEvent Selected(Me, args)
            End Sub
    
        End Class
    </script>
    
    <ext2:ComboBox 
        ID="Results" 
        runat="server" 
        ValueField="Key"
        TypeAhead="false" 
        LoadingText="Searching..."
        HideTrigger="true" 
        EmptyText="Type to Search" 
        QueryDelay="1500" 
        QueryCaching="false"
        MinChars="1" 
        Border="false"
        Width="920" 
        Height="38">
    
        <Store>
            <ext2:Store ID="Store1" runat="server">
                <Model>
                    <ext2:Model runat="server" IDProperty="Value">
                        <Fields>
                            <ext2:ModelField Name="Text" />
                            <ext2:ModelField Name="Value" />
                        </Fields>
                    </ext2:Model>
                </Model>
            </ext2:Store>
        </Store>
        <Items>
            <ext2:ListItem Text="Text1" Value="1" />
            <ext2:ListItem Text="Text2" Value="2" />
            <ext2:ListItem Text="Text3" Value="3" />
        </Items>
        <DirectEvents>
            <Select OnEvent="Results_Select">
                <EventMask ShowMask="true" Target="Page" />
                <ExtraParams>
                    <ext2:Parameter Name="Key" Value="testing" Mode="Raw" />
                </ExtraParams>
            </Select>
        </DirectEvents>
     </ext2:ComboBox>
    Main page
    <%@ Page Language="vb" %>
    
     <script runat="server">
    
         Protected WithEvents QuickSearch As Qsearch???
         Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
         End Sub
         Private Sub QuickSearch_Selected(sender As Object, e As QSearch.QuickSearchEventArgs) Handles QuickSearch.Selected
    
             Ext.Net.X.AddScript("alert('test');")
         End Sub
    
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Simple Combo</title>
    </head>
    <body>
     
        <ext2:ResourceManager ID="ResourceManager" runat="server" />
    
        <ext2:Window ID="Window1" runat="server" Visible="true" Maximized="true" Padding="5" Resizable="true" MinHeight="700" MinWidth="500" Closable="false">
            <TopBar>
                <ext2:Toolbar ID="Toolbar1" runat="server">
                    <Items>
    
                        <ext2:Button ID="QuickLaunchReport" runat="server" Text="This does not work" >
                            <Menu>
                                <ext2:Menu ID="QuickLaunchReportMenu" runat="server" RenderToForm="true" Width="450" ShowSeparator="false">
                                    <Items>
                                        <ext2:Panel runat="server">
                                            <Items>
                                                <ext2:UserControlLoader runat="server" ID="UCQuickSearch" UserControlID="QuickSearch" Path="QSearch.ascx"></ext2:UserControlLoader>
                                            </Items>
                                        </ext2:Panel>
                                    </Items>
                                </ext2:Menu>
                            </Menu>
                        </ext2:Button>
    
                     </Items>
                </ext2:Toolbar>
            </TopBar>
    
            <Items>
                <ext2:Panel ID="pnlSetDefaults" runat="server">
                   <Items>
      
                   </Items>
                </ext2:Panel>
            </Items>
        </ext2:Window>
    
    </body>
    </html>
  2. #2
    Hello @rmelancon!

    Your code seems simple enough, thanks!

    But I'm getting errors on the lines 5 and 8 of your "main page" code. Type 'Qsearch' is not defined and QSearch.QuickSearchEventArgs, respectively.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Well that's kind of the problem... when the control is added with a directive and content tag, ie:
    <%@ Register TagPrefix="uc" TagName="test" Src="QSearch.ascx" %>
            <Content>
                <uc:test ID="QuickSearch" runat="server" />
            </Content>
    I can create the event handler with:

    Private Sub QuickSearch_Selected(sender As Object, e As QSearch.QuickSearchEventArgs) Handles QuickSearch.Selected
        Ext.Net.X.AddScript("alert('test');")
    End Sub
    Which works because the control is defined within the page (in designer.vb file) as:
    Protected WithEvents QuickSearch As Global.Qsearch
    Now that I have to use the UserControlLoader to get around the bug referenced above, I no longer have a reference to the control I'm loading, just the UserControlLoader. So I'm trying to figure out how to add a handler to the control loaded with UserControlLoader.

    Is this making sense?
  4. #4
    Got it, Qsearch was meant to be a reference to the component in the control. But to me the code you defined as the page does not mention "Qsearch" as the ID of anything at any moment. So that's not going to make it to the designer nor to the code behind in any way.

    I'll give another look at it with this information and will see what can be done in regards to it. At first, it looks like the component will have to be caught indirectly as instructed in this post.

    Will post a follow-up here soon.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hello again!

    Another consideration on your sample code:

    The user control code does not work when I try to use it via the normal user control mechanism (thru the Register Src tag). You defined a sub-class in the script runat="server" block. That block is automatically wrapped in the own page class name. So you created something like My_Webform_Page.QSearch (sub-class of the web forms page). This results in the event not being located at all. The Inherits part is also not supported. The server side script block should look like something like this:

    <script runat="server">
        Public Event Selected As EventHandler
        (...)
    </script>
    To this point, I could get the Results_Select() event (your control code, line 21) to be triggered using it with ext:UserControlLoader.

    But it is still not clear to me how you want to bind the QuickSearch_Selected() event to the combo box.

    Can you review your example like the other thread, and leave a copy of the component the way it was working for you? You may need to fix your user control code and the main page code, but I think no second user control nor anything else is necessary.

    I am not sure how line 5 of your main page code should "see" the user control class, for example, if there's no designer.vb nor .aspx.vb, but script runat="server" in the page..
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Thanks, I will give those a try. Sometimes it is hard to strip out an example from a very complex page with code behind etc. to show the problem and that's what I'm running into here. I will let you know, thanks.
  7. #7
    Ok, so I could not get the problem defined properly without using code behind files, but here it is (with code behinds) using the registered usercontrol. This is what I'm trying to get working with the UserControlLoader. Note that this doesn't fire the event because of the original bug we are trying to work around.

    User Control
    <%@ Control Language="vb" AutoEventWireup="false" CodeBehind="EventProblemControl.ascx.vb" Inherits="Adhesion.Web.EventProblemControl" %>
    
    <ext2:ComboBox 
        ID="Results" 
        runat="server" 
        ValueField="Key"
        TypeAhead="false" 
        LoadingText="Searching..."
        HideTrigger="true" 
        EmptyText="Type to Search" 
        QueryDelay="1500" 
        QueryCaching="false"
        MinChars="1" 
        Border="false"
        Width="920" 
        Height="38">
    
        <Store>
            <ext2:Store ID="Store1" runat="server">
                <Model>
                    <ext2:Model runat="server" IDProperty="Value">
                        <Fields>
                            <ext2:ModelField Name="Text" />
                            <ext2:ModelField Name="Value" />
                        </Fields>
                    </ext2:Model>
                </Model>
            </ext2:Store>
        </Store>
        <Items>
            <ext2:ListItem Text="Text1" Value="1" />
            <ext2:ListItem Text="Text2" Value="2" />
            <ext2:ListItem Text="Text3" Value="3" />
        </Items>
        <DirectEvents>
            <Select OnEvent="Results_Select">
                <EventMask ShowMask="true" Target="Page" />
                <ExtraParams>
                    <ext2:Parameter Name="Key" Value="testing" Mode="Raw" />
                </ExtraParams>
            </Select>
        </DirectEvents>
     </ext2:ComboBox>
    User Control CodeBehind
    Public Class EventProblemControl
        Inherits System.Web.UI.UserControl
    
        Public Event Selected As EventHandler
    
        Public Class QuickSearchEventArgs
            Inherits Ext.Net.DirectEventArgs
    
            Public SelectedEntity As String
    
            Public Sub New(extraParams As Ext.Net.ParameterCollection)
                MyBase.New(extraParams)
            End Sub
    
        End Class
    
        Public Sub Results_Select(ByVal sender As Object, ByVal e As Ext.Net.DirectEventArgs)
            Dim value = e.ExtraParams("Key")
            Dim params As New Ext.Net.ParameterCollection()
            params.Add(New Ext.Net.Parameter("SameWindow", True))
            Dim args As New QuickSearchEventArgs(params) With {
                        .SelectedEntity = "x"
                        }
            RaiseEvent Selected(Me, args)
        End Sub
    
    End Class
    Main Page
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="XXMain.aspx.vb" Inherits="Adhesion.Web.XXMain" %>
    <%@ Register TagPrefix="uc" TagName="QSearch" Src="~/TestPages/EventProblemControl.ascx" %>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Simple Combo</title>
        <script type="text/javascript">
        </script>
    </head>
    <body>
     
        <ext2:ResourceManager ID="ResourceManager" runat="server" />
    
        <ext2:Window ID="Window1" runat="server" Visible="true" Maximized="true" Padding="5" Resizable="true" MinHeight="700" MinWidth="500" Closable="false">
            <TopBar>
                <ext2:Toolbar ID="Toolbar1" runat="server">
                    <Items>
    
                        <ext2:Button ID="QuickLaunchReport" runat="server" Text="This does not work" >
                            <Menu>
                                <ext2:Menu ID="QuickLaunchReportMenu" runat="server" RenderToForm="true" Width="450" ShowSeparator="false">
                                    <Items>
                                        <ext2:Panel runat="server">
                                            <Content>
                                                <uc:QSearch ID="QuickSearch" runat="server" />
                                            </Content>
    <%--                                        <Items>
                                                <ext2:UserControlLoader runat="server" ID="UCQuickSearch" UserControlID="QuickSearch" Path="QSearch.ascx"></ext2:UserControlLoader>
                                            </Items>--%>
                                        </ext2:Panel>
                                    </Items>
                                </ext2:Menu>
                            </Menu>
                        </ext2:Button>
    
                     </Items>
                </ext2:Toolbar>
            </TopBar>
    
            <Items>
                <ext2:Panel ID="pnlSetDefaults" runat="server">
                   <Items>
      
                   </Items>
                </ext2:Panel>
            </Items>
        </ext2:Window>
    
    </body>
    </html>
    Main Page Codebehind
    Public Class XXMain
        Inherits System.Web.UI.Page
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
        End Sub
        Private Sub QuickSearch_Selected(sender As Object, e As EventProblemControl.QuickSearchEventArgs) Handles QuickSearch.Selected
            Ext.Net.X.AddScript("alert('test');")
        End Sub
    
    End Class
  8. #8
    Your new sample does not work on my side.

    If I run it as-is, what I get is this:
    Click image for larger version. 

Name:	001-second_sample_result.png 
Views:	2 
Size:	1.3 KB 
ID:	24814

    I understand that's exactly the issue mentioned in another thread but I believe the problem we are dealing with here is that you can write an user control and handle/bind code behind events to it but can no longer do when you use it when adding the component as an ext:UserControlLoader.

    So, I just tried moving the custom control outside the window, making the window closable, so I could actually interact with the combo box. But then a JavaScript error triggered. Is the menu dismissing the combobox issue required here? Can't we just place the combo box inside a panel or container and test it with both <Content> using the user control directly and then <Items> with ext:UserControlLoader?

    Besides, I see you are using ext2 prefix. Maybe it would help clear and isolate the usage if you drew the test samples in a fresh project, using default Ext.NET NuGet package installation.

    I'm sorry this reply may not be very helpful, but without being able to reproduce the issue, specially on this very specific case, it is difficult to give any better answer.

    EDIT: Sorry, forgot to add the result I am getting while trying to trigger the event on the lone control when I move it outside the window:
    Click image for larger version. 

Name:	002-second_sample_control_outside.png 
Views:	2 
Size:	6.9 KB 
ID:	24815

    Seems the ExtraParameter you set up is not supposed to work at all, the way it was written...
    Last edited by fabricio.murta; Jan 13, 2017 at 10:11 PM.
  9. #9
    The ext2 is because we have to namespace ext.net version 1 because the breaking changes from version 1 to 2 were too numerous for us to undertake upgrading our entire site/application. So we recompiled and namespace version one and use the ext2 directive for the upgraded ext.net componenents.

    I will figure out why the example is not behaving properly on your end and post an update. Thanks for the help so far.
  10. #10
    Okay, we're looking forward for the test case.

    May I suggest you something?.. Either use the Ext.NET examples explorer project, or just create a clean project and install the Ext.NET NuGet Package.

    If you are building Ext.NET from sources you have several approaches you can follow to then add it to the fresh project:

    1. you can build it in Release mode and grab the dumped NuGet package you want (under src/bin/NuGet). You may set up the NuGet output folder as a NuGet repository in your Visual Studio's NuGet package manager, or copy the package files to your previously set up (if any) NuGet repository and use it.
    2. install latest NuGet package and then just replace the .dll files from the sources (you'd need to update at least the Newtonsoft.Json package if you had 4.1 NuGet and is trying to run current GitHub build).

    For Examples explorer, if using it from Ext.NET sources (instead of NuGet), switch it to the Development configuration and ensure you clone both Premium and Ext.NET.Examples repositories to the same folder, and Build Ext.NET in the Debug configuration, so examples explorer can find the updated dlls without further changes.

    Well, that was just a suggestion that I believe could make your life easier. You should be fine just by running the clean project with stable NuGet package.
    Fabrício Murta
    Developer & Support Expert
Page 1 of 2 12 LastLast

Similar Threads

  1. Code behind content handling (from client events)
    By fabricio.murta in forum 2.x Help
    Replies: 5
    Last Post: Oct 22, 2014, 7:26 AM
  2. Replies: 1
    Last Post: Sep 28, 2014, 8:36 AM
  3. Replies: 3
    Last Post: Sep 05, 2013, 9:18 AM
  4. Replies: 1
    Last Post: Jan 28, 2013, 6:26 AM
  5. [CLOSED] Direct events in user control
    By tiramisu in forum 1.x Premium Help
    Replies: 8
    Last Post: Dec 13, 2010, 12:34 PM

Posting Permissions

Subscribe now to get the latest Ext.NET happenings in our newsletter.