PDA

View Full Version : [CLOSED] Using a Component Loader to render a Usercontrol with Parameters



xtoolz
Jun 09, 2013, 4:40 PM
Hi all

I'd like to use a ComponentLoader to load a UserControl. The UserControl need's to have it's Parameters.
So I tried this :


ComponentLoader.Render("~/Secure/Modules/WinUser.ascx?userId=" + userId);

The Result is a 404 Error. Calling the Control w/o Parameters works.
Is there a Limitation for the ComponentLoader ? What can I use as a Work around ?

Thanks
Peter

Daniil
Jun 10, 2013, 5:35 AM
Hi @xtoolz,

It should be done this way.

UserControl userControl = (MyUserControl)this.LoadControl("TestUC.ascx");
userControl.CustomProperty = "some value";

ComponentLoader.ToConfig(userControl);

xtoolz
Jun 10, 2013, 6:35 AM
Ok, so far...

I assume 'CustomProperty' means the whole 'userId=" + userId' and enables the handling of n-Properites ?

Peter



userControl.CustomProperty = "some value";

Daniil
Jun 10, 2013, 11:19 AM
I am not sure that I understand you well, but here is what I meant.

User Control

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

<script runat="server">
public string CustomProperty1 { get; set; }

public string CustomProperty2 { get; set; }
</script>

<ext:Label runat="server" />

Load User Control

UserControl userControl = (MyUserControl)this.LoadControl("TestUC.ascx");
userControl.CustomProperty1 = "some value 1";
userControl.CustomProperty2 = "some value 2";

ComponentLoader.ToConfig(userControl);

xtoolz
Jun 11, 2013, 4:51 PM
Well, Ok so far - but...
I tried to implement that.

The UserControl - a Window


<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WinUser.ascx.cs" Inherits="XTOOLZ.Hostie.Web.Secure.Modules.WinUser" %>
<ext:Window ID="winUser" runat="server" Title="<%$ Resources:Resource, AddNewHostGroup %>" Border="false" Closable="False" Icon="User" Height="350" Width="350" BodyPadding="5" Modal="true" Layout="Form">

<Items>
<ext:FieldSet ID="FieldSet1" runat="server" Border="false">
<Items>
<ext:TextField runat="server" ID="txtFullName" AnchorHorizontal="100%" FieldLabel="<%$ Resources:Resource, FullName %>" LabelAlign="Top" />
<ext:TextField runat="server" ID="txtUserName" AnchorHorizontal="100%" FieldLabel="<%$ Resources:Resource, UserName %>" LabelAlign="Top" />
<ext:TextField runat="server" ID="txtPassword1" AnchorHorizontal="100%" FieldLabel="<%$ Resources:Resource, Password %>" LabelAlign="Top" InputType="Password" AllowBlank="false">
<Listeners>
<ValidityChange Handler="this.next().validate();" />
<Blur Handler="this.next().validate();" />
</Listeners>
</ext:TextField>
<ext:TextField runat="server" ID="txtPassword2" AnchorHorizontal="100%" FieldLabel="<%$ Resources:Resource, PasswordConfirm %>" LabelAlign="Top" Vtype="password" InputType="Password" MsgTarget="Side">
<CustomConfig>
<ext:ConfigItem Name="initialPassField" Value="PasswordField" Mode="Value" />
</CustomConfig>
</ext:TextField>
<ext:FieldSet runat="server" ID="FieldSetRoles" Title="<%$ Resources:Resource, Roles %>" Collapsible="False" AnchorHorizontal="100%">
<Items>
<ext:CheckboxGroup ID="CheckboxGroup1" runat="server" ColumnsNumber="3" Vertical="True" AnchorHorizontal="100%">
<Items>
<ext:Checkbox runat="server" ID="chkAdmin" FieldLabel="<%$ Resources:Resource, Administrator %>" Width="150" LabelAlign="Top" />
<ext:Checkbox runat="server" ID="chkUser" FieldLabel="<%$ Resources:Resource, User %>" Width="150" LabelAlign="Top" />
<ext:Checkbox runat="server" ID="chkGuest" FieldLabel="<%$ Resources:Resource, Guest %>" Width="150" LabelAlign="Top" />
</Items>
</ext:CheckboxGroup>
</Items>
</ext:FieldSet>
</Items>
</ext:FieldSet>
</Items>
<Buttons>
<ext:Button runat="server" ID="cmdCancel" Text="<%$ Resources:Resource, Cancel %>">
<Listeners>
<Click Handler="closeWinUser()" />
</Listeners>
</ext:Button>
<ext:Button runat="server" ID="cmdSave" Text="<%$ Resources:Resource, Save %>" Icon="Disk">
<Listeners>
<Click Handler="saveUser()" />
</Listeners>
</ext:Button>
</Buttons>
</ext:Window>


The DirectMethod


[DirectMethod]
public string getUserEditWindow(string userId)
{
var ctrl = (WinUser)LoadControl("~/Secure/Modules/WinUser.ascx");
ctrl.UserId = Guid.Parse(userId);

return ComponentLoader.ToConfig(ctrl);
}

The Method Call


function handleUserEditCommand(command, record) {
var pnl = Ext.getCmp('pnlContent');

switch (command) {
case 'cmdEdit':
var ldr = pnl.loader;
ldr.DirectMethod = App.direct.getUserEditWindow(record.data.Id);
pnl.load();

break;

default:
}
};

And the Page where I want to Display the User Control


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="CSS/Main.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">

<%--Script Manager --%>
<asp:ScriptManager ID="ScriptManagement" runat="server">
<Scripts>
<asp:ScriptReference Path="~/JS/Main.js" />
<asp:ScriptReference Path="~/JS/Common.js" />
<asp:ScriptReference Path="~/JS/Translate.js" />
</Scripts>
</asp:ScriptManager>

<%--Ressource Manager --%>
<ext:ResourceManager ID="resMan" runat="server" ScriptMode="Debug" DisableViewState="False" StateProvider="Cookie">
<Listeners>
</Listeners>
</ext:ResourceManager>



<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
<Items>

<ext:Panel ID="pnlContent" runat="server" Border="true" BodyPadding="10" Region="Center">
<TopBar>
<ext:Toolbar runat="server" Height="50" EnableViewState="True" DefaultButton="cmdLogin">
<Items>
<ext:TextField ID="txtUsername" runat="server" FieldLabel="<%$ Resources:Resource, Username %>" AllowBlank="false" BlankText="Your username is required." Width="250" />
<ext:TextField ID="txtPassword" runat="server" InputType="Password" FieldLabel="<%$ Resources:Resource, Password %>" AllowBlank="false" BlankText="Your password is required." Width="250" />
<ext:Button ID="cmdLogin" runat="server" Text="<%$ Resources:Resource, Login %>" Icon="Accept">
<Listeners>
<Click Handler="login()" />
</Listeners>
</ext:Button>
<ext:Button ID="cmdLogout" runat="server" Text="<%$ Resources:Resource, Logout %>" Icon="LockDelete" Hidden="True">
<Listeners>
<Click Handler="logout()" />
</Listeners>
</ext:Button>
<ext:ToolbarFill />
<ext:ComboBox runat="server" ID="cboMenu" Hidden="True" DisplayField="Name" ValueField="Id" QueryMode="Local" TypeAhead="true">
<Store>
<ext:Store runat="server" ID="storeMenu">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Id" />
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
<Reader>
<ext:JsonReader />
</Reader>
</ext:Store>
</Store>
<Listeners>
<Select Handler="menuSelect(item,records)" />
</Listeners>
</ext:ComboBox>

</Items>

</ext:Toolbar>
</TopBar>
<BottomBar>

<ext:Toolbar runat="server">
<Items>
<ext:Label runat="server" ID="lblFullName" Hidden="True" Width="250" />
</Items>
</ext:Toolbar>
</BottomBar>
<Loader runat="server" AutoLoad="false" Mode="Component" ID="mainLoader">
<LoadMask ShowMask="true" />
</Loader>
</ext:Panel>

</Items>
<Listeners>
<AfterRender Handler="pageSetup()" />
</Listeners>
</ext:Viewport>

</form>
</body>
</html>

The Effect : Short flickering on the Screen, but no new Window.

The call like this (w/o the possibility to send parameters)

JS Call to a Hanlder Method


var pnl = Ext.getCmp('pnlContent');
pnl.loader.url = '../../Handler/ComponentHandler.ashx?mode=winUser';
pnl.loader.load();

And the Handler


ComponentLoader.Render("~/Secure/Modules/WinUser.ascx");

Works ...

Whats the missing part :-(

Peter

Baidaly
Jun 12, 2013, 2:49 AM
Hello!

Please, take a look at the following sample:

Control:



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

<ext:Window ID="winUser" runat="server" Title="123" Border="false" Closable="False" Icon="User" Height="350" Width="350" BodyPadding="5" Modal="true" Layout="Form">

<Items>
<ext:FieldSet ID="FieldSet1" runat="server" Border="false">
<Items>
<ext:TextField runat="server" ID="txtFullName" AnchorHorizontal="100%" FieldLabel="2123" LabelAlign="Top" />
<ext:TextField runat="server" ID="txtUserName" AnchorHorizontal="100%" FieldLabel="123" LabelAlign="Top" />
<ext:TextField runat="server" ID="txtPassword1" AnchorHorizontal="100%" FieldLabel="123" LabelAlign="Top" InputType="Password" AllowBlank="false">
<Listeners>
<ValidityChange Handler="this.next().validate();" />
<Blur Handler="this.next().validate();" />
</Listeners>
</ext:TextField>
</Items>
</ext:FieldSet>
</Items>
</ext:Window>


Page:


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

<%@ Import Namespace="Ext.Net.Examples.Examples.Panel.Basic.Loader" %>

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

<script runat="server">
[DirectMethod]
public string getUserEditWindow(string parameters)
{
Dictionary<string, string> prms = JSON.Deserialize<Dictionary<string, string>>(parameters);
var ctrl = (WinUser)LoadControl("WinUser.ascx");

return ComponentLoader.ToConfig(ctrl);
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
</head>
<body>
<ext:ResourceManager runat="server" SourceFormatting="True" />

<script>
function handleUserEditCommand(command, record) {
var pnl = Ext.getCmp('pnlContent');

switch (command) {
case 'cmdEdit':
var ldr = pnl.loader;
ldr.directMethod = App.direct.getUserEditWindow;
ldr.paramsFn = function () { return { "userId": "test" }; };
pnl.load();
break;

default:
}
};
</script>

<ext:Panel runat="server" ID="pnlContent">
<Loader
runat="server"
AutoLoad="false"
Mode="Component">
<LoadMask ShowMask="true" />
</Loader>
</ext:Panel>
</body>
</html>