使用Ext.Panel加载器加载ASP-MVC视图

时间:2013-04-03 10:45:27

标签: asp.net-mvc asynchronous ext.net

我有以下布局,与我在this question

中描述的布局相关
<ext:Viewport runat="server">
  <Items>
    <ext:Panel Region="North" runat="server" ID="TopBar" />
    <ext:Panel Region="West" runat="server" ID="Nav" >
       <Items>
          <ext:Button runat="server" ID="loaderComponentFooBar">
             <DirectEvents>
                <Click OnEvent="loadFooBar" />
             </DirectEvents>
          </ext:Button>
          //Some more Buttons each with his own loader Function in Code-Behind
       </Items>
    </ext:Panel>
    <ext:Panel runat="server" Region="center" ID="MainPanel" />
  </Items>
</ext:Viewport>

on Button-Click i现在想要将我的View @“/ Foo / Bar /”加载到MainPanel

我如何在CodeBehind中实现这一目标?

我已经尝试过:

public void loadFooBar(object sender, DirectEventArgs e)
{
   MainPanel.Loader.Url = "/Foo/Bar/"; //Throws null reference Exception

   MainPanel.Loader.Url = "~/Foo/Bar/"; // same as above

   MainPanel.Loader.GetUrlByRoute("Foo/Bar/"); //again the same

   MainPanel.Loader.LoadContent("/Foo/Bar/");

   //and after each of these attempts except the last went:
   MainPanel.Loader.Mode = LoadMode.Frame;
   MainPanel.Loader.LoadMask.ShowMask = false;
   MainPanel.Loader.LoadContent();
}

顺便说一下,我正在使用aspx-web-application视图

1 个答案:

答案 0 :(得分:4)

我认为你不应该为DirectEvents的处理程序使用页面代码。它走出了MVC的概念。您应该参考控制器的操作。

这是一个例子。

示例视图

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.Net.MVC v2 Example</title>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:Viewport runat="server" Layout="BorderLayout">
        <Items>
            <ext:Panel runat="server" Region="West" Width="100">
                <Items>
                    <ext:Button 
                        runat="server" 
                        Text="Load View 1" 
                        DirectClickUrl=<%# Url.Action("LoadView1") %>
                        AutoDataBind="true" />

                    <ext:Button 
                        runat="server" 
                        Text="Load View 2" 
                        DirectClickUrl=<%#Url.Action("LoadView2") %>
                        AutoDataBind="true" />
                </Items>
            </ext:Panel>

            <ext:Panel ID="MainPanel" runat="server" Region="Center">
                <Loader runat="server" Mode="Frame" AutoLoad="false">
                    <LoadMask ShowMask="true" />
                </Loader>
            </ext:Panel>
        </Items>
    </ext:Viewport>
</body>
</html>

示例控制器

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

namespace Work2MVC.Controllers
{
    public class AspxController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult View1()
        {
            return View();
        }

        public ActionResult View2()
        {
            return View();
        }

        public ActionResult LoadView1()
        {
            Panel p = X.GetCmp<Panel>("MainPanel");
            p.LoadContent(Url.Action("View1"));

            return this.Direct();
        }

        public ActionResult LoadView2()
        {
            Panel p = X.GetCmp<Panel>("MainPanel");
            p.LoadContent(Url.Action("View2"));

            return this.Direct();
        }
    }
}

您也可以通过JavaScript在客户端发起加载请求。然后你就避免了额外的请求。