Question

我的视图没有显示任何记录，您能帮我吗，我正在使用ExtJS和MVC .Net，我只想显示记录。

也许我需要使用gridview或div来批处理数据，但是我不知道如何放置它，这段代码不会给我带来任何错误，但是却无法显示任何内容。

这是我的代码：

app.js （我在其中放置了ExtJS代码）

var Contact = Ext.data.Record.create([{
    name: 'Id',
    type: 'string'
}, {
    name: 'Name',
    type: 'string'
}, {
    name: 'Phone',
    type: 'string'
}, {
    name: 'Email',
    type: 'string'
}]);

var writer = new Ext.data.JsonWriter({
    encode: false,
    listful: true,
    writeAllFields: true
});

var reader = new Ext.data.JsonReader({
    totalProperty: 'total',
    successProperty: 'success',
    idProperty: 'Id',
    root: 'data',
    messageProperty: 'message' // <-- New "messageProperty" meta-data
}, Contact);

var proxy = new Ext.data.HttpProxy({
    api: {
        read: '/Contact/Load',
        //create: '/Contact/Create',
        //update: '/Contact/Update',
        //destroy: '/Contact/Delete'
    },
    headers: {
        'Content-Type': 'application/json; charset=UTF-8'
    }
});

var store = new Ext.data.Store({
    id: 'user',
    proxy: proxy,
    reader: reader,
    writer: writer,
    autoSave: false
});

var grid = new Ext.grid.GridPanel({
    store: store,
    columns: [{
        header: "Name",
        width: 170,
        sortable: true,
        dataIndex: 'Name',
        editor: {
            xtype: 'textfield',
            allowBlank: false
        }
    }, {
        header: "Phone No.",
        width: 160,
        sortable: true,
        dataIndex: 'Phone',
        editor: {
            xtype: 'textfield',
            allowBlank: false
        }
    }, {
        header: "EMail",
        width: 170,
        sortable: true,
        dataIndex: 'Email',
        editor: {
            xtype: 'textfield',
            allowBlank: false
        }
    }],
    //plugins: editor,
    title: 'Contacts DataGrid',
    height: 300,
    width: 510,
    tbar: [{
        iconCls: 'icon-user-add',
        text: 'Add Contact',
        handler: function () {
            var e = new Contact({
                Name: 'New Friend',
                Phone: '(65) 89182736',
                Email: 'new@google.com'
            });
            editor.stopEditing();
            store.insert(0, e);
            grid.getView().refresh();
            grid.getSelectionModel().selectRow(0);
            editor.startEditing(0);
        }
    }, {
        ref: '../removeBtn',
        iconCls: 'icon-user-delete',
        text: 'Remove Contact',
        handler: function () {
            editor.stopEditing();
            var s = grid.getSelectionModel().getSelections();
            for (var i = 0, r; r = s[i]; i++) {
                store.remove(r);
            }
        }
    }, {
        iconCls: 'icon-user-save',
        text: 'Save All Modifications',
        handler: function () {
            store.save();
        }
    }]
});

型号：

public class Contact
{
    public string Id { get; set; }
    public string Name { get; set; }
    public string Phone { get; set; }
    public string Email { get; set; }

    public Contact(string pName, string pPhone, string pEmail)
    {
        this.Id = System.Guid.NewGuid().ToString();
        this.Name = pName;
        this.Phone = pPhone;
        this.Email = pEmail;
    }

    public Contact() { }
}

控制器：

    public JsonResult Load()
    {
        var contact = new List<Contact> {
            new Contact("Smith","95746325","smith@me.com"),
            new Contact("Adam","87291034","adam@me.com"),
            new Contact("Eve","98271345","eve@me.com"),
            new Contact("Chun Li","81728312","chun.li@me.com")
        };
        return Json(new
        {
            total = contact.Count,
            data = contact,
        }, JsonRequestBehavior.AllowGet);
    }

查看：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/charts-all.css" rel="stylesheet" />
    <script src="~/Scripts/ext-all.js"></script>
    <script src="~/Scripts/app.js"></script>
</head>
<body>
    <div>
    </div>
</body>
</html>

不显示ExtJS和MVC.Net的记录

0 个答案: