[CLOSED] Loader's params null after panel has been activated

  1. #1

    [CLOSED] Loader's params null after panel has been activated

    I've had to change implementation of the AutoLoad for Loader as in the following ChangeLog's item.

    71. The Panel's AutoLoad property has been removed. Use the Loader one.
    It has the ComponentLoader type.

    The LoadConfig class hass been removed. Use the ComponentLoader one.

    71.1. Use DisableCaching instead of NoCache.
    71.2. Use Mode="Html" instead of Mode="Merge". It's by default.
    71.3. Use LoadMask.ShowMask instead of ShowMask.
    71.4. Use LoadMask.Msg instead of MaskMsg.
    71.5. Use Loader BeforeLoad and Load events instead of Panel
    BeforeUpdate and Update.
    71.6. Use AutoLoad instead of ManuallyTriggered.
    A replacement of ManuallyTriggered="true" is AutoLoad="false".

    The scenario is a card panel with three cards (panels) which the second one had an AutoLoad (Mode="IFrame") with a parameter which is being updated at the client side, this was working fine (see image below). Noticed even the 2nd panel gets activated its loader params are still persisted and can be modified at the client side.

    Click image for larger version. 

Name:	loader-params-3.png 
Views:	46 
Size:	53.1 KB 
ID:	25024

    After switching to Loader (Mode="Frame") approach although the panel gets properly activated the loader's params are now null with the following code (see image below). It seems as if the loader/panel hasn't load the parameters once activated. Once params aren't null, what's the proper way to update them now?

    Click image for larger version. 

Name:	loader-params-4.png 
Views:	67 
Size:	53.4 KB 
ID:	25025

    Also, I've been suspecting the previous AutoLoad mechanism automatically appended its parameters into the current request... is this correct? If so, can I assume the new Loader mechanism does the same or it behaves differently?

    In the example provided below it shows the loader's params being overwritten at the client side upon reload.

    DefaultTest.aspx
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Label1.Text = DateTime.Now.ToLongTimeString();
            }
        }
    
        public void SetParams_AndLoad(object sender, DirectEventArgs e)
        {
            this.MainPanel.Loader.Params["StateAbbr"] = "CA";
            this.MainPanel.Loader.Params["RandNumb"] = "1111111";
            this.MainPanel.LoadContent();
    
            ExtNet.MessageBox.Show(new MessageBoxConfig
            {
                Title = this.MainPanel.ID + " -- " +this.MainPanel.Loader.Url,
                Message = this.MainPanel.Loader.Params["StateAbbr"] + "<br/>" + this.MainPanel.Loader.Params["RandNumb"],
                Icon = MessageBox.Icon.INFO,
                Buttons = MessageBox.Button.OK
            });
    
            return;
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <script type="text/javascript">
    
            function setParamsAndLoad() {
                debugger;
                App.MainPanel.loader.params.StateAbbr = "AK";
                App.MainPanel.loader.params.RandNumb = "90222";
                //App.MainPanel.reload();
                App.MainPanel.load(App.MainPanel.loader.getConfig());
    
                Ext.Msg.show(
                       {
                           title: App.MainPanel.id + " -- " + App.MainPanel.loader.url,
                           msg: App.MainPanel.loader.params.StateAbbr + "<br/>" + App.MainPanel.loader.params.RandNumb,
                       });
                return true;
            }
    
        </script>
    
        <title>LOADERS TEST  --- Deferred Loading - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
        <style>
             .msg {
                border  : 1px solid #999;
                padding : 6px;
                width   : 250px;
                font-weight   : bold;
                text-align    : center;
                margin-bottom : 30px;
            }
    
            .msg em {
                font-style  : italic;
                font-weight : bold;
            }
        </style>
    </head>
    <body>
         <form runat="server">
             <ext:ResourceManager runat="server" />
    
             <div class="msg x-box-mc">
                  Main page creation time: <em><ext:Label ID="Label1" runat="server" /></em>
             </div>
             <hr />
             <h3>6. EPIC TEST</h3>
             <ext:Panel
                ID="MainPanel"
                runat="server"
                Title="Window"
                Width="600"
                Height="400">
                <Loader ID="MainPanelLoader" 
                    runat="server"
                    Url="Child.aspx?TestID=123"
                    Mode="Frame"
                    DisableCaching="false"
                    AutoLoad="true" 
                    RemoveAll="true">
                    <%--Mode="Frame"--%>
    
                    <LoadMask ShowMask="true" />
    
                     <Params>
                        <ext:Parameter Mode="Auto" Name="StateAbbr" Value="FL" />
                        <ext:Parameter Mode="Auto" Name="RandNumb"  Value="34567"/>
                    </Params>
                </Loader>
            </ext:Panel>
    
    
            <ext:Panel id="ButtonsPanel" runat="server" Border="true" ButtonAlign="Left">
                <Buttons>
                    <ext:Button runat="server" ID="CliButtton" Text="SetParams Client Test" Icon="ArrowRefresh" AutoPostBack="false" CausesValidation="false">
                        <Listeners> <Click Fn="setParamsAndLoad"></Click> </Listeners>
                    </ext:Button>
    
                    <ext:Button runat="server" ID="ServButtton" Text="SetParams Server Test" Icon="ArrowOut" AutoPostBack="false"
                            CausesValidation="false">
                            <DirectEvents>
                                <Click OnEvent="SetParams_AndLoad">
                            </Click>
                        </DirectEvents>
    
                    </ext:Button>
                </Buttons>
            </ext:Panel>
         </form>
    
        
    </body>
    </html>
    Child.aspx
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    <script runat="server">
     protected void Page_Load(object sender, EventArgs e)
        {
            System.Diagnostics.Debug.WriteLine("CHILD PAGE LOAD");
        }
    </script>
    
    <html>
    <head runat="server">
        <title>Child Page</title>
    </head>
    <body style="padding:10px;">
        <% System.Threading.Thread.Sleep(1000); %>
    
        Child page creation time:&nbsp;
        <%= DateTime.Now.ToLongTimeString() %>
        <p>StateAbbr PARAM = [<%= Request.Params["StateAbbr"] %>]</p>
        <p>RandNumb  PARAM = [ <%= Request.Params["RandNumb"] %>]</p>
        <p>ABS URL             = [ <%= Request.Url.AbsoluteUri%>]</p>
        <p>Raw URL             = [ <%= Request.RawUrl %>]</p>
    </body>
    </html>
    Last edited by fabricio.murta; Aug 21, 2017 at 5:14 PM.
  2. #2
    Hello @AdvanceLoanTechnologies!

    I've run your test case here but I'm not sure about the issue. I don't see anything throw any error. When I click either button I get the child page updated with the updated parameters passed to it. Isn't that working as it should?

    Besides, you show on your screenshots legacy Ext.NET v1 code, right?

    I believe you meant your Default.aspx would break in lines 38 and 39? It is not clear to me, in the test case, how to reproduce the issue you are reporting.
    Fabrício Murta
    Developer & Support Expert
  3. #3

    Scenarios clarification

    Hello:

    The new scenario in the test case DefaultTest.aspx (1 card in the panel) illustrates params being changed but not appended to the Request.Params collection when these are modified at the client side. When we try to access them as in Request.Params["ParamName1"] they are null. While unit testing with <BaseParams> instead of <Params> at the Loader it seems to have a different behavior where they are being persisted during a request/reload.

    The old scenario on the legacy code (3 cards in the panel, defaults to 1st card, 2nd card with loader) illustrates once second card is activated Loader's params is null. However, if we change the markup and use <BaseParams> access it as in loader.baseParams this collection is available.

    Please let me know if this clarifies better the two scenarios.
  4. #4
    Hello @AdvanceLoanSystems!

    Running your test case I'm getting the updated values in the child page.

    It changes the values, then reloads the internal frame, and there's the new values.

    I mean, when I load the page, I got this contents:

    Child page creation time:  1:55:11 PM
    StateAbbr PARAM = [FL]
    
    RandNumb PARAM = [ 34567]
    
    ABS URL = [ http://localhost:20937/aspEngine/06/2/0-2/62020-child.aspx?TestID=123&StateAbbr=FL&RandNumb=34567]
    
    Raw URL = [ /aspEngine/06/2/0-2/62020-child.aspx?TestID=123&StateAbbr=FL&RandNumb=34567]
    Then if I click the second button (SetParams Server Test), I get this:

    Child page creation time:  1:56:19 PM
    StateAbbr PARAM = [CA]
    
    RandNumb PARAM = [ 1111111]
    
    ABS URL = [ http://localhost:20937/aspEngine/06/2/0-2/62020-child.aspx?TestID=123&StateAbbr=CA&RandNumb=1111111]
    
    Raw URL = [ /aspEngine/06/2/0-2/62020-child.aspx?TestID=123&StateAbbr=CA&RandNumb=1111111]
    And if I click back the first button (SetParams Client Test), I get:

    Child page creation time:  1:56:57 PM
    StateAbbr PARAM = [FL]
    
    RandNumb PARAM = [ 34567]
    
    ABS URL = [ http://localhost:20937/aspEngine/06/2/0-2/62020-child.aspx?TestID=123&StateAbbr=FL&RandNumb=34567]
    
    Raw URL = [ /aspEngine/06/2/0-2/62020-child.aspx?TestID=123&StateAbbr=FL&RandNumb=34567]
    So, to me both your client and server sided approaches are reloading the internal frame passing the updated parameters. Where's the problem in the test case? No console error message is triggered also.
    Fabrício Murta
    Developer & Support Expert
  5. #5

    New test sample updated

    Hello:

    Client side scenario
    Notice in line 38-39 the parameters are being changed to different values, however their values aren't being updated on the request after reloading the panel (line 40). You are still getting FL and 34567 in your result. I've discovered that by using <BaseParams> I get similar functionality from version 1.2 <Params>, the updated demo has the both scenarios included.


    In addition, this new demo emulates the other issue we have. <Params> is null on a loader which happens to be in inactive panel inside a card layout. Again here, this doesn't happen if I switch to using <BaseParams>.

    DefaultTest.aspx
    <%@ Page Language="C#" EnableViewState="true" %>
    
    <script runat="server">
    	protected void Page_Load(object sender, EventArgs e)
    	{
    		if (!X.IsAjaxRequest)
    		{
    			this.Label1.Text = DateTime.Now.ToLongTimeString();
    		}
    	}
    
    	public void SetParams_AndLoad(object sender, DirectEventArgs e)
    	{
    		var sMsg = "";
    
    		this.MainPanel.Loader.BaseParams["StateAbbrBase"] = "CA_B";
    		this.MainPanel.Loader.BaseParams["RandNumbBase"] = "1111111_B";
    
    		this.MainPanel.Loader.Params["StateAbbrParam"] = "CA_P";
    		this.MainPanel.Loader.Params["RandNumbParam"] = "1111111_P";
    
    		sMsg += "BASE: " + this.MainPanel.Loader.BaseParams["StateAbbrBase"] + " / " + this.MainPanel.Loader.BaseParams["RandNumbBase"];
    		sMsg += "<br/>PARAMS:" + this.MainPanel.Loader.Params["StateAbbrParam"] + " / " + this.MainPanel.Loader.Params["RandNumbParam"];
    
    		//this.MainPanel.Reload();
    		this.MainPanel.LoadContent();
    
    		sMsg += "<br/><br/> After LoadContent()<br/>";
    		sMsg += "BASE:" + this.MainPanel.Loader.BaseParams["StateAbbrBase"] + " / " + this.MainPanel.Loader.BaseParams["RandNumbBase"];
    		sMsg += "<br/>PARAMS:" + "<br/>" + this.MainPanel.Loader.Params["StateAbbrParam"] + " / " + this.MainPanel.Loader.Params["RandNumbParam"];
    
    		ExtNet.MessageBox.Show(new MessageBoxConfig
    		{
    			Title = "Setting PARAMS/BASEPARAMS SERVER Side",
    			Message = sMsg,
    			Icon = MessageBox.Icon.INFO,
    			Buttons = MessageBox.Button.OK
    		});
    
    
    		return;
    	}
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
    	<script type="text/javascript">
    
    		function setParamsAndLoad() {
    			debugger;
    			var sMsg = "";
    
    			try {
    				sMsg += "BASE: ";
    				App.MainPanel.loader.baseParams.StateAbbrBase = "AK_B";
    				App.MainPanel.loader.baseParams.RandNumbBase = "90222_B";
    				sMsg += App.MainPanel.loader.baseParams.StateAbbrBase + " / " + App.MainPanel.loader.baseParams.RandNumbBase;
    			} catch (err) {
    				alert("ERROR: Cannot SET BASEPARAMS " + err.message);
    				sMsg += err.message;
    			}
    
    			try {
    				sMsg += "<br/>PARAMS: ";
    				App.MainPanel.loader.params.StateAbbrParam = "AK_P";
    				App.MainPanel.loader.params.RandNumbParam = "90222_P";
    				sMsg += App.MainPanel.loader.params.StateAbbrParam + " / " + App.MainPanel.loader.params.RandNumbParam;
    			} catch (err) {
    				alert("ERROR: Cannot SET PARAMS " + err.message);
    				sMsg += err.message;
    			}
    
    			App.MainPanel.reload();
    			// App.MainPanel.load(App.MainPanel.loader.getConfig());
    
    			sMsg += "<br/><br/>After MainPanel.reload()"
    			sMsg += "<br/>----------------------------------<br/>"
    			sMsg += "BASE: " + App.MainPanel.loader.baseParams.StateAbbrBase + " / " + App.MainPanel.loader.baseParams.RandNumbBase
    			sMsg += "<br/>PARAMS: " + App.MainPanel.loader.params.StateAbbrParam + " / " + App.MainPanel.loader.params.RandNumbParam;
    
    			Ext.Msg.show(
    					{
    						title: "Setting PARAMS/BASEPARAMS Client Side",
    						msg: sMsg,
    					});
    
    			return true;
    		}
    
    		function ChangeActivePanel() {
    			if (App.MainCardPanel.layout.getNext()) {
    				App.MainCardPanel.layout.setActiveItem(App.MainCardPanel.layout.getNext().id)
    			} else {
    				App.MainCardPanel.setActiveItem(0);
    			}
    
    		}
    	</script>
    
    	<title>LOADERS TEST  --- Deferred Loading - Ext.NET Examples</title>
    	<link href="/resources/css/examples.css" rel="stylesheet" />
    
    	<style>
    		.msgDiv {
    			border: 1px solid #999;
    			font-size: 12px;
    			padding: 6px;
    			width: 250px;
    			font-weight: bold;
    			text-align: center;
    			margin-bottom: 30px;
    			display: inline-block;
    			vertical-align: top;
    		}
    
    			.msgDiv p {
    				font-size: 14px;
    				text-align: left;
    			}
    
    
    		.BigBold {
    			font-size: 20px;
    			font-weight: bolder;
    		}
    	</style>
    </head>
    <body>
    	<form runat="server">
    		<ext:ResourceManager runat="server" />
    
    		<div class="msgDiv  x-box-mc">
    			Main page creation time: <em>
    				<ext:Label ID="Label1" runat="server" />
    			</em>
    
    		</div>
    		<div class="msgDiv x-box-mc">
    			LEGEND
    			<p>
    				Original     = FL 34567<br />
    				ClientSide SET  = AK 90222<br />
    				Server Side SET = CA 1111111
    			</p>
    		</div>
    		<hr />
    		<h3>6. EPIC TEST</h3>
    		<ext:Panel runat="server" ID="MainCardPanel" Layout="CardLayout" Border="true" Title="Card Layout"
    			ActiveItem="CardPanel1" Width="600" Height="400" IDMode="Static">
    			<%-- <LayoutConfig>
    				 <ext:CardLayoutConfig  DeferredRender="false" ></ext:CardLayoutConfig>
    			 </LayoutConfig>--%>
    			<Items>
    				<ext:Panel ID="CardPanel1" runat="server" Layout="CenterLayout" Border="true" Title="CardPanel1" Width="700" Height="400">
    					<Items>
    						<ext:Label runat="server" Text="CardPanel #1" Cls="BigBold"></ext:Label>
    					</Items>
    				</ext:Panel>
    
    				<ext:Panel ID="MainPanel" runat="server"
    					Title="Window" 	Width="600" Height="400" IDMode="Static">
    					
                        <Loader ID="MainPanelLoader"
    						runat="server"
    						Url="Child.aspx?TestID=123"
    						Mode="Frame"
    						DisableCaching="false"
    						AutoLoad="true"
    						RemoveAll="true">
    						<%--Mode="Frame"--%>
    						<LoadMask ShowMask="true" />
    						<BaseParams>
    							<ext:Parameter Mode="Auto" Name="StateAbbrBase" Value="FL_B" />
    							<ext:Parameter Mode="Auto" Name="RandNumbBase" Value="34567_B" />
    						</BaseParams>
    						<Params>
    							<ext:Parameter Mode="Auto" Name="StateAbbrParam" Value="FL_P" />
    							<ext:Parameter Mode="Auto" Name="RandNumbParam" Value="34567_P" />
    						</Params>
    					</Loader>
    				</ext:Panel>
    
    				<ext:Panel ID="CardPanel2" runat="server" Layout="CenterLayout" Border="true" Title="CardPanel2" Width="600" Height="400">
    					<Items>
    						<ext:Label runat="server" Text="CardPanel #2" Cls="BigBold"></ext:Label>
    					</Items>
    				</ext:Panel>
    			</Items>
    	    </ext:Panel>
    
    		<ext:Panel ID="ButtonsPanel" runat="server" Border="true" ButtonAlign="Left">
    			<Buttons>
    				<ext:Button runat="server" ID="CliButtton" Text="SetParams Client Test" Icon="ArrowRefresh" AutoPostBack="false" CausesValidation="false">
    					<Listeners>
    						<Click Fn="setParamsAndLoad"></Click>
    					</Listeners>
    				</ext:Button>
    
    				<ext:Button runat="server" ID="ServButtton" Text="SetParams Server Test" Icon="ArrowOut" AutoPostBack="false"
    					CausesValidation="false">
    					<DirectEvents>
    						<Click OnEvent="SetParams_AndLoad">
    						</Click>
    					</DirectEvents>
    				</ext:Button>
    
    				<ext:Button runat="server" ID="ChangeCard" Text="Change Active Card" AutoPostBack="false" CausesValidation="false">
    					<Listeners>
    						<Click Fn="ChangeActivePanel"></Click>
    					</Listeners>
    				</ext:Button>
    			</Buttons>
    		</ext:Panel>
    		<%--<asp:TextBox ID="Text2" runat="server" Text="DebugInfo"  ReadOnly="false" Enabled="true" EnableViewState="true" TextMode="MultiLine" Height="300" Width="500" />--%>
    	</form>
    </body>
    </html>
    Child.aspx
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    <script runat="server">
     protected void Page_Load(object sender, EventArgs e)
        {
            System.Diagnostics.Debug.WriteLine("CHILD PAGE LOAD");
    
            ExtNet.MessageBox.Show(new MessageBoxConfig
            {
                Title = "childpage",
                Message = "CHILD PAGE LOAD",
                Icon = MessageBox.Icon.INFO,
                Buttons = MessageBox.Button.OK
            });
        }
    </script>
    
    <html>
    <head runat="server">
        <title>Child Page</title>
    </head>
    <body style="padding:10px;">
    
        <ext:ResourceManager runat="server" />
        <% System.Threading.Thread.Sleep(1000); %>
    
        Child page creation time:&nbsp;
        <%= DateTime.Now.ToLongTimeString() %>
        <p>StateAbbr BASE = [<%= Request.Params["StateAbbrBase"] %>]
        <br />RandNumb  BASE = [ <%= Request.Params["RandNumbBase"] %>]</p>
        
        <p>StateAbbr PARAM = [<%= Request.Params["StateAbbrParam"] %>]
        <br />RandNumb  PARAM = [ <%= Request.Params["RandNumbParam"] %>]</p>
        
        <p>ABS URL         = [ <%= Request.Url.AbsoluteUri%>]</p>
    </body>
    </html>
  6. #6
    Hello @AdvanceLoanTechnologies!

    I see now the relation the null params, assignment being ignored, and our initial issue (getAutoLoad() method and params array missing) correlates. Well, I hope I finally realize that right for you!

    The thing is Ext.NET keeps the params variable behind paramsFn and, of course, if you try to:

    paramsFn().stid = my_new_value;
    It is not going to replace it anyway. You are just changing the returned object from the paramsFn() function. Once the function is called again, it will return the original values. The function itself must be changed to reflect the new values.
    This is what you said you tried here: Post #5 in getAutoLoad() method and params array missing.

    And then, if you just change, assign, do whatever you try to the loader.params, it will get overridden by the loader.paramsFn() call that will happen at some point!

    The catch here is that this paramsFn() behavior is specific to Ext.NET to address some issues, the loaded probably has (like resolving variable values dynamically when called), and calling loader.paramsFn() overrules the loader.params.

    Well, the story is getting a little too long, so let's just jump to the conclusion: instead of:

    App.MainPanel.loader.params.StateAbbrParam = "AK_P";
    App.MainPanel.loader.params.RandNumbParam = "90222_P";
    Just do this:
    App.MainPanel.loader.paramsFn = function () {
        return {
            StateAbbrParam: "AK_P",
            RandNumbParam: "90222_P"
        };
    };
    This will do in both your situations:
    a) the loader.params values being ignored and page loading with old parameters.
    b) the loader.params being null the first time you try to access it. Once the load happens, albeit ignored, the loader.paramsFn() is called to fill loader.params with its return.

    And this situation explained in situation (b) above is exactly what makes the setting be ignored.

    When you set up the parameters from the markup block:

    <Params>
    	<ext:Parameter Name="StateAbbrParam" Value="FL_P" />
    	<ext:Parameter Name="RandNumbParam" Value="34567_P" />
    </Params>
    Then you are populating that paramsFn on client-side. This enables some direct event/method specific situations where variables weren't being correctly expanded and unexpected values were being passed.

    And for backwards compatibility, then comes the BaseParams you were talking about (and found it worked better in your case). In practice, BaseParams is just merged to the loader.params variable after loader.paramsFn() is called.

    Bottomline is: you can use BaseParams as you will, in a compatible form in spite of older Ext.NET versions. It corresponds to ExtJS documentation to the plain params config option of the loader. But you may also replace the paramsFn method to return your updated values.

    This change is in Ext.NET since the earliest record of v2.0 release in our github (and preserved SVN) history.

    I hope this clarifies your questions regarding the different params behavior! :)
    Fabrício Murta
    Developer & Support Expert
  7. #7
    And hello again, @AdvanceLoanTechnologies!

    We have responded your inquiry for some days already, and still waiting for a feedback from you. Did the last post from us help you out on your issue, or at least further progress on it? Do you need assistance with this issue still at all?

    We may mark this thread as closed in 7+ days from now, but take your time, as you will be able to post here still, even if marked as closed.
    Fabrício Murta
    Developer & Support Expert
  8. #8

    BaseParams

    We opted to use BaseParams in our case for backward compatibility.

    Thanks
  9. #9
    Alright, thanks for the feedback, and glad you could find a suitable solution for you!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 1
    Last Post: Aug 12, 2015, 11:43 AM
  2. Replies: 23
    Last Post: Jan 17, 2015, 10:43 AM
  3. [CLOSED] how to replace panel loader params on reload
    By susanz in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 10, 2014, 3:43 PM
  4. [CLOSED] Loader Params not added in DirectEvent
    By michaeld in forum 2.x Legacy Premium Help
    Replies: 15
    Last Post: Nov 29, 2013, 2:29 PM
  5. Set params of Loader in code behind
    By adopilot in forum 2.x Help
    Replies: 1
    Last Post: Feb 25, 2013, 11:14 PM

Posting Permissions