[CLOSED] [MVC] Send Container or Container[] From Controller To Js function

[Tactem]

Hi guys,

I want to dynamically add container into panel. When i click on gridCell, i call a js function.
In this function, i use $.ajax of jquery to call AjaxResult and try to return a new panel.
I try to add new panel in tempPanel but we can't add item in panel in ajaxResult function.
I try renderReplace but js function was call before render.

Index.cshtml

     Html.X().Viewport()
        .Layout(LayoutType.Fit)
        .Items
        (
            Html.X().Panel()
            .Layout(LayoutType.Border)
            .ID("temp1")
            .Items
            (
                Html.X().Panel()
                .ID("TemplatePanel")
                .Region(Region.West)
                .Flex(1)
                .Title(Html.GetResource("ReportManager", "MyReports"))
                .ButtonAlign(Alignment.Center)
                .Layout(LayoutType.VBox)
                .LayoutConfig(new VBoxLayoutConfig() { Align = VBoxAlign.Stretch })
                .Items
                (
                    Html.X().GridPanel()
                    .ID("GridTemplate")
                    .Flex(1)
                    .HideHeaders(true)
                    .Store
                    (
                        Html.X().Store()
                        .AutoDataBind(true)
                        .Model(
                            Html.X().Model()
                            .IDProperty("Id")
                            .Fields(m =>
                                {
                                    m.Add(new ModelField("Id", ModelFieldType.Int));
                                    m.Add(new ModelField("Name", ModelFieldType.String));
                                    m.Add(new ModelField("UserData_Id", ModelFieldType.String));
                                }
                            )
                        )
                        .Proxy
                        (
                            Html.X().AjaxProxy()
                            .Url(Url.Action("GetUserReportTemplate"))
                            .Reader
                            (
                                Html.X().JsonReader()
                                .Root("data")

                            )
                        )
                    )
                    .ColumnModel(
                        Html.X().Column().Flex(1).DataIndex("Name"),
                        Html.X().CommandColumn()
                        .Commands(
                            Html.X().GridCommand()
                            .Icon(Icon.Delete)
                            .CommandName("Delete")
                        )
                        .Width(60)
                        .ToolTip("Delete")
                        .Listeners(p => p.Command.Fn = "DeleteTemplate")
                    )
                    .Listeners(p=>p.Select.Fn = "LoadAllSection")
                ),
                Html.X().TabPanel()
                .Flex(3)
                .Layout(LayoutType.Fit)
                .Region(Region.Center)
                .Items
                (
                    Html.X().Panel()
                    .ID("ReportManagementTab")
                    .Title(Html.GetResource("ReportManager", "Management")),
                    Html.X().Panel()
                    .ID("AutomatedGeneratedTab")
                    .Title(Html.GetResource("ReportManager", "AutomateAndGenerate")),
                    Html.X().Container()
                        .ID("PanelTemp")
            .Hidden(true)

                )
            )
        )

Js function

var LoadAllSection = function (item, record, index)
{
    var templateID = record.data.Id;
    var list = null;
    $.ajax({
        url: AppPath + "ReportingManager/GetSectionFromTemplate?idTemplate=" + templateID,
        contentType: 'application/json; charset=utf-8',
        type: 'POST',
        success: function (response, status, xhr) {
            if (response.result == 1) {
                Ext.getCmp('PanelSections').items.add(Ext.getCmp('PanelTemp').items.items[0]);
                Ext.getCmp('PanelTemp').items.clear();
            }
            else alert(TIO.Resources.ErrorLoadSection);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert('error');
        }
    });
}

Controlleur function

        public AjaxResult GetSectionFromTemplate(int idTemplate)
        {
            TIOMembershipUser currentUser = _memberShipService.GetUser();
            List<Section> template = _reportingManagerService.GetSectionByTemplate(currentUser.UserInfos.GroupId, idTemplate);
            var panelTemp = X.GetCmp<Panel>("PanelTemp");
            panelTemp.Title = "test";
            Panel panel1 = new Panel() { ID = idTemplate + "1" };
            panelTemp.Add(panel1);
            AjaxResult retour = new AjaxResult();
            retour.Result = 1;
            return retour;
        }

Controlleur action with renderMode

public AjaxResult GetSectionFromTemplate(int idTemplate)
        {
            Ext.Net.MVC.AjaxResult response = new Ext.Net.MVC.AjaxResult();
            Container c = new Container()
            {
                Layout = LayoutType.Fit.ToString(),
                ID = "PanelTemp"
            };
            c.Items.Add(new Button
            {
                Text = "Button1",
                Icon = Icon.Add
            });
            c.Items.Add(new Button
            {
                Text = "Button2",
                Icon = Icon.Disk
            });
            response.Script = c.ToScript(Ext.Net.RenderMode.Auto, "PanelTemp", true);
            X.Js.Call("testFunction");
            return response;
}

Regards

[geoffrey.mcgill]

Hello,

If you are using jQuery to call the Controller, then you'll have to work out how to parse the response coming back from the AjaxResult.

The Ext.NET AjaxResult is optimised to work with a DirectEvent or DirectMethod request.

[geoffrey.mcgill]

Maybe the following sample from the MVC Examples Explorer can help:

http://mvc.ext.net/#/XRender_Basic/Add_Items/

[Tactem]

Maybe the following sample from the MVC Examples Explorer can help:

http://mvc.ext.net/#/XRender_Basic/Add_Items/

Thank you, it works with DirectEvent.