C# web中界面

最新推荐文章于 2024-04-29 10:40:41 发布

人还是要有梦想的

最新推荐文章于 2024-04-29 10:40:41 发布

阅读量805

点赞数

分类专栏： .net C# 软件工程文章标签：前端 c# easyui 软件工程 javascript

本文链接：https://blog.csdn.net/qq_32663053/article/details/129564251

版权

软件工程同时被 3 个专栏收录

136 篇文章 5 订阅

订阅专栏

66 篇文章 3 订阅

订阅专栏

.net

31 篇文章 1 订阅

订阅专栏

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实现

人还是要有梦想的

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
C# web中界面

好的代码规范和页面会让程序易懂且容易扩展。主界面实现完了，就是显示一些重要的数据。1.采取主界面不变，采用子页面的形式。web界面可能是实现功能的重点。@Htmlpartial()实现。2.主界面不变，采用部分页面。可视化就是表格，曲线，直方图。今天附C#代码：和主界面实现。这种是通过iFrame实现。数据改变通过ajax实现。3.重复复制主界面代码。系统是否需要验证登录。那么尽可能用少的页面。
复制链接

扫一扫