前言
这篇文章的程序已经测试能运行
- 代码在文章的末尾
- 本代码使用了Mysql+MVC+ajax
- 数据库语句在项目的sql文件下
首先我们创建项目
在这里插入图片描述
在这里插入图片描述
文件目录结构为
在这里插入图片描述
仅用代码的一部分进行讲解
1. 数据库操作
在这里插入图片描述
提供一个自用的Mysqlhelper（原来作者已经不知道是哪个了，汗）
mysql和sqlserver代码区别
mysql需要在NuGet管理器下载mysql.data
改为sqlserver需要把mysql的my删除就可以使用了
当然数据库连接字符串在这里插入代码片需要改
由于代码量有200多行就直接给github代码地址吧
2. Models实体类
在文件Models下添加ProductModel.cs
namespace Homework.Models
{
public class ProductModel
{
public int id { get; set; }
public string name { get; set; }
public int price { get; set; }
}
}
3. 数据库具体操作类
在文件Models下添加ProductRepository.cs
我们的方法是基于mysqlhelper中的GetDataSet方法书写，用DataSet存储数据库的数据
namespace Homework.Models
{
public class ProductRepository
{
public ProductRepository(){}
public DataSet Get(int id)
{
CommandType cmdType = CommandType.Text;
string cmdText = "select * from products where id=?id";
MySqlParameter param = new MySqlParameter("?id", MySqlDbType.Int32);
param.Value = id;
DataSet dataSet = MysqlHelper.GetDataSet(cmdType, cmdText, param);
return dataSet;
}
public DataSet GetByName(string name)
{
CommandType cmdType = CommandType.Text;
string cmdText = "select * from products where name =?name";
MySqlParameter param = new MySqlParameter("?name", MySqlDbType.String);
param.Value = name;
DataSet dataSet = MysqlHelper.GetDataSet(cmdType, cmdText, param);
return dataSet;
}
}
}
同时我们在这里介绍一个好用的DataTable转换成Json工具
public class DatasetToJson
{
/// <summary>
/// dataTable转换成Json格式
/// </summary>
/// <param name="dt"></param>
/// <returns></returns>
public static string DataTable2Json(System.Data.DataTable dt)
{
StringBuilder jsonBuilder = new StringBuilder();
jsonBuilder.Append("{\"Name\":\"" + dt.TableName + "\",\"Rows");
jsonBuilder.Append("\":[");
for (int i = 0; i < dt.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = 0; j < dt.Columns.Count; j++){
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append("\":\"");
jsonBuilder.Append(dt.Rows[i][j].ToString().Replace("\"", "\\\"")); //对于特殊字符，还应该进行特别的处理。
jsonBuilder.Append("\",");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("},");
}
if (dt.Rows.Count > 0){
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
}
jsonBuilder.Append("]");
jsonBuilder.Append("}");
return jsonBuilder.ToString();
}
/// <summary>
/// DataSet转换成Json格式
/// </summary>
/// <param name="ds">DataSet</param>
/// <returns></returns>
public static string Dataset2Json(System.Data.DataSet ds)
{
StringBuilder json = new StringBuilder();
json.Append("{\"Tables\":");
json.Append("[");
foreach (System.Data.DataTable dt in ds.Tables)
{
json.Append(DataTable2Json(dt));
json.Append(",");
}
json.Remove(json.Length - 1, 1);
json.Append("]");
json.Append("}");
return json.ToString();
}
}
4. Controller 控制器
接下来就是书写控制器了
这里的的控制器对于新手有一个小坑。
- 假设我们命名一个控制器为HomeController.cs是对应Views文件夹中的Home文件夹的
在这个时候代码中的 -
对应Home文件夹中的Index.cshtml文件public IActionResult Index() { return View(); }
对应Home文件夹中的Products.cshtml文件public IActionResult Products() { ViewData["Message"] = "Products页面."; return View(); }
所以若需要创建一个新的Controller，想要用 return View();就需要创建相对应的文件夹和相对应的文件，但是在使用get或者post方法时候，Controller是可以接受任何的页面传入的。
现在我们在Controllers目录下创建ProductsController.cs
namespace Homework.Controllers
{
public class ProductsController : Controller
{
ProductRepository productRepository = new ProductRepository();//直接数据库操作
public IActionResult Index()
{
return View();
}
//GET: /Products/Getid/id
public string Getid(int id)
{
Debug.WriteLine("GetProducts" + id);
DataSet item = productRepository.Get(id);
if (item == null)
return null;
return DatasetToJson.Dataset2Json(item);
}
//POST: /Products/GetProducts
public string GetProducts([FromBody]dynamic Json)
{
ProductModel productModel = new ProductModel
{
name = Json.name
};
Debug.WriteLine("GetProducts" + productModel.name);
DataSet item = productRepository.GetByName(productModel.name);
if (item == null)
return null;
return DatasetToJson.Dataset2Json(item);
}
}
}
其中DatasetToJson.Dataset2Json方法就是把Dataset类型的数据转换成json给前端，通过return的方式返回
5.Views前端
在这里插入图片描述
在Views目录中的Home目录创建Products.cshtml，这个文件对应的就是刚刚所说的HomeController下的Products()方法
@{
ViewData["Title"] = "增删改查";
}
<h2>@ViewData["Title"]</h2>
<h3>@ViewData["Message"]</h3>
<div id="body">
<div class="col-lg-12">
<div>
<br />
<br />
<h2>查询记录</h2>
id:<input id="id" type="text" />
<br />
name:<input id="name" type="text" />
<br />
price:<input id="price" type="text" />
<br />
<input id="showItemid" type="button" value="查询id" />
<input id="showItemname" type="button" value="查询name" />
</div>
</div>
</div>
js语句部分
记得我们return回来的是一串json的字符串，
这里有两种方法，我们用的是不添加dataType=json，返回值当成字符串处理，否则变成json对象
创建对象存储数据
//用于保存用户输入数据
var Product = {
create: function () {
id: "";
name: "";
price: "";
return Product;
}
}
把json字符串解析并赋值给我们创建的Product 对象
var obj = eval('(' + data + ')'); //格式转换
$.each(obj.Tables, function (index, table) {
//根据不同的表名，显示不同的字段。得到特定表，table = obj.Tables[1]
if (table.Rows.length ==0) {
$("#id").val("不存在此id");
} else {
$.each(table.Rows, function (index, row) {
$("#name").val(row.name);
$("#price").val(row.price);
});
}
});
最后加在一起如下
<script src="~/lib/jquery/dist/jquery.js"></script>
<script>
//用于保存用户输入数据
var Product = {
create: function () {
id: "";
name: "";
price: "";
return Product;
}
}
//先根据name查询记录 请求类型:GET 请求url: /Products/name
$("#showItemid").click(function () {
var inputId = $("#id").val();
$("#name").val("");
$("#price").val("");
$.ajax({
url: "/Products/Getid/" + inputId,
type: "GET",
contentType: "application/json; charset=urf-8",
success: function (data) {
var obj = eval('(' + data + ')'); //格式转换
$.each(obj.Tables, function (index, table) {
//根据不同的表名，显示不同的字段。得到特定表，table = obj.Tables[1]
if (table.Rows.length ==0) {
$("#id").val("不存在此id");
} else {
$.each(table.Rows, function (index, row) {
$("#name").val(row.name);
$("#price").val(row.price);
});
}
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("请求失败，消息：" + textStatus + " " + errorThrown);
}
});
});
$("#showItemname").click(function () {
var newProduct = Product.create();
newProduct.name = $("#name").val();
$("#id").val("");
$("#price").val("");
$.ajax({
url: "/Products/GetProducts",
type: "POST",
contentType: "application/json; charset=urf-8",
data: JSON.stringify(newProduct),
success: function (data) {
var obj = eval('(' + data + ')'); //格式转换
$.each(obj.Tables, function (index, table) {
//根据不同的表名，显示不同的字段。得到特定表，table = obj.Tables[1]
if (table.Rows.length == 0) {
$("#name").val("不存在此name");
} else {
$.each(table.Rows, function (index, row) {
$("#id").val(row.id);
$("#price").val(row.price);
});
}
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("请求失败，消息：" + textStatus + " " + errorThrown);
}
});
});
</script>
