Is there a sample to show another view in a modal window

[mehdy]

Hi
I have a toolbar and a grid and I like to show a modal dialog with a create view inside it, when user clicks on the toolbar button.
is there a sample for this in 7.2?

[fabricio.murta]

Hello again, @mehdy!

I'm not sure, I think there may be no example in our examples explorer for version 7 but maybe there's one in v5 examples explorer that you could fairly easily move into version 7.

In case this is a new concept you didn't try in v5 or know to be used back then, the advice I could give is, try to make a simple test case with the elements you require; once you get stuck, share here the test case highlighting what you're unable to achieve with the code, then we can give you some insight on how to make it happen. One way or another, there will be a way, I'm confident about it, just maybe not as intuitive as we'd like it to be.

So, if you can find an example in v5 you're having trouble to port to v7, or if you come with your scenario from the scratch and get stuck at some point, we'd be more than eager to help you move on. But without further leads, we are left wondering what you'd expect of the scenario you described.

Looking forward to your follow-up!

[mehdy]

Hi
I have added a window to your direct event sample page like this

<ext-section target="Main">
    <ext-container region="Center" scrollable="true" paddingAsString="30 20 30 50">
        <content>
            <h1>DirectEvent</h1>

            <ext-button text="Click me" onDirectClick="ButtonClick" />
        </content>
    </ext-container>
    <ext-window id="Window1"
                title="Edit View"
                bodyPadding="18"
                modal="true">
        <items>
            <ext-panel layout="Fit" scrollable="true" id="Winpanel">
                
            </ext-panel>
        </items>
    </ext-window>
</ext-section>

I want to fill the panel with another page (view) in button click, I can show the window but don't know how to fill the panel or window, like this:

public IActionResult ButtonClick()
        {
            var win = this.GetCmp<Window>("Window1");
            var panel = this.GetCmp<Panel>("Winpanel");

            // what to do here ??? to fill the window or pane;

            win.Width = 900;
            win.Height = 700;
            win.Show();

            return this.Direct();
        }

there used to be a Ext.Net.MVC.PartialViewResult class in previous version that we used.
I don't know how to do this in version 7.2

[fabricio.murta]

Hello @mehdy!

Do you require to determine the view name from code behind? If it's always going to be the same, you can just go ahead and specify the view name/path in a Component Loader. In your example, I dismissed the panel right within the window and assigned the loader to the window. The window code in the View became:

<ext-window id="Window1"
            title="Edit View"
            bodyPadding="18"
            modal="true">
    <loader>
        <ext-componentLoader renderer="frame" autoLoad="false" url="t63190_modalView" />
    </loader>
</ext-window>

Then in code behind you can just remove the "// what to do here ??? to fill the window or pane;", the window will be filled by another View, right? If we fill it here, it means we'll using an action to fill the window; it's not what I believe you want.

In case you want to pass some parameters you can get from client side (the record being edited, for instance), you can just feed it to the loader via parameters and get on the view's Get() method via this.Request.Query["parameter_name"].

In case you require to resolve the view name from code behind, you'd want to do something like this (again, next to the "what to do here" comment in your model code):

this.X().AddScript("App.Winpanel.getLoader.url = 'my_view_path_here'")

Sorry for throwing these pieces around, I hope they serve as guidelines to solve potential challenges you may face developing your page (interaction back and forth) and, as I'm not sure whether you'll need them or not, full samples would be a bit misleading.

Let us know if you still can't get the hang of it or get stuck somewhere!

Also, notice that's a full view. Partial Views rendering, like it used to be in Ext.NET 5 (with PartialViewResult etc), is not supported yet.

Hope this helps!

[mehdy]

Hi fabricio
renderer="frame" loads page in an iframe, in this way you cant simply close this window, because App.Window1 is null and you cant call App.Window1.close(), even in a direct event its not possible to close the window. like this:

var win = this.GetCmp<Window>("Window1");
win.Close();

can you suggest a way to load a page or url without an iframe.
a partial view like previous versions would be awesome.
Thanks

[fabricio.murta]

Hello @mehdy!

Please provide a runnable test case reproducing what you've described in the last post so we can further help you with it.