PDA

View Full Version : [CLOSED] UserControl breakout



cwolcott
Apr 22, 2013, 7:00 PM
I am in the process of refactoring my code to break things apart. Here is a simple example of what I am trying to accomplish.

I am very weak in this area of coding.

I have a page (aspx) that based on a request type (Cat1 or Cat2) needs to populate a container with one of two user controls. The actual application has a lot more category choices and the user controls are not all comboboxs but contain various controls, but this should be a simple example to ask the question.

How can I populate the correct control (I have that working) and how when I click on description button can I ask the control to build a string representing the various control values?

OptionPage03.aspx


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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
[DirectMethod]
public static String LoadOptionsUserControl(Dictionary<string, object> extraParams)
{
var reqType = extraParams["ReqType"];
return ComponentLoader.ToConfig(String.Format("Options{0}.ascx", reqType));
}

protected void ClickBuildDescription(object sender, DirectEventArgs e)
{
// Would like to be able to ask the user control (Options01 or Options02) to
// return a description of what was selected in their control. Each control
// calculates the description a little differently.

String description = "How to call the control and have it return a description?";
X.Msg.Alert("Description from user control", description).Show();
}
</script>
<!DOCTYPE html >
<html>
<head id="Head1" runat="server">
<title>Load UserControls</title>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="BorderLayout">
<Items>
<ext:FormPanel runat="server" Region="North">
<Items>
<ext:RadioGroup ID="RequestTypesGroup" runat="server" FieldLabel="Request Types"
ColumnsWidths="100,100" AllowBlank="false">
<Items>
<ext:Radio runat="server" Name="Group" BoxLabel="Cat1" InputValue="01" />
<ext:Radio runat="server" Name="Group" BoxLabel="Cat2" InputValue="02" />
</Items>
</ext:RadioGroup>
</Items>
<Buttons>
<ext:Button runat="server" Text="Load" Icon="PluginGo" FormBind="true" Disabled="true">
<Listeners>
<Click Handler="App.ContainerOptions.load();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:FormPanel>
<ext:Panel runat="server" Title="Center">
<Items>
<ext:Container ID="ContainerOptions" runat="server" ClientIDMode="Static">
<Loader runat="server" Mode="Component" AutoLoad="false" DirectMethod="#{DirectMethods}.LoadOptionsUserControl">
<Params>
<ext:Parameter Name="ReqType" Value="#{RequestTypesGroup}.getChecked()[0].inputValue"
Mode="Raw" />
</Params>
</Loader>
</ext:Container>
</Items>
<Buttons>
<ext:Button runat="server" Text="Description" OnDirectClick="ClickBuildDescription" />
</Buttons>
</ext:Panel>
</Items>
</ext:Viewport>
</body>
</html>


Options01.ascx


<%@ Control Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">

// This is what I want to do, but not sure how to really access this."
public String BuildDescription () {

String description = "ABC";
// Eventually there will be other controls in this ascx, but for now
// just return the selected item.
return description;
}
</script>
<ext:FieldSet ID="FieldSetOptions" runat="server" ClientIDMode="Static" Title="Options" Collapsible="true">
<Items>
<ext:ComboBox runat="server" FieldLabel="Option01 Types" AllowBlank="false" Editable="false"
IndicatorIcon="BulletRed">
<Items>
<ext:ListItem Value="F" Text="Full" />
<ext:ListItem Value="P" Text="Partial" />
</Items>
</ext:ComboBox>
</Items>
</ext:FieldSet>


Options02.ascx


<%@ Control Language="C#"%>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
// This is what I want to do, but not sure how to really access this."
public String BuildDescription()
{
String description = "XYZ";
// Eventually there will be other controls in this ascx, but for now
// just return the selected item.
return description;
}
</script>
<ext:FieldSet ID="FieldSetOptions" runat="server" ClientIDMode="Static" Title="Options" Collapsible="true">
<Items>
<ext:ComboBox runat="server" FieldLabel="Option02 Types" AllowBlank="false" Editable="false"
IndicatorIcon="BulletRed">
<Items>
<ext:ListItem Value="One" Text="One" />
<ext:ListItem Value="Two" Text="Two" />
<ext:ListItem Value="Both" Text="Both" />
</Items>
</ext:ComboBox>
</Items>
</ext:FieldSet>

Daniil
Apr 23, 2013, 5:28 AM
Hi Chris,

Well, there is no way to access to a user control's method in your scenario.

When you use a ComponentLoader.ToConfig("something.ascx"), it just extracts Ext.NET items from that user controls, make JavaScript configs to be rendered on client. There is no a real server control.

If you need to have access to a user control's method you should create/render it in another way - using the LoadControl method. Also you will have to recreate that user control during each request. Here is an example of the scenario I am talking about.
http://examples2.ext.net/#/XRender/UserControl/UpdateContent/

Personally, I would try to implement it in a different way. I would render a user control the same way as you did, but into a FormPanel. Then submit that FormPanel to, for example, a generic handler (.ashx) or a WebService (.asmx). Generally, you could submit to a page, but that page will have to know about the format of data within a user control.

P.S. It is not related to the problem, just noticed. A BorderLayout requires a Center region. You should set up Region="Center" for the Panel.

Hope this helps.