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

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

news 2025/7/8 5:25:15

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

相关链接:

开源 C# .net mvc 开发（一）WEB搭建_c#部署web程序-CSDN博客

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

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

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

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

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

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

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

推荐链接：

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

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

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

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

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

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

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

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

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

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

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

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

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

本章的内容：在.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);}

查看全文

http://www.dtcms.com/a/268501.html