浅析flex 4实战中前端数据交互

    在flex 4实战基础教程当中有一个重点的知识内容，是我们进行flex编程以及相关操作任务的时候必须要完成的一个操作内容。那么就是flex的前端数据交互。这一个知识点在flex入门教程学习过程中难倒了不少的人，现在我们就来详细的分析介绍一下基础教程中的前端数据交互内容。
前端UI与数据交互的viewModel


function viewModelOrganize(data) {
    var self = this;
    this.refreshClick = function () {
        window.location.reload();
    };
    this.save = function (vm,win) {
        var post = { form: ko.toJS(vm.form) };
        com.ajax({
            type: 'POST',
            url: '/api/sys/organize/edit',
            data: JSON.stringify(post),
            success: function (d) {
                com.message('success', '保存成功！');
                win.dialog('close');
                self.initGraph(d);
            }
        });
    }
    this.addClick = function () {
        var defaults = { ParentCode: (self.selectNode || {}).OrganizeCode || 0 };
        self.openDiloag("添加新机构", defaults, function (vm, win) {
            if (com.formValidate(win)) {
                vm.form._OrganizeCode = vm.form.OrganizeCode();
                self.save(vm,win);
            }
        });
    };
    this.editClick = function () {
        if (!self.selectNode) return com.message
self.selectNode.OrganizeName,self.selectNode, function (vm, win) {
            if (com.formValidate(win)) {
                self.save(vm,win);
            }
        });
    };
    this.deleteClick = function () {
        if (!self.selectNode) return com.message('warning',
function (b) {
            if (b) {
                com.ajax({
                    type: 'DELETE',
                    url: '/api/sys/organize/' + self.selectNode.OrganizeCode,
                    success: function (d) {
                        com.message('success', '删除成功！');
                        self.initGraph(d);
                    }
                });
            }
        });
    };
    this.roleClick = function () {
        if (!self.selectNode)
            return com.message('warning', '
com.dialog({
            title:
width: 600,
            height: 450,
            html: "#setrole-template",
            viewModel: function (w) {
                var thisRole = this;
                this.OrganizeName = ko.observable(self.selectNode.OrganizeName);
                com.loadCss('/Resource/css/metro/css/modern.css', parent.document);
                com.ajax({
                    type: 'GET',
                    url: '/api/sys/organize/getrolewithorganizecheck/' + self.selectNode.OrganizeCode,
                    success: function (d) {
                        var ul = w.find(".listview");
                        for (var i in d)
                            ul.append(utils.formatString('

{1}

', d.RoleCode, d.RoleName, d.Checked == 'true' ? 'selected' : ''));
                        ul.find("li").click(function () {
                            if ($(this).hasClass('selected'))
                                $(this).removeClass('selected');
                            else
                                $(this).addClass('selected');
                        });
                    }
             
web api controller中：
    public class OrganizeApiController : ApiController
    {
        public dynamic GetRoleWithOrganizeCheck(string id)
        {
            var service = new sys_organizeService();
            return service.GetOrganizeRole(id);
        }




        [System.Web.Http.HttpPost]
        public dynamic Edit(dynamic data)
        {
            var formWrapper = RequestWrapper.Instance().LoadSettingXmlString(@"

   
        sys_organize
   
   
       
   
");
            var service = new sys_organizeService();
            service.Edit(formWrapper, null, data);
var result = service.GetModelList();
            return result;
        }




        public dynamic Delete(string id)
        {
            var service = new sys_organizeService();
            service.RecursionDelete(id);
            var result = service.GetModelList();
            return result;
        }




        [System.Web.Http.HttpPost]
        public void EditOrganizeRoles(string id, dynamic data)
        {
            var service = new sys_organizeService();
            service.SaveOrganizeRoles(id, data as JToken);
　　在flex 4实战基础教程中的前端数据交互知识内容主要是笼统性的介绍，对于很多实际操作过程以及步骤介绍的不够详细。而小编在上述的内容将flex 4实战入门教程中的前端数据交互各个操作步骤以及详细的操作步骤都进行了介绍，希望能够给大家学习flex 4实战基础教程中的前端数据交互知识内容提供协助。