[CLOSED] Loading Views in Viewport

**fabricio.murta** · Feb 20, 2016, 4:51 PM

Hello Jeff!

About conditionally building the @(Url.Action()), this is replaced when the page is built and you can't just replace it in JavaScript. But you can set the whole result as a parameter to the JS method, from the button. E.g.:

Html.X().Button().Text("Test View 1").ComponentCls("menu-button").CtCls("menu-button-small").Listeners(lst => { lst.Click.Handler = "loadTestView('TestGrid', '@(Url.Action("RenderPartialView"))')"; }),
Html.X().Button().Text("Test View 2").Listeners(lst => { lst.Click.Handler = "loadTestView('TestGrid2','Test')"; })

and then use your loadTestView() simply as:

        var loadTestView = function (viewName, url) {
            App.PnlCenter.clearContent();

            Ext.net.DirectMethod.request({
                url: url,
                params: {
                    containerid: "PnlCenter",
                    viewName: viewName
                },
            })
        };

As for the failing to reload. I couldn't reproduce here. I can click over and over and the content gets updated. Have you changed your partial view to contain just razor code as I am using here? As like just:

@(Html.X().Label().Text("Testing").Width(200).Height(50)

And maybe a 'testing2' string on the other partial view so you can see content changing. No html tags, just the components on the partial view.

**Argenta** · Feb 22, 2016, 9:17 AM

Hi Fabricio

Thanks again for your help. This is in response to your suggestion for making the url a parameter. It doesn't seem to work because RenderPartialView needs to be in double quotes but the whole of the Handler is in double quotes. There's presumably a simple way around it but I can't quite see how.

Regards

Jeff

**Argenta** · Feb 22, 2016, 9:33 AM

Hi Fabricio

I'm still having problems running the Partial View. I've trimmed down the code to be as simple as possible. so I've got a single controller:

using Ext.Net;
using System.Web.Mvc;

namespace ExtSandpit.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        public Ext.Net.MVC.PartialViewResult RenderPartialView(string viewName, string containerId)
        {
            Ext.Net.MVC.PartialViewResult r = new Ext.Net.MVC.PartialViewResult(containerId, RenderMode.AddTo);
            r.ViewName = viewName;
            
            return r;
        }
    }

}

with 3 views:

Index

<!DOCTYPE html>
<html>
<head>
    <title></title>
@{
    Layout = null;
}
    <script>
        var loadTestView = function (viewName) {
            App.PnlCenter.clearContent();
            Ext.net.DirectMethod.request({
                url: '@(Url.Action("RenderPartialView"))',
                params: {
                    containerid: "PnlCenter",
                    viewName: viewName
                },
            })
        };
    </script>
@*                <link rel='stylesheet' type='text/css' href='~/Content/Site.css' media='screen'>*@
</head>
<body>
    @Html.X().ResourceManager().ScriptMode(Ext.Net.ScriptMode.Debug).SourceFormatting(true)
    @(Html.X().Viewport().AutoScroll(true).Layout(LayoutType.Border).Items(
        Html.X().Panel().Region(Region.North).Layout(LayoutType.HBox).Items(
        ),
        Html.X().Panel().Region(Region.West).Width(181).Items(
            Html.X().Panel().ID("MenuPanel").Layout(LayoutType.VBox).Items(
                Html.X().Button().Text("Test View 1").ComponentCls("menu-button").CtCls("menu-button-small").Listeners(lst => { lst.Click.Handler = "loadTestView('TestGrid')"; }),
                Html.X().Button().Text("Test View 2").ComponentCls("menu-button").CtCls("menu-button-small").Listeners(lst => { lst.Click.Handler = "loadTestView('TestGrid2')"; })
                )
            ),
        Html.X().Panel().Region(Region.West).ID("PnlCenter").Width(200).Layout(LayoutType.Fit),
        Html.X().Panel().Region(Region.Center).Layout(LayoutType.Fit)
    ))

</body>

</html>

TestGrid

@(Html.X().Label().Text("Testing").Width(200).Height(50)
)

and TestGrid2

@(Html.X().Label().Text("Testing second").Width(200).Height(50))

and a very simple style sheet:

.menu-button  .x-btn-button {
  background-color: #d3d3d3;
  color: #000000;
  font-family: Calibri;
  font-size: 20px;
  font-weight: bold;
  height: 48px;
  width: 160px;
  text-align: right;
}
.menu-button-small  .x-btn-default-small {
  border-color: #d3d3d3;
  background-color: #d3d3d3;
  border-width: 0px;
  border-right-width: 5px;
  border-radius:0px;
}

When I run it in Internet Explorer with the link to the style sheet commented out it works as expected.

When I run it in Google Chrome with the link to the style sheet commented out it works as expected but the App.PnlCenter.clearContent(); does not clear the content.

When I run it in Internet Explorer with the link to the style sheet in the first button click displays the partial view but subsequent button clicks do not.

I have noticed similar behaviour if I change TestGrid to:

@(
Html.X().Panel().Width(200).Height(50).Layout(LayoutType.VBox).Items(
    Html.X().Label().Text("Testing"),
    Html.X().Label().Text("Testing as well")
    )
)

with the style sheet commented out.

It's all a bit baffling but presumably, as always, there's a simple answer!

Thanks

Jeff

**fabricio.murta** · Feb 22, 2016, 10:11 AM

Sorry Jeff! I've fixed it locally but for some reason I didn't accordingly use the syntax in the code I posted!

The correct syntax would be:

Html.X().Button().Text("Test View 1").ComponentCls("menu-button").CtCls("menu-button-small").Listeners(lst => { lst.Click.Handler = "loadTestView('TestGrid', '" + Url.Action("RenderPartialView") + "')"; }),
Html.X().Button().Text("Test View 2").Listeners(lst => { lst.Click.Handler = "loadTestView('TestGrid2','" + Url.Action("../Test/RenderPartialView") + "')"; })

I'll review your following post and return to you soon.

**fabricio.murta** · Feb 22, 2016, 11:44 AM

Hello again Jeff! Thanks for the straightforward test. My previous suspicions were right, we should be using a Loader on that panel.

Additionally, for the loader approach to work, we should be passing the panel's body ID.

Applying the loader approach, on the controller we should instruct it not to add the <script> tags on the partial code return.

Here's how your controller's RenderPartialView should be in this approach:

        public Ext.Net.MVC.PartialViewResult RenderPartialView(string viewName, string containerId)
        {
            return new Ext.Net.MVC.PartialViewResult
            {
                ContainerId = containerId,
                ViewName = viewName,
                WrapByScriptTag = false
            };
        }

Now, for the view. Here, we'll add a Loader to the panel, set its load mode to Script, and instruct it to not auto load. Auto load works, if you provide up front the values for the view name, url and container id.

Additionally, we are going to change the JavaScript code. It just sets the URL, viewName and container ID and then calls the panel's load() method. Notice the container ID here is the panel body's container ID.

Specifying the url in the script is assuming you may want to change it following the syntax in my previous post. If it is the same url/action, you can define it directly on the loader syntax with .Url(Url.Action("MyAction").

Enough blah blah blah, the reviewed Index would look like this:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    @{
        Layout = null;
    }
    <script>
        var loadTestView = function (viewName) {
            var panel = App.PnlCenter,
                loader = panel.loader;

            panel.clearContent();

            loader.url = '@(Url.Action("RenderPartialView"))';
            loader.params = {
                containerId: loader.target.getBody().id,
                viewName: viewName
            };

            panel.load();
        };
</script>
    <link rel='stylesheet' type='text/css' href='~/Content/60644_minimalistic.css' media='screen'>
</head>
<body>
    @Html.X().ResourceManager()

    @(Html.X().Viewport().AutoScroll(true).Layout(LayoutType.Border).Items(
        Html.X().Panel().Region(Region.North).Layout(LayoutType.HBox).Items(
        ),
        Html.X().Panel().Region(Region.West).Width(181).Items(
            Html.X().Panel().ID("MenuPanel").Layout(LayoutType.VBox).Items(
                Html.X().Button().Text("Test View 1").ComponentCls("menu-button").CtCls("menu-button-small").Listeners(lst => { lst.Click.Handler = "loadTestView('TestGrid')"; }),
                Html.X().Button().Text("Test View 2").ComponentCls("menu-button").CtCls("menu-button-small").Listeners(lst => { lst.Click.Handler = "loadTestView('TestGrid2')"; })
                )
            ),
        Html.X().Panel().Region(Region.West).ID("PnlCenter").Width(200).Layout(LayoutType.Fit)
        .Loader(
            Html.X().ComponentLoader().AutoLoad(false).Mode(LoadMode.Script)
        ),
        Html.X().Panel().Region(Region.Center).Layout(LayoutType.Fit)
    ))
</body>

</html>

And voila! It works on both Chrome and IE. Mozilla Firefox also likes it.

I hope this helps!

**Argenta** · Feb 22, 2016, 12:50 PM

Hi Fabricio

Voila indeed!! I've got it all working satisfactorily now, at least in my sandbox. I'll now implement it in the main project.

Thanks again for all your help.

Best Regards

Jeff

**fabricio.murta** · Feb 22, 2016, 1:17 PM

Glad it worked now! Thanks for the feedback! I'll be marking this thread as closed, but you can update it if something related to this issue raises again.

Thread: [CLOSED] Loading Views in Viewport

Thread Tools

Search Thread

Display

Similar Threads

[CLOSED] Tab Panels not loading values on partial views

[CLOSED] Loading another view on the center region of ViewPort using MVC 3

Viewport and dynamic loading controls

Access Theme views

GridPanel - 2 Views Possible?

Posting Permissions

Sitemap

Downloads

Resources