ExtJs+C#的WebService练习模板

木生火18624

于 2019-08-01 17:18:05 发布

阅读量167

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/penghao_1/article/details/98078830

版权

jquery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏


    /// <summary>
    /// 这个是用于获取所有记录到页面进行展示
    /// </summary>
    [ScriptMethod(ResponseFormat = ResponseFormat.Json), WebMethod(EnableSession = true)]
    public void read()
    {
        var info = "[{\"id\":\"01\",\"email\":\"a1\",\"first\":\"a2\",\"last\":\"a3\"},{\"id\":\"02\",\"email\":\"b1\",\"first\":\"b2\",\"last\":\"b3\"},{\"id\":\"03\",\"email\":\"c1\",\"first\":\"c2\",\"last\":\"c3\"}]";
        Context.Response.Charset = "UTF-8"; //设置字符集类型  
        Context.Response.ContentEncoding = System.Text.Encoding.GetEncoding("UTF-8");
        Context.Response.ContentType = "application/json; charset=UTF-8";
        Context.Response.Write(info);
        Context.Response.End();

    }



    /// <summary>
    /// 这个集合传过来
    /// </summary>
    /// <param name="ListData"></param>
    [ScriptMethod(ResponseFormat = ResponseFormat.Json), WebMethod(EnableSession = true)]
    public void create(List<Email> ListData)
    {
        //在这里对集合进行校验，如果是新增的则入库，如果是修改的则更新
        string strName = "";

    }

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="rowEdit.aspx.cs" Inherits="rowEdit" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta name="google" content="notranslate" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="en">
    
     <title>Writer Example</title>
    <link href="EtxJs/examples/classic/shared/examples.css" rel="stylesheet" />
    <link href="EtxJs/examples/classic/writer/writer.css" rel="stylesheet" />
    <!-- GC -->
      
     <script src="EtxJs/examples/classic/shared/include-ext.js"></script>
     <script src="EtxJs/examples/classic/shared/options-toolbar.js"></script>
     <script src="EtxJs/examples/classic/shared/examples.js"></script>
     <script src="EtxJs/examples/classic/writer/writer.js"></script>
     <script src="EtxJs/ext-lang-zh_CN.js"></script>
</head>
<body>
</body>
</html>

Ext.define('Writer.Form', {
    extend: 'Ext.form.Panel',
    alias: 'widget.writerform',

    requires: ['Ext.form.field.Text'],

    setActiveRecord: function(record){
        this.activeRecord = record;
        if (record) {
            this.getForm().loadRecord(record);
        } else {
            this.getForm().reset();
        }
    },
});

Ext.define('Writer.Grid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.writergrid',

    requires: [
        'Ext.grid.plugin.CellEditing',
        'Ext.form.field.Text',
        'Ext.toolbar.TextItem'
    ],

    initComponent: function () {
        Ext.apply(this, {
            iconCls: 'icon-grid',
            frame: true,
            plugins: {
                cellediting: true
            },
            dockedItems: [{
                xtype: 'toolbar',
                items: [{
                    iconCls: 'icon-add',
                    text: 'Add',
                    scope: this,
                    handler: this.onAddClick
                }, {
                    iconCls: 'icon-delete',
                    text: 'Delete',
                    //disabled: true,
                    itemId: 'delete',
                    scope: this,
                    handler: this.onDeleteClick
                }]
            }, 
            {
                weight: 1,
                xtype: 'toolbar',
                dock: 'bottom',
                ui: 'footer',
                items: ['->', {
                    iconCls: 'icon-save',
                    text: 'TestSave',
                    scope: this,
                    handler: this.onSave
                }]
            }],
            columns: [ {
                text: 'id',
                width: 50,
                sortable: true,
                resizable: false,
                draggable: false,
                hideable: false,
                menuDisabled: true,
                dataIndex: 'id',
                renderer: function (value) {
                    //先将字符串转换为整型
                    var ttValue = value.length > 0 ? parseInt(value) : "";
                    return Ext.isNumber(ttValue) ? ttValue : '&nbsp;';
                }
                }
            , {
                header: 'emailName',
                flex: 1,
                sortable: true,
                dataIndex: 'email',
                field: {
                    type: 'textfield'
                }
            }, {
                header: 'first',
                width: 100,
                sortable: true,
                dataIndex: 'first',
                field: {
                    type: 'textfield'
                }
            }, {
                header: 'last',
                width: 100,
                sortable: true,
                dataIndex: 'last',
                field: {
                    type: 'textfield'
                }
            }]
        });
        this.callParent();
        this.getSelectionModel().on('selectionchange', this.onSelectChange, this);
    },
    
    onSelectChange: function(selModel, selections){
        this.down('#delete').setDisabled(selections.length === 0);
    },

    /*t同步保存按钮事件*/
    onSave: function () {
        var itemList = this.store.data.items;//每个items里面都有一个data,将data里面的值都取出来
        var ListData = new Array();

        for (var i = 0; i < itemList.length; i++) {
            ListData.push(itemList[i].data);
        }

        Ext.Ajax.request({
            url: 'Account/WebService.asmx/create',
            method: 'POST',
            jsonData: { ListData: ListData },
            success: OnGetDataSuccess,
            failure: OnGetDataFail
        });

        function OnGetDataSuccess() {
            alert("success");
        }

        function OnGetDataFail() {
            alert("false");
        }
    },
    //删除
    onDeleteClick: function(){
        var selection = this.getView().getSelectionModel().getSelection()[0];
        if (selection) {
            this.store.remove(selection);
        }
    },
    //增加
    onAddClick: function () {
        var rec = new Writer.Person({
                id: "",
                first: "",
                last: "",
                email: ""
            }),
            edit = this.findPlugin('cellediting');

        edit.cancelEdit();
        this.store.insert(0, rec);
        edit.startEditByPosition({
            row: rec,
            column: 1
        });
    }
});

Ext.define('Writer.Person', {
    extend: 'Ext.data.Model',
    fields: [
    "id", "email", "first", "last"],
    validators: {
        email: {
            type: 'length',
            min: 1
        },
        first: {
            type: 'length',
            min: 1
        },
        last: {
            type: 'length',
            min: 1
        }
    }
});

Ext.require([
    'Ext.data.*',
    'Ext.tip.QuickTipManager',
    'Ext.window.MessageBox'
]);

Ext.onReady(function () {
    var dataa = new Array(); 
    var store = "";
    var data = "";
    Ext.tip.QuickTipManager.init();

    Ext.define('Writer.Person', {
        extend: 'Ext.data.Model',
        fields: [
        "id", "email", "first", "last"]
    });

  
    Ext.Ajax.request({
        url: '/Account/WebService.asmx/read',
        method: 'POST',
        //jsonData: { UserName: "" },
        //headers:{'Content-Type':'application/json;utf-8'},
        success: OnGetDataSuccess,
        failure: OnGetDataFail
    });

    function OnGetDataSuccess(request, options) {

       var  data = Ext.util.JSON.decode(request.responseText);
       for (var i = 0; i < data.length;i++){
           var modelData = [data[i].id, data[i].email, data[i].first, data[i].last]
           dataa.push(modelData);
       }
       store = new Ext.data.ArrayStore({
           data: dataa,
           fields: [
              { name: "id" },
              { name: "email" },
              { name: "first" },
              { name: "last" }
           ]
       });

       var main = Ext.create('Ext.container.Container', {
           width: 500,
           height: 650,
           renderTo: document.body,
           layout: {
               type: 'vbox',
               align: 'stretch'
           },
           items: [{
               itemId: 'form',
               xtype: 'writerform',
               manageHeight: false,
               margin: '0 0 10 0',
               listeners: {
                   create: function (form, data) {
                       store.insert(0, data);
                   }
               }
           }, {
               itemId: 'grid',
               xtype: 'writergrid',
               title: 'User List',
               flex: 1,
               store: store,
               listeners: {
                   selectionchange: function (selModel, selected) {
                       main.child('#form').setActiveRecord(selected[0] || null);
                   }
               }
           }]
       });

    };

    function OnGetDataFail() {
        alert("false");
    };

});

js的请求发送的部分是：

木生火18624

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJs+C#的WebService练习模板

/// <summary> /// 这个是用于获取所有记录到页面进行展示 /// </summary> [ScriptMethod(ResponseFormat = ResponseFormat.Json), WebMethod(EnableSession = true)] public void read() { ...
复制链接

扫一扫