开源 C# .net mvc 开发（七）动态图片、动态表格和json数据生成

ajassi2000

已于 2025-07-07 21:24:44 修改

阅读量484

点赞数 18

CC 4.0 BY-SA版权

分类专栏： linux C 到 .net mvc开发文章标签：开源 mvc linux c# .net json

于 2025-07-07 20:45:24 首次发布

本文链接：https://blog.youkuaiyun.com/ajassi2000/article/details/149180809

linux C 到 .net mvc开发专栏收录该内容

8 篇文章

订阅专栏

文章的目的为了记录.net mvc学习的经历。本职为嵌入式软件开发，公司安排开发文件系统，临时进行学习开发，系统上线3年未出没有大问题。开发流程和要点有些记忆模糊，赶紧记录，防止忘记。

开源 C# .net mvc 开发（二）网站快速搭建_c#网站开发-优快云博客

开源 C# .net mvc 开发（三）WEB内外网访问-优快云博客

开源 C# .net mvc 开发（四）工程结构、页面提交以及显示-优快云博客

开源 C# .net mvc 开发（五）常用代码快速开发_c# mvc开发-优快云博客

开源 C# .net mvc 开发（六）发送邮件、定时以及CMD编程-优快云博客

开源 C# .net mvc 开发（七）动态图片、动态表格和json数据生成-优快云博客

开源 C# .net mvc 开发（八）IIS Express轻量化Web服务器的配置和使用-优快云博客

推荐链接：

开源 java android app 开发（一）开发环境的搭建-优快云博客

开源 java android app 开发（二）工程文件结构-优快云博客

开源 java android app 开发（三）GUI界面布局和常用组件-优快云博客

开源 java android app 开发（四）GUI界面重要组件-优快云博客

开源 java android app 开发（五）文件和数据库存储-优快云博客

开源 java android app 开发（六）多媒体使用-优快云博客

开源 java android app 开发（七）通讯之Tcp和Http-优快云博客

开源 java android app 开发（八）通讯之Mqtt和Ble-优快云博客

开源 java android app 开发（九）后台之线程和服务-优快云博客

开源 java android app 开发（十）广播机制-优快云博客

开源 java android app 开发（十一）调试、发布-优快云博客

开源 java android app 开发（十二）封库.aar-优快云博客

开源 java android app 开发（十三）绘图定义控件、摇杆控件的制作-优快云博客

本章的内容：在.net mvc 开发需要涉及到的特殊技巧，动态的图片生成，动态的表格生成，以及json数据格式的生成。

一、动态的图片生成，在登录页面，除了用户名和密码，经常生成动态的图片，必须真人查看后填入，这样防止了网络爬虫不停输入密码来破解。

1.1 Login.cshtml的代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>SCloudD</title>
    <link rel="stylesheet" type="text/css" href="../../Scripts/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../Scripts/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../Scripts/jquery.min.js"></script>
    <script type="text/javascript" src="../../Scripts/jquery.easyui.min.js"></script>
</head>
<body>

    @using (Html.BeginForm("Login", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))

    {
        <center>

            @using (Html.BeginForm("Login", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))

            {

                <div class="easyui-panel" title="系统登录" style="width:100%;max-width:400px;padding:30px 60px; right: inherit;">

                    <div style="margin-bottom:10px">
                        <input class="easyui-textbox" name="name" label="用户名：" labelPosition="left" prompt="请输入用户名" style="width:250px;">
                    </div>
                    <div style="margin-bottom:10px">
                        <input class="easyui-passwordbox" name="pwd" label="密码：" labelPosition="left" prompt="请输入密码" iconWidth="28" style="width:250px;">
                    </div>
                    <div style="margin-bottom:10px">
                        <input type="text" name="checkcode" label="验证码：" labelPosition="left" class="easyui-textbox" prompt="验证码" />
                        <img style="position:relative;top:10px;" src="/Home/GetImg" width="80" height="30" id="validCodeImg" onclick="Refresh();" />
                    </div>

                    <div style="margin-bottom:10px;">
                        <button type="submit" class="easyui-linkbutton" style="width:250px;">登录</button>
                    </div>


                </div>

            }

            <div style="margin:20px 0;">@ViewData["LoginErr"]</div>
        </center>
    }

</body>
</html>
<script type="text/javascript">
    
    function Refresh()
    {
        window.location = '/Home/Login';
    }
    
</script>

1.2 home控制器中的GetImg函数代码,生成含有随机数字字母的图片，在cshtml中显示。

 public ActionResult GetImg() 
        {
            string[] strArr = { "0", "1" , "2", "3", "4", "5", "6", "7", "8", "9",
            "a", "b" , "c", "d", "e", "f", "g", "h","i","j",
            "k" , "l", "m", "n", "o", "p", "q", "r", "s","t", 
            "u" , "v", "w", "x", "y", "z"
            };
            Random random = new Random();
            string strTmp = strArr[random.Next(0, 9)] + strArr[random.Next(10, 35)] +
                            strArr[random.Next(0, 9)] + strArr[random.Next(10, 35)] ;
            Session["checkcode"] = strTmp;
            Bitmap bmp = new Bitmap(80, 35); 
            Graphics g = Graphics.FromImage(bmp); 
            g.Clear(Color.White); 
            g.FillRectangle(Brushes.CadetBlue, 2, 2, 65, 31); 
            g.DrawString(strTmp, new Font("黑体", 15f), Brushes.White, new PointF(5f, 5f)); 
            MemoryStream ms = new MemoryStream(); 
            bmp.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg); 
            g.Dispose(); bmp.Dispose(); 
            return File(ms.ToArray(), "image/jpeg"); 
        }

1.3 控制器中的Login代码，查找用户名，密码，和图片进行比较，失败则返回登录页面。



        [HttpPost]
        public ActionResult Login(FormCollection formcollection)
        {
            try
            {
                Session["User"] = null;
                Session["LoginName"] = null;
                Session["Right"] = null;
                Session["PermissionInt"] = 0;

                string LoginName = formcollection["name"];
                string Password = formcollection["pwd"];
                string strCheckCode = formcollection["checkcode"];
                if (strCheckCode != Session["checkcode"].ToString())
                {
                    ViewData["LoginErr"] = "登录失败！校验码错误";
                    return PartialView();
                }

                var newDtList = from d in db.User where d.UserName == LoginName && d.Password == Password select d;
                string strRight = "", strLoginName = "";
                bool bFlg = false;
                int uLId = 0;



                if (newDtList != null)//(test != null && password == test.Password)
                {
                    strRight = item.Permission.Replace(" ", "");
                    strLoginName = item.Name.Replace(" ", "");
                    uLId = item.Id;
                    Session["DisplayCnt"] = 10;
                    Session["User"] = strLoginName;
                    Session["ListSiwitch"] = "全部";
                    Session["UserId"] = uLId;
                    Session["KgListSiwitch"] = "全部";

                    ViewBag.LoginState = "登录成功";

                    return RedirectToAction("Index", "Home");

                }
                else
                {
                    ViewData["LoginErr"] = "登录失败！用户名或密码错误";
                    return PartialView();
                }
            }
            catch (Exception ex)
            {
                Session["Err"] = ex;
                return PartialView();
            }
        }

1.4 显示效果

二、动态表格

2.1 表格函数,通过 javascript脚本，用函数来生成表格进行显示。

 <script type="text/javascript">

        function CreateTable(str)
        {
            var strArr = str.split(",");
            var tab = '<table class="printTB detailTb gua-detail-table" cellspacing="0" cellpadding="0">'
            tab += '<tr>'
            tab += "<th>" + "序号" + "</th>"
            tab += "<th>" + "时间" + "</th>"
            tab += "<th>" + "产品型号" + "</th>"
            tab += "<th>" + "单位" + "</th>"
            tab += "<th>" + "价格" + "</th>"
            tab += "<th>" + "备注" + "</th>"
            tab += '</tr>'
            for (var i = 1; i < strArr.length; i++)
            {
                var strCol = strArr[i].split(";");
                tab += '<tr>'
                tab += "<td>" + i + "</td>"
                for (var j = 0; j < 5; j++) {
//                    tab += "<td style='background:green'>" + i + j + "</td>"
                    tab += "<td>" + strCol[j] + "</td>"
                }
                tab += '</tr>'
            }
            tab += '</table>';
            TableDiv.innerHTML = tab;

        }
</script>

2.2 显示效果

三、动态生成json数据格式

3.1 javascripit 脚本，页面装载时，发送ajax命令，读取PrjProcess的getchips函数，返回的json数据，直接更新到combobox中。

 <script type="text/javascript">


    $.ajax({
        url: "/PrjProcesses/getChips?str=" + chip,
        type: "get",
        data: {},
        success: function (res) {
            $("#" + chip.id).combobox({ data: res.Soc });
            
        }, dataType: "json"
    });


</script>

3.2 PrjProcess控制器中进行json的数据组包

        public class PrjAllChips
        {
            public List<User> En = new List<User>();
            public List<PrjChip> Soc = new List<PrjChip>();
        }

        public JsonResult getChips(string str)
        {

            PrjAllChips myList = new PrjAllChips();


            var tmp0 = db.PrjChip.Where(r=>r.UseTo.Contains(str));
            foreach (var item in tmp0)
            {
                myList.Soc.Add(new PrjChip { Code = item.Code });
            }

            var tmp1 = db.User;

            foreach (var item in tmp1)
            {
                myList.En.Add(new User { Name = item.Name });
            }

            return Json(myList, JsonRequestBehavior.AllowGet);
        }