[CLOSED] MVC PartialExtView

Page 2 of 5 FirstFirst 1234 ... LastLast
  1. #11

    RE: [CLOSED] MVC PartialExtView

    Hi Timothy,

    I think it is incorrect to use AutoLoad (or load method) and AddTo mode because load method updates body. Load method can be used with RenderTo mode only

    - AddTo: just use button with direct event
            <ext:Button ID="Button1" runat="server" Text="Load">
        <DirectEvents>
            <Click Url="/Test/Example/" />
        </DirectEvents>
    </ext:Button>
    - RenderTo: you can use load, just pass body.id as container
         <Click Handler="#{Panel1}.load( { scripts: true, params: {ct:#{Panel1}.body.id}, url: '/Test/Example' } );" />
          public ActionResult Example(string ct)
            {
                var result = this.PartialExtView();
    
                result.ContainerId = ct;
                result.RenderMode = RenderMode.RenderTo;
    
                return result;
            }
    I know I promised examples for you. I hope that I'll make it soon
    Vladimir Shcheglov
    Sr. Developer
  2. #12

    RE: [CLOSED] MVC PartialExtView

    Hello vladimir,

    Thanks for clarifying glad to see it was just an understanding problem on my part, I'll work with your suggestions. I wouldn't stress too much about the examples for my benefit. Would be useful for in the future for other visitors to the forum.

    Cheers,
    Timothy
  3. #13

    RE: [CLOSED] MVC PartialExtView

    vladimir,

    Quick question, how would I call the partial view if I was using the RenderMode AddTo without the autoLoad or load and no DirectEvents.

    Cheers,
    Timothy
  4. #14

    RE: [CLOSED] MVC PartialExtView

    Can you provide more details? In what scenario you need to call partial view?
    Vladimir Shcheglov
    Sr. Developer
  5. #15

    RE: [CLOSED] MVC PartialExtView

    For example:

    ExampleController.cs:
            public ActionResult Index()
            {
                return View();
            }
    
            public ActionResult Example(string containerId)
            {
                var result = PartialExtView();
    
                result.ContainerId = containerId;
                result.RenderMode = RenderMode.AddTo;
    
                return result;
            }
    Index.aspx:
    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
        <title>Example</title>
        <script type="text/javascript">
            function LoadContent()
            {
                Ext.Ajax.request( {
                    scripts: true,
                    params: {
                        containerId: 'Panel1'
                    },
                    url: '/Example/Example'
                } );
            }
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Panel ID="Panel1" runat="server"
            Height="250"
            Layout="Fit"
            Title="Example"
            Width="500">
            <Buttons>
                <ext:Button ID="Button1" runat="server" Text="Load">
                    <Listeners>
                        <Click Fn="LoadContent" />
                    </Listeners>
                </ext:Button>
                <ext:Button ID="Button2" runat="server" Text="Clear">
                    <Listeners>
                        <Click Handler="#{Panel1}.removeAll();" />
                    </Listeners>
                </ext:Button>
            </Buttons>
        </ext:Panel>
    </body>
    </html>
    This is a simplified example, in my actual project the JavaScript for LoadContent is in a script file and is reused for numerous controls. I don't want to have to define DirectEvents for my buttons.

    I know the Ext.Ajax.request() is not going to evaluate the response, but it at least gives an example of how I would like to handle calling the server from the client.

    Hope that makes sense? Got any suggestions?

    Cheers,
    Timothy
  6. #16

    RE: [CLOSED] MVC PartialExtView

    Well, just set for PartialExtView instance
    result.WrapByScriptTag = false;

    and success handler for Ext.Ajax.request
     function LoadContent()
            {
                Ext.Ajax.request( {
                    params: {
                        containerId: 'Panel1'
                    },
                    url: '/Example/Example',
                    success : function(response){
                        eval(response.responseText);
                    }
                } );
            }
    Vladimir Shcheglov
    Sr. Developer
  7. #17

    RE: [CLOSED] MVC PartialExtView

    Thanks vladimir, one more thing I noticed. If you use the RenderMode.RenderTo the following will not allow fit layout I guess the big difference between RenderMode.AddTo and RenderMode.RenderTo ?

    ExampleController.cs:
            public ActionResult Index()
            {
                return View();
            }
    
            public ActionResult Example(string containerId)
            {
                var result = PartialExtView();
    
                result.ContainerId = containerId;
                result.RenderMode = RenderMode.RenderTo;
    
                return result;
            }
    Index.aspx:
    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
        <title>Example</title>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Panel ID="Panel1" runat="server"
            Height="250"
            Layout="Fit"
            Title="Example"
            Width="500">
            <Buttons>
                <ext:Button ID="Button1" runat="server" Text="Load">
                    <Listeners>
                        <Click Handler="#{Panel1}.load( { scripts: true, params: { containerId: #{Panel1}.body.id }, url: '/Example/Example' } );" />
                    </Listeners>
                </ext:Button>
                <ext:Button ID="Button2" runat="server" Text="Clear">
                    <Listeners>
                        <Click Handler="#{Panel1}.removeAll();" />
                    </Listeners>
                </ext:Button>
            </Buttons>
        </ext:Panel>
    </body>
    </html>
    Example.ascx:
    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
    <ext:FitLayout runat="server">
        <Items>
            <ext:Panel ID="Panel123" runat="server">
                <Content>
                    This is an example
                </Content>
            </ext:Panel>
        </Items>
    </ext:FitLayout>
    Cheers,
    Timothy
  8. #18

    RE: [CLOSED] MVC PartialExtView

    vladimir,

    Found another problem when you have a Store inside of a Html.RenderExtPartial() partial view:

    ExampleController.cs:
            public ActionResult Index()
            {
                return View();
            }
    
            public ActionResult Example(string containerId)
            {
                var result = PartialExtView();
    
                result.ContainerId = containerId;
                result.RenderMode = RenderMode.AddTo;
                result.WrapByScriptTag = false;
    
                return result;
            }
    Index.aspx:
    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
        <title>Example</title>
        <script type="text/javascript">
            function LoadContent() {
                Ext.Ajax.request( {
                    params: {
                        containerId: 'Panel1'
                    },
                    scripts: true,
                    success: function(r) {
                        eval(r.responseText);
                    },
                    url: '/Example/Example'
                } );
            }
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Panel ID="Panel1" runat="server"
            Height="250"
            Layout="Fit"
            Title="Example"
            Width="500">
            <Buttons>
                <ext:Button ID="Button1" runat="server" Text="Load">
                    <Listeners>
                        <Click Fn="LoadContent" />
                    </Listeners>
                </ext:Button>
                <ext:Button ID="Button2" runat="server" Text="Clear">
                    <Listeners>
                        <Click Handler="#{Panel1}.removeAll();" />
                    </Listeners>
                </ext:Button>
            </Buttons>
        </ext:Panel>
    </body>
    </html>
    Example.ascx:
    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
    <%@ Import Namespace="Suite.Web" %>
    <ext:FitLayout runat="server">
        <Items>
            <ext:Panel ID="Panel1" runat="server">
                <Content>
                    <%= Html.RenderExtPartial("Child") %>
                </Content>
            </ext:Panel>
        </Items>
    </ext:FitLayout>
    Child.ascx:
    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
    <ext:Panel ID="PanelChild1" runat="server">
        <Content>
            Panel Child 1
        </Content>
    </ext:Panel>
    <ext:Store ID="Store1" runat="server">
        <Reader>
            <ext:JsonReader>
                <Fields>
                    <ext:RecordField Name="Name" />
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    Replication steps:

    1. Load page
    2. Click Load button
    3. Click Clear button
    4. Click Load button (notice nothing loads? Ext.ux.data error)

    Cheers,
    Timothy
  9. #19

    RE: [CLOSED] MVC PartialExtView

    Hi Timothy,

    Thank you for your example. I'll investigate it. The problem occurs under MVC only (under WebForm application the resources can register automatically)


    Use the following code as workaround (add it to the Index.aspx)
    <% ResourceManager.RegisterControlResources<Store>(); %>

    P.S. If you use the RenderMode.RenderTo the following will not allow fit layout I guess the big difference between RenderMode.AddTo and RenderMode.RenderTo ?


    Yes, RenderTo mode renders a control as independent (control doesn't particapate in layout logic of the own container)
    Vladimir Shcheglov
    Sr. Developer
  10. #20

    RE: [CLOSED] MVC PartialExtView

    Thanks vladimir,

    When I noticed the error I figured it had something to do with registering the resource.

    Cheers,
    Timothy
Page 2 of 5 FirstFirst 1234 ... LastLast

Similar Threads

  1. [CLOSED] PartialExtView Button Listener
    By Timothy in forum 2.x Premium Help
    Replies: 2
    Last Post: May 04, 2012, 3:47 PM
  2. [CLOSED] PartialExtView and Icons
    By Timothy in forum 2.x Premium Help
    Replies: 3
    Last Post: May 04, 2012, 1:39 PM
  3. [CLOSED] PartialExtView
    By Timothy in forum 2.x Premium Help
    Replies: 3
    Last Post: May 04, 2012, 1:32 PM
  4. [CLOSED] PartialExtView GridPanel Title
    By Timothy in forum 2.x Premium Help
    Replies: 3
    Last Post: May 03, 2012, 7:09 PM
  5. [CLOSED] PartialExtView and Razor
    By Timothy in forum 2.x Premium Help
    Replies: 4
    Last Post: May 03, 2012, 3:13 PM

Posting Permissions