开发一个简单的数据增删改查功能，用于对业务容器的增删改查。
这个功能也比较简单，就当复习Mvc项目的增删改查了。
主要界面：
需要实现的功能：
1、新增容器（编号，名称）
2、删除容器记录
3、更新容器（名称）
4、显示当前容器列表
就简单纯粹的增删改查，直接上代码
视图层：
@{ ViewBag.Title = "YWRQ"; Layout = "~/Views/Shared/_ReportLayout.cshtml"; } <div class="container" style="margin-top:20px"> <div class="form-inline"> <div class="form-group"> <input id="Code" type="text" class="form-control" placeholder="容器代码" /> </div> <div class="form-group"> <input id="Name" type="text" class="form-control" placeholder="容器名称"/> </div> <div class="form-group"> <button id="add" type="submit" class="btn btn-default">添加</button> </div> </div> <div class="row"> <div class="col-md-5"> <div class="separator"></div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">现有业务容器</h3> </div> <div class="panel-body"> <table class="table table-bordered" id="t1"> </table> </div> </div> </div> </div> </div> @section scripts{ <script type="text/javascript"> $(document).ready(function () { ToList(); }) //遍历数据表内容 function ToList() { $("#t1").append("<tr><th style=‘width:13%‘>容器编码</th><th style=‘width:50%‘>容器名称</th><th>操作</th></tr>") $.ajax({ type:"GET", url: "QueryList", success: function (data) { var JsonData = JSON.parse(data); $.each(JsonData, function (i, value) { $("#t1").append("<tr><td>" + value.Code + "</td><td><div>" + value.Name + "</div><input style=‘width:150px‘ onKeyPress=‘if(window.event.keyCode==13) this.blur()‘ class=‘form-control hidden‘ type=‘text‘ value=‘" + value.Name + "‘></td><td><a href=‘#‘ type=‘Update‘ class=‘btn btn-xs btn-info‘ Code=‘" + value.Code + "‘ Name=‘" + value.Name + "‘><i class=‘fa fa-pencil‘ aria-hidden=‘true‘></i></a> <a href=‘#‘ type=‘Del‘ class=‘btn btn-xs btn-danger‘ Code=‘" + value.Code + "‘><i class=‘fa fa-times‘ aria-hidden=‘true‘></i></a></td></tr>") }) } }) } //点击添加按钮，异步添加数据 $("#add").click(function () { var Code = $("#Code").val(); var Name = $("#Name").val(); $.ajax({ type: "POST", url: "Add", data: { Code: Code, Name: Name }, success: function (data) { if (data == "添加成功") { layer.msg(data, { icon: 1 }); $("#t1").contents().remove(); ToList(); } else { layer.msg("编码重复", { icon: 2 }); } } }) }) //删除对应行 $("#t1").on("click", "[type=‘Del‘]", function () { var Code = $(this).attr("Code"); layer.confirm("确认删除？", { icon: 2, title: "提示" }, function () { $.ajax({ url: "Del", data: { Code: Code }, success: function (data) { if (data == "删除成功") { layer.msg(data, { icon: 1 }) $("#t1").contents().remove(); ToList(); } else { layer.msg("删除失败", { icon: 2 }) } } }) }) }) //点击编辑按钮，将原有单元格内容隐藏，显示隐藏的文本框 $("#t1").on("click", "[type=‘Update‘]", function () { $(this).parent().prev().find("div").addClass("hidden"); $(this).parent().prev().find("input").removeClass("hidden"); }) //文本框失去焦点时，ajax请求数据库异步更新 $("#t1").on("blur", "input", function () { var Code = $(this).parent().next().find("[type=‘Update‘]").attr("Code"); var Name = $(this).val(); //判断下用户输入的和以前一不一样，一样就不更新，不一样再更新 if (Name != $(this).parent().next().find("[type=‘Update‘]").attr("Name")) { $.ajax({ url: "Update", data: { Code: Code, Name: Name }, success: function (data) { $("#t1").contents().remove(); ToList(); } }) } else { $("#t1").contents().remove(); ToList(); } }) </script> }
控制器：
using Report.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace portal.Areas.report.Controllers { public class YWRQController : Controller { // GET: YWRQ public ActionResult YWRQ() { return View(); } //添加 public string Add(YWRQModel vm) { return vm.Add(); } //更新 public string Update(YWRQModel vm) { return vm.Update(); } //删除 public string Del(YWRQModel vm) { return vm.Del(); } public string QueryList(YWRQModel vm) { vm.ToList(); return vm.Json1; } } }
模型层：
using System; using System.Collections.Generic; using System.Data; using System.Data.SqlClient; using System.Linq; using System.Web; using DBComponentWarehouse.GeneralHepler; using Newtonsoft.Json; using PES.BaseEntityKernel; using portal.Models; namespace Report.Models { public class YWRQModel : BaseViewModel { public string Code { get; set; } public string Name { get; set; } public string Json1 { get; set; } //查询容器 public void ToList() { SqlConnection sqlCon = new SqlConnection(GlobalConfiguration.GetInstance().GetConnectionString(_Com_id)); string sql = string.Format(@"SELECT * FROM dbo.gl_BusinessContainer where com_id=‘{0}‘",_Com_id); SqlHelper sh = new SqlHelper(); DataTable dt = sh.ReadDataTable(sqlCon, sql); this.Json1 = JsonConvert.SerializeObject(dt); } //增加容器 public string Add() { SqlConnection sqlCon = new SqlConnection(GlobalConfiguration.GetInstance().GetConnectionString(_Com_id)); string sql = string.Format(@"insert into dbo.gl_BusinessContainer ( com_id , Code , Name ) values ( ‘{0}‘ -- com_id - varchar(50) , ‘{1}‘ -- Code - varchar(50) , ‘{2}‘ -- Name - varchar(50) )",_Com_id,Code,Name); SqlHelper sh = new SqlHelper(); try { sh.ExecuteNonQuery(sqlCon, sql); return "添加成功"; } catch (Exception e) { return "添加失败"+e; } } //删除容器 public string Del() { SqlConnection sqlCon = new SqlConnection(GlobalConfiguration.GetInstance().GetConnectionString(_Com_id)); string sql = string.Format(@"delete from dbo.gl_BusinessContainer where com_id=‘{0}‘ and Code=‘{1}‘", _Com_id, Code); SqlHelper sh = new SqlHelper(); try { sh.ExecuteNonQuery(sqlCon, sql); return "删除成功"; } catch (Exception e) { return "删除失败" + e; } } //更新容器 public string Update() { SqlConnection sqlCon = new SqlConnection(GlobalConfiguration.GetInstance().GetConnectionString(_Com_id)); string sql = string.Format(@"update dbo.gl_BusinessContainer set Name=‘{0}‘ where com_id=‘{1}‘ and Code=‘{2}‘",Name,_Com_id, Code); SqlHelper sh = new SqlHelper(); try { sh.ExecuteNonQuery(sqlCon, sql); return "更新成功"; } catch (Exception e) { return "更新失败" + e; } } } }
总结：
这个没什么难点，主要就是Ajax和Json的运用，然后基础的增删改查，Jq的一点东西。
原文：https://www.cnblogs.com/dongbuyu/p/12375860.html