当前位置：首页 > article >正文

C# web中界面

article 2025/2/28 23:51:49

web界面如何实现

web界面可能是实现功能的重点。

1.采取主界面不变，采用子页面的形式

这种是通过iFrame实现

2.主界面不变，采用部分页面

@Htmlpartial()实现

3.重复复制主界面代码

不建议这种

主界面实现完了，就是显示一些重要的数据

包括数据的可视化

可视化就是表格，曲线，直方图

这些一般通过chart安装包的调用

系统是否需要验证登录

如果系统实现的好

那么尽可能用少的页面

好的代码规范和页面会让程序易懂且容易扩展。

今天附C#代码：和主界面实现


@{
    ViewBag.Title = "main";
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic LinkButton - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="~/Content/jquery-easyui-1.7.0/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="~/Content/jquery-easyui-1.7.0/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="~/Content/jquery-easyui-1.7.0/themes/color.css">
    <link rel="stylesheet" type="text/css" href="~/Content/jquery-easyui-1.7.0/demo/demo.css">
    <script type="text/javascript" src="~/Content/jquery-easyui-1.7.0/jquery.min.js"></script>
    <script type="text/javascript" src="~/Content/jquery-easyui-1.7.0/jquery.easyui.min.js"></script>

</head>
<body style="padding:0px">
    
    <center>
        <h2 style="font-size:25px">基于EasyDL模型的图像检测数据处理系统</h2>
    </center>

    <div id="cc" class="cc" style="height:900px;">
        <p>window.aa</p>
        <p><%=aa%></p>
        <p>$aa</p>
        <div data-options="region:'south'" style="height: 130px; border:0px">
            @Html.Partial("_PartialPage3")
        </div>

        <div data-options="region:'west'" style="width: 260px; height: 300px;  border-left-width: 0px">
            @Html.Partial("_PartialPage2")

        </div>
        <div data-options="region:'center'" style="height: 530px; border-right-width: 0px">
            <div style="margin:20px 0;height:530px;" id="addd" class="addd">
                <div id='center' class='center'>@Html.Partial("_PartialPage1")</div>
            </div>

        </div>



    </div>

    <script>
    window.onload = function () {
        
        window.aa = "sdfgdfgdfg";
        window.xu = "image";
        //document.getElementById(".cc").appendChild('<h1>fdghhhhhhhhhhhhhh</h1>');
        //document.getElementById("body").appendChild('<h1>fdghhhhhhhhhhhhhh</h1>');

        // alert();

        ///$('removee').remove();
        //$('#cc').append('<h1>fdghhhhhhhhhhhhhh</h1>');
        //$('body').append('<h1>fdghhhhhhhhhhhhhh</h1>');
        @*$('.cc').append(@Html.Partial("_PartialPage4"));*@
    }
    function change() {
        var image = document.getElementById("image");
        var ima = image.value;
        var fileName = image.files[0].name;
        var img = document.getElementById("img1");

        if (window.FileReader) {
            var fr = new FileReader();
            fr.readAsDataURL(image.files[0]);
            fr.onloadend = function () {
                img.src = fr.result;
            }
        }
        xu = ima;
        alert(xu);
    }
    function click1() {
        @*location.href = "getresult?xu="+xu;*@
        //$('#cc').append('<h1>fdghhhhhhhhhhhhhh</h1>');
        //var tImg = "<div id='dfggdfgd'>sfrgdfgdfhfghgf</div>";
        // alert();
        $('body').append("<p>sfdgfdfgfdddddddd</p>");
        $('p').remove();
        $.ajax({
            type: 'post',
            url: '@Url.Action("Contact")',
            data: {'xu':'677'},
            contentType: 'application/json;charset=utf-8',
            dataType: 'json',
            success: function (message) {

                alert(message.message);
            }

        });

    }
    </script>
    <!--<script>
        function upload() {
            OpenFileDialog ofd = new OpenFileDialog();
            ofd.Multiselect = false;//设置是否可以多选
            ofd.Title = "请选择要处理的文件";//窗口title
            ofd.Filter = "*.png|*.jpg|*.PNG";//筛选文本文件
            var filepath="";
            if (ofd.ShowDialog() == DialogResult.OK) {
                filepath = ofd.FileName;
            }
            var image = document.getElementById("image");
            image.src = filepath;
        }
    </script>-->
    <script type="text/javascript">
        $(function () {
            $('#cc').layout();
            setHeight();
        });
        function setHeight() {
            var c = $('#cc');
            var p = c.layout('panel', 'center');	// get the center panel
            var oldHeight = p.panel('panel').outerHeight();
            p.panel('resize', { height: 'auto' });
            var newHeight = p.panel('panel').outerHeight();
            c.layout('resize', {
                height: (c.height() + newHeight - oldHeight)
            });
        }
    </script>
</body>

</html>

同时append和remove用法

$('.body').append(dom);实现添加dom

$('.remove').remove();实现移去dom

js代码实现

可以动态改变子界面

数据改变通过ajax实现

查看全文

http://www.kler.cn/a/724.html