Custom Window with Record Details on MVC

  1. #1

    Custom Window with Record Details on MVC

    Hi, I am migrating the following webform example to mvc

    http://examples2.ext.net/#/GridPanel...etails_Window/

    This is my view code

    @{
        Layout = null;
        @Html.X().ResourceManager()
    }
    
    
    @{
        <script>
            var CompanyX = {
                _index: 0,
    
                getIndex: function () {
                    return this._index;
                },
    
                setIndex: function (index) {
                    if (index > -1 && index < App.GridPanel1.getStore().getCount()) {
                        this._index = index;
                    }
                },
    
                getRecord: function () {
                    var rec = App.GridPanel1.getStore().getAt(this.getIndex());  // Get the Record
    
                    if (rec != null) {
                        return rec;
                    }
                },
    
                edit: function (index) {
                    this.setIndex(index);
                    this.open();
                },
    
                next: function () {
                    this.edit(this.getIndex() + 1);
                },
    
                previous: function () {
                    this.edit(this.getIndex() - 1);
                },
    
                refresh: function () {
                    App.GridPanel1.getView().refresh();
                }
            };
        </script>
    }
    
    @(Html.X().GridPanel()
        .ID("GridPanel1")
        .Title("Employees")
        .Height(200)
        .Store(Html.X().Store()
            .PageSize(5)
            .Proxy(proxy =>
                    proxy.Add(Html.X().AjaxProxy()
                                .Url("Employees")
                                .ActionMethods(methods =>
                                    methods.Read = HttpMethod.POST
                                )
                                .Reader(Html.X().JsonReader()
                                    .TotalProperty("total")
                                    .Root("data")
                                )
                                .Listeners(l => l.Exception.Handler = "Ext.MessageBox.alert('Load failed', response.statusText);")
                    )
            )
            .Model(Html.X().Model()
                .IDProperty("EmployeeID")
                .Fields(
                    new ModelField("EmployeeID"),
                    new ModelField("FirstName"),
                    new ModelField("LastName"),
                    new ModelField("Title"),
                    new ModelField("TitleOfCourtesy"),
                    new ModelField("BirthDate", ModelFieldType.Date),
                    new ModelField("HireDate", ModelFieldType.Date),
                    new ModelField("City"),
                    new ModelField("Address"),
                    new ModelField("Region"),
                    new ModelField("PostalCode"),
                    new ModelField("Country"),
                    new ModelField("Homephone"),
                    new ModelField("Extension"),
                    new ModelField("Notes"),
                    new ModelField("Photopath"),
                    new ModelField("ReportsTo")
                )
            )
            .Sorters(Html.X().DataSorter()
                .Property("LastName")
                .Direction(Ext.Net.SortDirection.ASC)
            )
        )
        .ColumnModel(
            Html.X().Column().Text("Full Name").DataIndex("LastName").Flex(1).Renderer(new Renderer() { Fn = "return '<b>' + record.data['LastName'] + '</b>,' + record.data['FirstName']" }),
            Html.X().Column().Text("Title").DataIndex("Title").Width(150),
            Html.X().DateColumn().Text("Birth Date").DataIndex("BirthDate").Format("yyyy-MM-dd"),
            Html.X().Column().Text("City").DataIndex("City").Width(100),
            Html.X().Column().Text("Address").DataIndex("Address").Width(250),
            Html.X().CommandColumn()
                .Commands(c =>
                {
                    c.Add(Html.X().GridCommand().CommandName("Edit").Icon(Icon.NoteEdit));
                })
                .ToolTip("Edit")
                .Listeners(listener =>
                {
                    listener.Command.Handler = "CompanyX.edit(recordIndex);";
                })
        )
        .BottomBar(
            Html.X().PagingToolbar()
                .DisplayInfo(true)
                .DisplayMsg("Displaying employees {0} - {1} of {2}")
                .EmptyMsg("No employees to display")
        )
    )
    But I don't know how to return json data from controller

            public ActionResult Index()
            {
                List<Employee> result = Employee.GetAll();
                return this.Store(result);
             }
    Could you help me or give me some example? Thanks
  2. #2
    Hi @logidat,

    You've defined
    .Url("Employees")
    but posting
    public ActionResult Index()
    There should be the Employees controller action, is there any?
  3. #3
    Thanks @Daniil

    The Index action belongs to employees controller

    public class EmployeesController : Controller
    {
            public ActionResult Index()
            {
                List<Employee> result = Employee.GetAll();
                return this.Store(result);
            }
    }
  4. #4
    Does the Ajax proxy hit that controller action?

    What controller action do you use to render the View itself?

Similar Threads

  1. [CLOSED] Problems with Custom Window with Record Details
    By opendat2000 in forum 2.x Premium Help
    Replies: 1
    Last Post: Mar 26, 2014, 10:09 PM
  2. Replies: 0
    Last Post: Nov 12, 2012, 7:36 AM
  3. Replies: 1
    Last Post: Sep 26, 2012, 12:13 PM
  4. Replies: 1
    Last Post: Apr 22, 2012, 4:17 PM
  5. Replies: 0
    Last Post: Oct 24, 2011, 5:26 PM

Tags for this Thread

Posting Permissions