[CLOSED] Using a Component Loader to render a Usercontrol with Parameters

[xtoolz]

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]

Hi @xtoolz,

It should be done this way.

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

ComponentLoader.ToConfig(userControl);

[xtoolz]

Ok, so far...

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

Peter

userControl.CustomProperty = "some value";

[Daniil]

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]

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]

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>