What's New?

[CLOSED] Loading Partial View under a formpanel

  1. #1
    Jul 25, 2012, 10:22 AM

    [CLOSED] Loading Partial View under a formpanel

    Hi,
    I implemented a FormPanel I would like to load a partial view under the form, when I click on button the partial view doesn't appear
    This is the code below:
    Controller Code : 
     public ActionResult Test()
        {
            return View();
        }

        public Ext.Net.MVC.PartialViewResult  GetSearchGrid()
        {
            Ext.Net.MVC.PartialViewResult pr = new Ext.Net.MVC.PartialViewResult();
            return pr;
        }
    FormPanel ASPX Code: 
    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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">
    <script src="../../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var onClick = function () {
            $('#partial_div').load('/Test/GetSearchGrid', null,
                    function (success, error) {
                    });
        };
    </script>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>
    <form id="_formGridSearch" runat="server">
    </form>
    <ext:Panel ID="_pnlCptySearchView" runat="server" Border="false" Header="false" AutoWidth="true">
        <Items>
            <ext:FormPanel runat="server" ID="_searchFormPnl" Border="false" Header="false">
                <Items>
                    <ext:FieldSet runat="server" ID="_fieldSet">
                        <Items>
                            <ext:TextField FieldLabel="Test" runat="server" ID="_txt">
                            </ext:TextField>
                        </Items>
                    </ext:FieldSet>
                    <ext:Button runat="server" ID="_btn" Text="Search">
                        <Listeners>
                            <Click Handler="onClick()">
                            </Click>
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:FormPanel>
        </Items>
        <Content>
            <div id="partial_div">
            </div>
        </Content>
    </ext:Panel>
</body>
</html>
    Partial View ASCX Code :
    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<ext:Panel ID="_gridPnlCpty" Border="false" Header="false" runat="server" AutoHeight="true"
    Layout="FitLayout">
    <Content>
        <h1>
            Partial View</h1>
    </Content>
</ext:Panel>
    Last edited by Daniil; Jul 25, 2012 at 5:20 PM. Reason: [CLOSED]
  2. #2
    Jul 25, 2012, 11:54 AM
    Hi,

    Do you really need to use JQuery to make an AJAX request? In this case you will need to parse a response manually.

    I would recommend to use DirectEvent or DirectMethod to avoid manual parsing of a response.

    PartialViewResult requires a container id where a partial view should be rendered. It is rendered to <body> by default and it is no that you need.

    Regarding your partial view.

    AutoHeight="true"
    and
    Layout="FitLayout"
    сontradicts each other and should not be used together.

    Also any Layout can't deal with raw HTML. So, please remove:
    Layout="FitLayout"
    Generally, I would recommend to use Loader.
    http://forums.ext.net/showthread.php...ll=1#post84459
  3. #3
    Jul 25, 2012, 2:00 PM
    Hi,
    I implemented ext js load method, I had this error: 
    this.getLoader() is null
    This is the code below : 
    public ActionResult Test()
        {
            return View();
        }

        public Ext.Net.MVC.PartialViewResult  GetSearchGrid(String containerID)
        {
            Ext.Net.MVC.PartialViewResult pr = new Ext.Net.MVC.PartialViewResult(containerID);
            pr.SingleControl = true;
            pr.RenderMode = Ext.Net.RenderMode.AddTo;
            return pr;
        }
    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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">
    <script src="../../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var onClick = function () {
            App._pnlPartial.load(
                    {
                        url: "/Test/GetSearchGrid",
                        params:
                        {
                            'containerID': '_pnlPartial'
                        },
                        scripts: true
                    });
        };
    </script>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>
    <form id="_formGridSearch" runat="server">
    </form>
    <ext:Viewport runat="server" Layout="BorderLayout">
        <Items>
            <ext:Panel ID="_pnlCptySearchView" runat="server" Border="false" Header="false" AutoWidth="true"
                Region="North">
                <Items>
                    <ext:FormPanel runat="server" ID="_searchFormPnl" Border="false" Header="false">
                        <Items>
                            <ext:FieldSet runat="server" ID="_fieldSet">
                                <Items>
                                    <ext:TextField FieldLabel="Test" runat="server" ID="_txt">
                                    </ext:TextField>
                                </Items>
                            </ext:FieldSet>
                            <ext:Button runat="server" ID="_btn" Text="Search">
                                <Listeners>
                                    <Click Handler="onClick()">
                                    </Click>
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:FormPanel>
                </Items>
            </ext:Panel>
            <ext:Panel ID="_pnlPartial" runat="server" Border="false" Header="false" AutoWidth="true"
                Region="Center">
            </ext:Panel>
        </Items>
    </ext:Viewport>
</body>
</html>
    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<ext:Panel ID="_gridPnlCpty" Border="false" Header="false" runat="server">
    <Content>
        <h1>
            Partial View</h1>
    </Content>
</ext:Panel>
  4. #4
    Jul 25, 2012, 2:18 PM
    Good choice.

    Please set up
    <Loader 
    runat="server" 
    AutoLoad="false" 
    Mode="Component" 
    RemoveAll="true" />
    for the "_pnlPartial" Panel.

    And use the following controller action:
    public ContentResult GetSearchGrid()
{
    return Content(ComponentLoader.ToConfig("~/Views/Test/GetSearchGrid.ascx"));
}
  5. #5
    Jul 25, 2012, 2:26 PM
    Quote Originally Posted by Daniil View Post
    Good choice.

    Please set up
    <Loader 
    runat="server" 
    AutoLoad="false" 
    Mode="Component" 
    RemoveAll="true" />
    for the "_pnlPartial" Panel.

    And use the following controller action:
    public ContentResult GetSearchGrid()
{
    return Content(ComponentLoader.ToConfig("~/Views/Test/GetSearchGrid.ascx"));
}
    It works thank you

Similar Threads

  1. [CLOSED] Loading panel with MVC partial view
    By bbo1971 in forum 2.x Legacy Premium Help
    Replies: 26
    Last Post: Jul 25, 2012, 1:04 AM
  2. [CLOSED] Partial View Error
    By peter.campbell in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 10, 2012, 10:32 AM
  3. [CLOSED] Partial View & FormPanel Submit
    By peter.campbell in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 14, 2011, 12:01 PM
  4. [CLOSED] RegisterOnReadyScript in MVC partial view
    By SandorD in forum 1.x Legacy Premium Help
    Replies: 22
    Last Post: Aug 10, 2011, 4:17 PM
  5. [CLOSED] Error loading partial view in Tab.
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 20, 2011, 8:00 PM

Posting Permissions