Ext.Net 学习随笔 003 Panel基本使用

Posted 2020-07-31

Panel()

1.使用Content和html属性设置Panel内容

 前台View代码

@(X.Panel()
        .ID("panel1")
        .Width(350)
        .Height(200)
        .Title("Html")
        .BodyPadding(5)
        .Content(c=>DateTime.Now.ToString())
        .Buttons(
            X.Button()
            .Text("使用Content属性")
            .DirectEvents(de =>
            {
                de.Click.Url = Url.Action("SetHtmlProperty");
                de.Click.ExtraParams.Add(new Parameter("containerId", "panel1"));
            })
        )
    )

按钮Click事件后台代码

public ActionResult SetHtmlProperty(string containerId)
{
    this.GetCmp<Panel>(containerId).Html = DateTime.Now.ToString();
    return this.Direct();
}

2.使用Loader的Html模式从服务器获取Panel内容

View中的代码

@(X.Panel()
    .ID("panel2")
    .Width(350)
    .Height(200)
    .Title("Loader with Html mode")
    .BodyPadding(5)
    .Loader(
        X.ComponentLoader()
        .Url(Url.Action("RenderChild"))
        .Mode(LoadMode.Html)
        .LoadMask(lm=>lm.ShowMask = true)
    )
    .Buttons(
        X.Button()
        .Text("SetLoaderProperty")
        .DirectEvents(de =>
        {
            de.Click.Url = Url.Action("SetLoaderProperty");
            de.Click.Method = HttpMethod.GET;
            de.Click.ExtraParams.Add(new Parameter("containerId", "panel2"));
        }),
        X.Button()
        .Text("LoadHtmlContent")
        .DirectEvents(de =>
        {
            de.Click.Url = Url.Action("LoadHtmlContent");
            de.Click.ExtraParams.Add(new Parameter("containerId", "panel2"));
        })
    )
)

后台Button事件

public ActionResult SetLoaderProperty(string containerId)
{
    var panel = this.GetCmp<Panel>(containerId);
    panel.Loader = new ComponentLoader
    {
        Url = Url.Action("RenderChild"),
        DisableCaching = true
    };
    panel.Loader.SuspendScripting();
    panel.LoadContent();

    return this.Direct();
}

public ActionResult LoadHtmlContent(string containerId)
{
    this.GetCmp<Panel>(containerId).LoadContent("RenderChild", true);
    return this.Direct();
}

3.使用Loader的Frame模式从服务器获取Panel内容

View中代码

@(X.Panel()
    .ID("panel3")
    .Width(350)
    .Height(200)
    .Title("Loader with Frame mode")
    .BodyPadding(5)
    .Loader(
        X.ComponentLoader()
        .Url(Url.Action("RenderChild"))
        .Mode(LoadMode.Frame)
        .LoadMask(lm=>lm.ShowMask = true)
    )
    .Buttons(
        X.Button()
        .Text("SetIFrameLoadProperty")
        .DirectEvents(de =>
        {
            de.Click.Url = Url.Action("SetIFrameLoadProperty");
            de.Click.Method = HttpMethod.GET;
            de.Click.ExtraParams.Add(new Parameter("containerId", "panel3"));
        }),
        X.Button()
            .Text("LoadIFrameContent")
            .DirectEvents(de =>
            {
                de.Click.Url = Url.Action("LoadIFrameContent");
                de.Click.ExtraParams.Add(new Parameter("containerId", "panel3"));
            })
    )
)

后台Button事件

public ActionResult SetIFrameLoadProperty(string containerId)
{
    Panel panel = this.GetCmp<Panel>(containerId);
    panel.Loader = new ComponentLoader
    {
        Url = Url.Action("RenderChild"),
        DisableCaching = true,
        Mode = LoadMode.Frame
    };
    panel.Loader.SuspendScripting();
    panel.LoadContent();
    return this.Direct();
}

public ActionResult LoadIFrameContent(string containerId)
{
    this.GetCmp<Panel>(containerId).LoadContent(new ComponentLoader
    {
        Url = Url.Action("RenderChild"),
        DisableCaching = true,
        Mode = LoadMode.Frame
    });
    return this.Direct();
}