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

  1. #1

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

    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?
  2. #2
    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!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    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
  4. #4
    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!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    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
  6. #6
    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.
    Fabrício Murta
    Developer & Support Expert
  7. #7
    I have created a very simple use case, just added a simple edit view to the DirectEventController in template project provided
    by Ext.Net.
    I open the new view in modal window and I like to close the window when user clicks on a button on the new view. But client click and direct event both not working.
    Here is the controller:
    public class DirectEventController : Controller
        {
            public IActionResult Index()
            {
                return View();
            }
    
            public IActionResult EditView()
            {
                return View();
            }
    
            public IActionResult ButtonClick()
            {
                var win = this.GetCmp<Window>("Window1");
                win.Show();
                return this.Direct();
            }
    
            public IActionResult CloseClick()
            {
                var win = this.GetCmp<Window>("Window1");
                win.Close(); // this one not working too
                return this.Direct();
            }
    
           
        }
    Here is the index view:
    @{
        ViewData["Title"] = "DirectEvent";
        var url = Url.Action("EditView", "DirectEvent");
    }
    <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" variant="Danger" />
                
            </content>
        </ext-container>
        
    </ext-section>
    
    <ext-window id="Window1" 
                title="Edit View"
                autoRender="false"
                scrollable="false"
                width="500"
                height="235"
                layout="Fit"
                modal="true">
        <loader>
            <ext-componentLoader renderer="frame" url="@url" />
        </loader>
        <items>
            
        </items>
    </ext-window>
    and here is the Edit View:

    @{
        ViewData["Title"] = "Edit View";
        Layout = null;// "_Layout2";
    }
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>@ViewData["Title"] - ExtSample2</title>
    
        <ext-resourceManager />
    
        <script type="text/javascript" src="~/resources/js/main.js"></script>
        <link rel="stylesheet" href="~/resources/css/main.css" />
    </head>
    <body>
            <ext-container region="Center" scrollable="false" paddingAsString="0">
                <content>
                    <form id="fileUpload" enctype="multipart/form-data" method="post">
                        <ext-formPanel id="BasicForm"
                                       width="500"
                                       frame="true"
                                       modal="true"
                                       paddingAsString="20px"
                                       x-labelWidth="50">
                            <defaults>
                                <ext-add key="anchor" value="95%" mode="Value" />
                                <ext-add key="allowBlank" value="false" mode="Raw" />
                                <ext-add key="msgTarget" value="side" mode="Value" />
                            </defaults>
                            <items>
                                <ext-textField id="firstName" fieldLabel="FirstName" name="desc" />
                                <ext-textField id="lastName" fieldLabel="LastName" name="desc" />
                            </items>
                            <buttons>
                                <ext-button id="SaveButton" variant="Success" text="Save">
                                </ext-button>
                                @*Here App.Window1 is Null*@
                                <ext-button text="Close Client Click" variant="Danger" onClientClick="App.Window1.close()">
                                </ext-button>
                                @*This one not working too*@
                                <ext-button text="Close Direct Event" variant="Danger" onDirectClick="CloseClick">
                                </ext-button>
                            </buttons>
                        </ext-formPanel>
                    </form>
                </content>
            </ext-container>
    
    </body>
    </html>
    Check this:
    Click image for larger version. 

Name:	Ext.png 
Views:	85 
Size:	99.9 KB 
ID:	25559
    Last edited by mehdy; Oct 04, 2021 at 8:23 PM.
  8. #8
    Hello @mehdy!

    Thanks for the test case, I am pretty confident I have a hang of what the issue is now.

    The easiest way out of your issue would be to just add these buttons to the window itself instead of the inner view.

    That would not help though, if you need any other interaction between the inner view and the outside shell, so implementing these "close button" alternatives is a good way to illustrate how you do.

    This is nothing new, you can see a v5 sample exploring the feature at Panel > Basic > IFrame Communication.

    So, then, in your example just change your controller code to:

    public IActionResult OnPostCloseClick()
    {
        this.X().AddScript("window.parent.App.Window1.close()");
        return this.Direct();
    }
    Unfortunately getting a "virtual instance" of the window won't be supported in that case, and appending JavaScript code would be required for this approach -- at least for the time being.

    As you may already have figured, the client-side button would become:

    <ext-button text="Close Client Click" variant="Danger" onClientClick="window.parent.App.Window1.close()" />
    If you want to reuse the view in different outer pages, just pass the ID of the parent window (Window1) or convention to always wrap the view on the same name. If you pass the ID, then you can close it via (say you name it "outerWindowId") window.parent.App[outerWindowId].close().

    Your next step, I foresee, is to force the window to refresh the loader every time you show it. Ideally, clear the window's contents when it closes (or before it opens), and load as it is opened/shown. If you clear it on close, next time it is opened, the old content won't "flash" on it.

    Again, nothing new. The changes are based in Panel > Basic > Deferred Loading, in 1. TabPanel, the tab that reads "Loading on Show with Reloading". The tab shows the "old content blink" effect, which is avoided as described above.

    In the end, your test case should look like this:

    controller:
    public class DirectEventController : Controller
        {
            public IActionResult Index()
            {
                return View();
            }
    
            public IActionResult EditView()
            {
                return View();
            }
    
            public IActionResult ButtonClick()
            {
                var win = this.GetCmp<Window>("Window1");
                win.Show();
                return this.Direct();
            }
    
            public IActionResult CloseClick()
            {
                var win = this.GetCmp<Window>("Window1");
                win.Close(); // this one not working too
                return this.Direct();
            }
    
            public IActionResult CloseOuterWindow()
            {
                this.X().AddScript("window.parent.App.Window1.close()");
                return this.Direct();
            }
           
        }
    index view:
    @{
        ViewData["Title"] = "DirectEvent";
        var url = Url.Action("EditView", "DirectEvent");
    }
    
    <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" variant="Danger" />
    
            </content>
        </ext-container>
    
    </ext-section>
    
    <ext-window id="Window1"
                title="Edit View"
                autoRender="false"
                scrollable="false"
                width="500"
                height="235"
                layout="Fit"
                modal="true">
        <listeners>
            <beforeShow handler="this.clearContent()" />
        </listeners>
        <loader>
            <ext-componentLoader renderer="frame" url="@url" x-triggerEvent="show" x:raw-reloadOnEvent="true">
                <loadMask>
                    <ext-loadMask showMask="true" msg="Loading your order..." />
                </loadMask>
            </ext-componentLoader>
        </loader>
    </ext-window>
    edit view:
    @{
        ViewData["Title"] = "Edit View";
        Layout = null;// "_Layout2";
    }
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>@ViewData["Title"] - ExtSample2</title>
    </head>
    <body>
        <ext-container region="Center" scrollable="false" paddingAsString="0">
            <content>
                <form id="fileUpload" enctype="multipart/form-data" method="post">
                    <ext-formPanel id="BasicForm"
                                   width="500"
                                   frame="true"
                                   modal="true"
                                   paddingAsString="20px"
                                   x-labelWidth="50">
                        <defaults>
                            <ext-add key="anchor" value="95%" mode="Value" />
                            <ext-add key="allowBlank" value="false" mode="Raw" />
                            <ext-add key="msgTarget" value="side" mode="Value" />
                        </defaults>
                        <items>
                            <ext-textField id="firstName" fieldLabel="FirstName" name="desc" />
                            <ext-textField id="lastName" fieldLabel="LastName" name="desc" />
                        </items>
                        <buttons>
                            <ext-button id="SaveButton" variant="Success" text="Save" />
                            <ext-button text="Close Client Click" variant="Danger" onClientClick="window.parent.App.Window1.close()" />
                            <ext-button text="Close Direct Event" variant="Danger" onDirectClick="CloseOuterWindow" />
                        </buttons>
                    </ext-formPanel>
                </form>
            </content>
        </ext-container>
    </body>
    </html>
    Quote Originally Posted by mehdy
    a partial view like previous versions would be awesome.
    We completely agree with you, and we have already received some queries for this feature which, unfortunately, is not supported at this time.

    You may be interested in checking ideas on alternatives discussed in this thread. Maybe for the needs you have, one or more proposed there could be of use for you; in the least, as you focus on code/page/view reusage, information there can only be useful to keep in mind: How to implement alternative to Html.RenderAction.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  9. #9
    Hi fabricio
    Thanks for the reply, seems working
  10. #10
    Thanks for the feedback, glad it helped!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Tab sequence problem on show modal window
    By lrossism in forum 3.x Help
    Replies: 0
    Last Post: Mar 05, 2015, 8:15 PM
  2. Replies: 1
    Last Post: Oct 21, 2013, 1:54 AM
  3. Replies: 3
    Last Post: Dec 05, 2012, 4:32 PM
  4. [CLOSED] Modal Partial view Window
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: May 19, 2011, 5:26 PM
  5. Show Modal window from a User Control
    By yourspraba in forum 1.x Help
    Replies: 1
    Last Post: Jun 29, 2010, 5:43 PM

Posting Permissions