PDA

View Full Version : [CLOSED] User Control (ascx) in a Window



sisa
Mar 21, 2013, 8:52 AM
Good morning all

Is it possible to show a User Control in a Window ? Do I need to wrap the control in a panel first ?

Regards
Peter

Daniil
Mar 21, 2013, 11:22 AM
Hello Peter,

It is not required to wrap. There are two approaches.

Example 1

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<%@ Register Src="~/TestUC.ascx" TagPrefix="uc" TagName="TestUC" %>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Window runat="server" Layout="FitLayout">
<Content>
<uc:TestUC runat="server" />
</Content>
</ext:Window>
</form>
</body>
</html>


Example 2

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Window runat="server" Layout="FitLayout">
<Items>
<ext:UserControlLoader runat="server" Path="TestUC.ascx" />
</Items>
</ext:Window>
</form>
</body>
</html>


Example User Control

<%@ Control Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<ext:Container runat="server" StyleSpec="background-color: green;" />

sisa
Mar 21, 2013, 1:30 PM
Hello Peter,

It is not required to wrap. There are two approaches.

Example 1

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<%@ Register Src="~/TestUC.ascx" TagPrefix="uc" TagName="TestUC" %>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Window runat="server" Layout="FitLayout">
<Content>
<uc:TestUC runat="server" />
</Content>
</ext:Window>
</form>
</body>
</html>


Example 2

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Window runat="server" Layout="FitLayout">
<Items>
<ext:UserControlLoader runat="server" Path="TestUC.ascx" />
</Items>
</ext:Window>
</form>
</body>
</html>


Example User Control

<%@ Control Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<ext:Container runat="server" StyleSpec="background-color: green;" />

I try it in codebehind with following code, but the usercontrol will not be rendered into the window
the window works with loadCentent("url")


With ContactSearchWindow
Dim ul As New Ext.Net.UserControlLoader
ul.Path = String.Format("../userControls/Declaration/DeclarationGrid.ascx")
.Items.Add(ul)
.Icon = Icon.Page
.Title = "todo"
.LoadContent()
.Hidden = False
End With

thanks for help

Daniil
Mar 21, 2013, 1:43 PM
Please provide a full sample how you are trying without the LoadContent call.

sisa
Mar 26, 2013, 10:37 AM
Please provide a full sample how you are trying without the LoadContent call.


Here is my example:



<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="LoadUserControl.aspx.vb" Inherits="TestApplikation.LoadUserControl" %>
<%@ Import Namespace="TestApplikation" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">


Private contactWindow As Ext.Net.Window = Nothing

Protected ReadOnly Property ContactSearchWindow As Ext.Net.Window
Get
If contactWindow Is Nothing Then
contactWindow = New Ext.Net.Window
With contactWindow
.ID = "Contact"
.Hidden = True
.Closable = True
.Resizable = False
Dim t As New Ext.Net.ComponentLoader
t.Mode = Ext.Net.LoadMode.Frame
.Loader = t
.Width = Unit.Pixel(1120)
.Height = Unit.Pixel(544)
.PageX = 40
.PageY = 40
.Title = "hhhhhhhh"
End With
End If
Return contactWindow
End Get
End Property

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

' If Not IsPostBack And Not ExtNet.IsAjaxRequest Then
Me.Controls.Add(ContactSearchWindow)
'End If

End Sub

<DirectMethod()>
Public Sub cmdShow(ByVal sender As Object, ByVal e As DirectEventArgs)
With ContactSearchWindow
Dim ul As New Ext.Net.UserControlLoader
ul.Path = String.Format("ElkeUserControl.ascx")
Dim con As ElkeUserControl = CType(ul.UserControls(0), ElkeUserControl)
con.QueryParameter = "baseQuery"
.Items.Add(ul)
' .LoadContent()
.Icon = Icon.Page
.Title = "todo"
.Hidden = False
End With
End Sub


</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<div>
<ext:Button ID="Button" runat="server" Text="Click">
<DirectEvents>
<Click OnEvent="cmdShow">
<ext:EventMask ShowMask="true" />
</Click>
</DirectEvents>
</ext:Button>
</div>
</form>
</body>
</html>


and the UserControl

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="ElkeUserControl.ascx.vb" Inherits="TestApplikation.ElkeUserControl" %>
<ext:Container ID="Container1" runat="server" Layout="FitLayout">
<Items>
<ext:Label runat="server" id="Test" Text="Hallo Elke"></ext:Label>
</Items>
</ext:Container>



Thanks for your help

Daniil
Mar 26, 2013, 12:38 PM
You should not use Loader and Items at the same time.

You specified the Loader to load some URL into a Window's as an iframe and, at the same time, you put the UserControlLoader into the Window's Items.

I am not sure what exactly you need to be in the Window.

Also it is incorrect to put a Window into the Page's Controls.

Me.Controls.Add(ContactSearchWindow)

It renders the Window outside the html tag.

Please put it into a form.

sisa
Mar 26, 2013, 2:30 PM
You should not use Loader and Items at the same time.

You specified the Loader to load some URL into a Window's as an iframe and, at the same time, you put the UserControlLoader into the Window's Items.

I am not sure what exactly you need to be in the Window.

Also it is incorrect to put a Window into the Page's Controls.

Me.Controls.Add(ContactSearchWindow)

It renders the Window outside the html tag.

Please put it into a form.



Hi Daniil,

you have given us two examples to load a Usercontrol.ascx into a Window.
The examples are in Markup. But I want to do it in Code Behind.

On my Page I have a Button and after the directmethod "click" a window should be opened. Inside the Window the usercontrol should be shown.


I have tested, putting the the Window in a form and eleminate the loader I havew the same result.



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

Me.form1.Controls.Add(ContactSearchWindow)

End Sub

Thanks.

Daniil
Mar 26, 2013, 4:35 PM
Well, to load the Window's Content on the fly, I would still suggest to use a Loader.

Example Page

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
[DirectMethod]
public string Load()
{
return ComponentLoader.ToConfig("Test.ascx");
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Window ID="Window1" runat="server">
<Loader
runat="server"
Mode="Component"
AutoLoad="false"
DirectMethod="#{DirectMethods}.Load" />
</ext:Window>

<ext:Button runat="server" Text="Load" Handler="App.Window1.load();" />
</form>
</body>
</html>


Example User Control

<%@ Control Language="C#" %>

<ext:Label runat="server" Text="Hello, Elke!" />

sisa
Mar 27, 2013, 10:14 AM
Well, to load the Window's Content on the fly, I would still suggest to use a Loader.

Example Page

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
[DirectMethod]
public string Load()
{
return ComponentLoader.ToConfig("Test.ascx");
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Window ID="Window1" runat="server">
<Loader
runat="server"
Mode="Component"
AutoLoad="false"
DirectMethod="#{DirectMethods}.Load" />
</ext:Window>

<ext:Button runat="server" Text="Load" Handler="App.Window1.load();" />
</form>
</body>
</html>


Example User Control

<%@ Control Language="C#" %>

<ext:Label runat="server" Text="Hello, Elke!" />



Hi Daniil,

thanks for your example.
It doesn't work in vb.net. I get an exception.



Zeitstempel: 27.03.2013 10:06:32
Fehler: TypeError: App.Window1.Loadx is not a function
Quelldatei: http://localhost:59574/LoadUserControl.aspx
Zeile: 16
<script type="text/javascript">
//<![CDATA[
Ext.net.ResourceMgr.init({id:"ResourceManager1",aspForm:"form1",theme:"gray"});Ext.onReady(function(){Ext.ns("App.direct");Ext.apply(App.direct, { Loadx:function(config){return Ext.net.DirectMethod.request("Loadx",Ext.applyIf(config || {}, {}));} });Ext.create("Ext.window.Window",{id:"Window1",hidden:false,loader:{id:"Loader1",autoLoad:false,renderer:"component",directMethod:"App.direct.Loadx"},renderTo:Ext.get("form1"),width:200});Ext.create("Ext.button.Button",{id:"Button",renderTo:"App.Button_Container",handler:function(){App.Window1.Loadx();},text:"Click"});});
//]]>
</script>



In C# it works.

Vladimir
Mar 27, 2013, 10:39 AM
What is 'Loadx'? Window has no such method, you have to use 'load' like in Daniil example

sisa
Apr 02, 2013, 1:12 PM
What is 'Loadx'? Window has no such method, you have to use 'load' like in Daniil example



Hi Daniil,
if I use Load I get an build error in PageLoad

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Event 'Load' cannot be found.

Daniil
Apr 02, 2013, 1:31 PM
Please provide a full test case to reproduce.

sisa
Apr 04, 2013, 2:20 PM
Please provide a full test case to reproduce.



<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="LoadUserControl.aspx.vb" Inherits="TestApplikation.LoadUserControl" %>
<%@ Import Namespace="TestApplikation" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">



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

End Sub

<DirectMethod()>
Public Function Load() As String
Return ComponentLoader.ToConfig("ElkeUserControl.ascx")
End Function


</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<div>
<ext:Window ID="Window1" runat="server">
<Loader ID="Loader1" runat="server" Mode="Component" AutoLoad="false" DirectMethod="#{DirectMethods}.Load" />
</ext:Window>
<ext:Button ID="Button" runat="server" Text="Click" Handler="App.Window1.Load();" >
</ext:Button>
</div>
</form>
</body>
</html>


and the userControl:


<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="ElkeUserControl.ascx.vb" Inherits="TestApplikation.ElkeUserControl" %>
<ext:Label runat="server" id="Test" Text="Hallo Elke"></ext:Label>


hope ypu will find a solution.

Daniil
Apr 04, 2013, 5:58 PM
The default namespace of DirectMethods is "App.direct".

Handler="App.direct.Load();"

sisa
Apr 05, 2013, 6:32 AM
The default namespace of DirectMethods is "App.direct".

Handler="App.direct.Load();"


Hi Daniil,
no, the same error again.
"EventLoad cannot be found"



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

End Sub

I have also tried to start the page without the "Handles Me.Load"
signature from vb.net. Now I have no compiler error, but the usercontrol could not be load.

the

Return ComponentLoader.ToConfig("ElkeUserControl.ascx")

doesn't load the usercontrol

Daniil
Apr 05, 2013, 9:02 AM
no, the same error again.
"EventLoad cannot be found"


Unfortunately, I am not a VB expert. So, I don't know why it happens. Maybe this can help.
http://www.vbforums.com/showthread.php?479932

Please use:

Handler="App.Window1.load();"

Note the lowercase "load".

Sorry, I misled you saying to replace with "App.direct.Load();".