现在位置首页 / 项目实战 /正文

C#+html浏览器跨屏展示方案2-具体代码实现

作者: IT小兵 | 2016年3月22日| 热度:℃ | 评论: |参与:

上一篇[C#+html浏览器跨屏展示方案1]  主要是介绍了我们做一个跨屏项目的背景和思路。本文主要完整说明一下,数据在web--winform多个客户端之间的流转。

最终效果图:

本文需要一下知识:

1、数据流转中间表:

这是一个非常重要一个环节,用来存储我们需要跨屏展示的数据。结构如下:

/****** Object:  Table [dbo].[ScreenData]    Script Date: 03/22/2016 14:34:02 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[ScreenData](
	[ID] [int] IDENTITY(1,1) NOT NULL,
	[Url] [varchar](500) NOT NULL,
	[HideID] [varchar](200) NULL,
	[ContentType] [varchar](50) NULL,
	[ShowID] [varchar](200) NULL,
	[ScrId] [int] NOT NULL,
	[Satus] [int] NOT NULL,
	[AddTime] [datetime] NULL,
	[ShowTime] [datetime] NULL,
	[Userid] [int] NOT NULL,
	[Model] [varchar](50) NULL,
 CONSTRAINT [PK_ScreenData] PRIMARY KEY CLUSTERED 
(
	[ID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'sctpe=map:地图,sctpe=shipin:视频;sctpe=table:表格' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'ScreenData', @level2type=N'COLUMN',@level2name=N'Url'
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'需要隐藏的控件编号,逗号隔开' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'ScreenData', @level2type=N'COLUMN',@level2name=N'HideID'
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'展示内容类型;map,img,table' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'ScreenData', @level2type=N'COLUMN',@level2name=N'ContentType'
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'需要显示的控件编号,逗号隔开' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'ScreenData', @level2type=N'COLUMN',@level2name=N'ShowID'
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'0:等待展示。1:已获取,并展示。' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'ScreenData', @level2type=N'COLUMN',@level2name=N'Satus'
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'来自哪个模块' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'ScreenData', @level2type=N'COLUMN',@level2name=N'Model'
GO

2、在web界面提交需要跨屏,用到ajax

Html代码:就是2个按钮。我们布局使用了bootstrap。参考:[基于Bootstrap 的简约美观的后台管理系统模板UI:SB Admin 2]

 <button onclick="goScreen('map', 'map', 'titlee.ulTab,toolrsss,list', '探针运行监控', '1')" style="float: right; margin-bottom: 10px; margin-right: 10px; margin-top: 10px;" type="button" class="btn btn-success">地图分屏</button>
 <button onclick="goScreen('table', 'list', 'titlee,ulTab,toolrsss,map', '探针运行监控', '2')" style="float: right; margin-bottom: 10px; margin-right: 10px; margin-top: 10px;" type="button" class="btn btn-success">列表分屏</button>

jquery ajax提交数据到后台

function goScreen(type, showid,hideid,fromsource,srcid) {
    var ServiceUrl = getScreenServiceUrl("AddNewScreen");
   
    var xurl = window.location.href;
    var mac_val = $("#macval").val();
	var begintime = $("#starttime").val();
	var endtime = $("#endtime").val();
    if (xurl.indexOf("?")>0){
    	xurl= xurl+"&mac="+mac_val+"&begintime="+encodeURI(begintime)+"&endtime="+encodeURI(endtime);
    }
    else{
     	xurl= xurl+"?mac="+mac_val+"&begintime="+encodeURI(begintime)+"&endtime="+encodeURI(endtime);
    }
    $.ajax({
        type: "post",
        dataType: 'JSONP',
        url: ServiceUrl,
        data: {
            url: xurl,
            srcid: srcid,
            userid: 1,//checkToken(),
            fromsource: fromsource,
            showid: showid,
            hideid: hideid,
            args: type
        },
        jsonp: 'callback',
        success: function (result) {
            var json_data = $.parseJSON(result.jsondata);
            if (json_data != null) {
                   // alert("分屏指令提交成功,请查看分屏幕。")
                if (xurl.indexOf("?")>0){
                    ShowScreenData(xurl+"&showid="+showid+"&hidenid="+hideid);
                }
                else{
                    ShowScreenData(xurl + "?showid=" + showid + "&hidenid=" + hideid);
                }
            } else {
                alert("分屏指令提交失败,请刷新重试。")
            }
        },
        complete: function (XMLHttpRequest, textStatus) {
        },
        error: function (e) {
            alert("分屏指令提交失败,请刷新重试。"); return;
        }
    });
}
function ShowScreenData(url) {
    if (confirm('分屏指令提交成功,请查看分屏幕。点击确定打开分屏预览。')) {
        
        var title = '分屏预览';
        window.parent.addtab(url, title);
    }
    else {
    }
}

 

在需要分屏展示数据的页面根据提交的url和需要隐藏、展示控件的参数,进行js控制。在页面加载后调用一下

$(document).ready(function () { 
setTimeout(displayScreen,200); 
});
function displayScreen() {
  var  showid = requestparm('showid');
   var  hidenid = requestparm('hidenid');
   
    if (hidenid != "") {
        var arrid = hidenid.split(',');
        for (var i = 0; i < arrid.length; i++) {
            $("#" + arrid[i]).hide();
        }
    }
    
    if (showid != "") {
        var arrshowid = showid.split(',');
     
        for (var i = 0; i < arrshowid.length; i++) {
      
            $("#" + arrshowid[i]).height(document.documentElement.clientHeight);
                    $("#" + arrshowid[i]).show();
                 
        }
    }
}


3、C# 客户端主要代码,用来定时获取跨屏数据。

using CefSharp.WinForms;
using Microsoft.Win32;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Diagnostics;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace APGo
{
    public partial class frmMain2 : Form
    {
        public frmMain2()
        {
            InitializeComponent();
        }
        ChromiumWebBrowser browser = new ChromiumWebBrowser(IndexForm.WebIp) { Dock = DockStyle.Fill };
        private void InnitWeb(string urrl)
        {
           
            //   browser.Parent = this.middlepanle;
            this.Controls.Add(browser);
            browser.Dock = DockStyle.Fill;
           
        }
        /// <summary>
        /// http://120.76.75.122/login.html
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void frmMain2_Load(object sender, EventArgs e)
        {
            InnitWeb(IndexForm.WebIp);
            timer1.Interval = 2000;
            timer1.Start();  
        }
        int flagid = 0;
        private void timer1_Tick(object sender, EventArgs e)
        {
           
            APGo.MainServiceReference.multiscreenSoapClient myservice = new APGo.MainServiceReference.multiscreenSoapClient();
            APGo.MainServiceReference.ScreenData returnobj = myservice.GetNewUrl(2);
            if (returnobj != null)
            {
                if (flagid != returnobj.ID)
                {
                    if (returnobj.ID != 0)
                    {
                        flagid = returnobj.ID;
                        string weburl = returnobj.Url;
                        if (weburl.IndexOf("?") >= 0)
                        {
                            weburl = returnobj.Url + "&showid=" + returnobj.ShowID + "&hidenid=" + returnobj.HideID;
                        }
                        else
                        {
                            weburl = returnobj.Url + "?showid=" + returnobj.ShowID + "&hidenid=" + returnobj.HideID;
                        }
                        browser.Load(weburl);
                        myservice.UpdateView(returnobj.ID);
                    }
                }
            }     
        }
    }
}

  APGo.MainServiceReference.ScreenData returnobj = myservice.GetNewUrl(2);是按照分屏的id获取属于本屏幕的跨屏数据

下面代码是展示数据到浏览器中:

 if (weburl.IndexOf("?") >= 0)
                        {
                            weburl = returnobj.Url + "&showid=" + returnobj.ShowID + "&hidenid=" + returnobj.HideID;
                        }
                        else
                        {
                            weburl = returnobj.Url + "?showid=" + returnobj.ShowID + "&hidenid=" + returnobj.HideID;
                        }
                        browser.Load(weburl);


基本实现流程就是这样了。下一篇,将详细说明Cefsharp的使用方法和注意事项。

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询