[CLOSED] Partial view load issue on first click of submit button

[PriceRightHTML5team]

Hi,

I am Loading a partial view using ComponentLoader() which contains Tab panel, In Partial view there are two more partial views for each tab.
For Ex: Main container --> TabPanel PartialView --> Tab1 PartialView & Tab2 PartialView
Initially Main Container is hidden and i am showing the main container on Submit button.
The issue is On first click of submit button, main container is not loading the partial views but after second click of submit button, it is working fine.
Here is my code

// Main View

<script>
    var btnSubmit_Click = function () {
        var mainContainer = Ext.getCmp("MainContainer");
        mainContainer .loader.paramsFn = getParammeters;
        mainContainer .show();
        mainContainer .reload();
      };


</script>


@(
      Html.X().Container()
              .ID("MainContainer")
              .Hidden(true)
              .Padding(5)
              .Border(true)
              .Loader(
                        Html.X().ComponentLoader().LoadMask(x => x.ShowMask = true)
                        .Url(Url.Action("LoadTabularPartialView"))
                        .AutoLoad(false).Mode(LoadMode.Script)
                        .Params(new { containerId = "MainContainer" })
                      )
)
  @(Html.X().Button().Text("Show Graph").Width(60).ID("btnSubmit").Handler("btnSubmit_Click"))

// TabPanel Partail View

@(Html.X().TabPanel()
            .ID("GraphTab")
            .ActiveTabIndex(0)
            .MinHeight(450)
            .Plain(true)
            .Margin(0)
            .Items
             (
                    Html.X().Panel()
                        .Margin(0).Padding(5)
                        .Title("Cumulative")
                        .ID("Panel1")
                        .Items(Html.X().Container()
                                   .ID("CumulativeContainer")
                                   .DefaultAnchor("100%")
                                   .Loader(Html.X().ComponentLoader().LoadMask(x=>x.ShowMask = true)
                                               .Url(Url.Action("LoadCumulativePartialView"))
                                               .AutoLoad(true).Mode(LoadMode.Script)
                                               .Params(new { containerId = "CumulativeContainer", scId=Model.Id})
                                          )
                        ),


                    Html.X().Panel()
                        .Margin(0).Padding(5)
                        .Title("Monthly")
                        .ID("Panel2")
                        .Items(Html.X().Container()
                                   .ID("MonthlyContainer")
                                   .DefaultAnchor("100%")
                                   .Loader(
                                            Html.X().ComponentLoader().LoadMask(x=>x.ShowMask = true)
                                                .Url(Url.Action("LoadMonthlyPartialView"))
                                                .AutoLoad(true).Mode(LoadMode.Script)
                                                .Params(new { containerId = "MonthlyContainer", scId=Model.Id })
                                          )


                              )
            )//Tab Panel
     
     )

//Tab1 Partial View
@(Html.X().Container().Border(false)
      .ID("Container1")
      .Height(400)
      .Layout(LayoutType.Fit)
      .Control(item => this.Initchartcumulative(item))
)

//Tab2 Partial View
@(Html.X().Container().Border(false)
      .ID("Container2")
      .Height(400)
      .Layout(LayoutType.Fit)
      .Control(item => this.Initchartmonthly(item))
)

Thanks

[Daniil]

Hi @PriceRightHTML5team,

Please post controller actions as well.

[PriceRightHTML5team]

Hi @PriceRightHTML5team,

Please post controller actions as well.

Here is my code with controller action:

// Main View

<script>
    var btnSubmit_Click = function () {
        var mainContainer = Ext.getCmp("MainContainer");
        mainContainer .loader.paramsFn = getParammeters;
        mainContainer .show();
        mainContainer .reload();
      };


</script>


@(
      Html.X().Container()
              .ID("MainContainer")
              .Hidden(true)
              .Padding(5)
              .Border(true)
              .Loader(
                        Html.X().ComponentLoader().LoadMask(x => x.ShowMask = true)
                        .Url(Url.Action("LoadTabularPartialView"))
                        .AutoLoad(false).Mode(LoadMode.Script)
                        .Params(new { containerId = "MainContainer" })
                      )
)
  @(Html.X().Button().Text("Show Graph").Width(60).ID("btnSubmit").Handler("btnSubmit_Click"))

// TabPanel Partail View

@(Html.X().TabPanel()
            .ID("GraphTab")
            .ActiveTabIndex(0)
            .MinHeight(450)
            .Plain(true)
            .Margin(0)
            .Items
             (
                    Html.X().Panel()
                        .Margin(0).Padding(5)
                        .Title("Cumulative")
                        .ID("Panel1")
                        .Items(Html.X().Container()
                                   .ID("CumulativeContainer")
                                   .DefaultAnchor("100%")
                                   .Loader(Html.X().ComponentLoader().LoadMask(x=>x.ShowMask = true)
                                               .Url(Url.Action("LoadCumulativePartialView"))
                                               .AutoLoad(true).Mode(LoadMode.Script)
                                               .Params(new { containerId = "CumulativeContainer", scId=Model.Id})
                                          )
                        ),


                    Html.X().Panel()
                        .Margin(0).Padding(5)
                        .Title("Monthly")
                        .ID("Panel2")
                        .Items(Html.X().Container()
                                   .ID("MonthlyContainer")
                                   .DefaultAnchor("100%")
                                   .Loader(
                                            Html.X().ComponentLoader().LoadMask(x=>x.ShowMask = true)
                                                .Url(Url.Action("LoadMonthlyPartialView"))
                                                .AutoLoad(true).Mode(LoadMode.Script)
                                                .Params(new { containerId = "MonthlyContainer", scId=Model.Id })
                                          )


                              )
            )//Tab Panel
     
     )

//Tab1 Partial View
@(Html.X().Container().Border(false)
      .ID("Container1")
      .Height(400)
      .Layout(LayoutType.Fit)
      .Control(item => this.Initchartcumulative(item))
)

//Tab2 Partial View
@(Html.X().Container().Border(false)
      .ID("Container2")
      .Height(400)
      .Layout(LayoutType.Fit)
      .Control(item => this.Initchartmonthly(item))
)

//Controller Code:

 public Ext.Net.MVC.PartialViewResult LoadTabularPartialView(string containerId, int Id)
        {
            
            GraphParameters paras = _readService.GetDataById(id).TheEntity;

            return new Ext.Net.MVC.PartialViewResult
            {
                ContainerId = containerId,
                Model = paras,
                ViewName = "TabPanelPartailView",
                WrapByScriptTag = false
            };
        }


        public Ext.Net.MVC.PartialViewResult LoadCumulativePartialView(string containerId, int Id)
        {

            CumulativeGraphModel model = new CumulativeGraphModel();
            model = _readService.GetCumulativeGraph(Id).TheEntity;
            return new Ext.Net.MVC.PartialViewResult
            {
                ContainerId = containerId,
                Model = model,
                ViewName = "CumulativePartialView",
                WrapByScriptTag = false
            };
        }


        public Ext.Net.MVC.PartialViewResult LoadMonthlyPartialView(string containerId, int Id)
        {

            MonthlyGraphModel model = new MonthlyGraphModel();
            model = _readService.GetMonthlyGraph(Id).TheEntity;
            return new Ext.Net.MVC.PartialViewResult
            {
                ContainerId = containerId,
                Model = model,
                ViewName = "MonthlyPartialView",
                WrapByScriptTag = false
            };
        }

Thanks

[Daniil]

I cannot run the test case. I have no models here that you are using in the controller actions. Are they required to reproduce the issue? Can I just omit them?

I tried to omit and am getting this JavaScript error:

ReferenceError: getParammeters is not defined
mainContainer.loader.paramsFn = getParammeters;

[PriceRightHTML5team]

I cannot run the test case. I have no models here that you are using in the controller actions. Are they required to reproduce the issue? Can I just omit them?

I tried to omit and am getting this JavaScript error:

ReferenceError: getParammeters is not defined
mainContainer.loader.paramsFn = getParammeters;

Hi,

"getParammeter" is custom function which return parameter i.e (containerId & unique id)

Yes you can omit it, just hardcode the containerid in controller action.

Thanks

[Daniil]

Well, as far as I can see you are already passing containerid via Params.

So, I removed

mainContainer.loader.paramsFn = getParammeters;

and

, int Id

for the controller actions' signatures.

Then I had to remove

.Control(item => this.Initchartcumulative(item))

.Control(item => this.Initchartmonthly(item))

because it threw errors and replaced it with:

.Html("Container1")

.Html("Container2")

to be able to see that the partial views are actually loaded.

Then I finally ran the test case and click the button. All the partial views appears to be loaded as expected. So, I cannot reproduce the issue.

Please provide a full, runnable and simplified test case which we can copy, paste and run without any changes from our side.

[PriceRightHTML5team]

Well, as far as I can see you are already passing containerid via Params.

So, I removed

mainContainer.loader.paramsFn = getParammeters;

and

, int Id

for the controller actions' signatures.

Then I had to remove

.Control(item => this.Initchartcumulative(item))

.Control(item => this.Initchartmonthly(item))

because it threw errors and replaced it with:

.Html("Container1")

.Html("Container2")

to be able to see that the partial views are actually loaded.

Then I finally ran the test case and click the button. All the partial views appears to be loaded as expected. So, I cannot reproduce the issue.

Please provide a full, runnable and simplified test case which we can copy, paste and run without any changes from our side.

Hi,
In this.Initchartmonthly(item) we are creating the graph & binding it to the container:

Below is the snippet:

private void Initchart(Container pnlGrafico)
    {

        Ext.Net.Chart chtGrafico = new Ext.Net.Chart()
        {
            ID = "LineChart",
            Animate = true,
            Height = 300,
            Shadow = true
        };

      /// we dynamicallly create chart below and then add it to the container

 pnlGrafico.Items.Add(chtGrafico);
}

Is this might be the issue of creating dynamic chart and then appending

Please let me know

[Daniil]

Is this might be the issue of creating dynamic chart and then appending

I think it might be.