asp.net mvc 字段赋值方式 效果展示 前端代码 div class = "container" div class = "info" p style = "font-size:30px;margin:12px auto;width:300px;" 简易订单管理系统 / p hr / a href = "Home/Add" 添加订单 / a
asp.net mvc 字段赋值方式
效果展示
前端代码
<div class="container">
<div class="info">
<p style="font-size:30px;margin:12px auto;width:300px;">简易订单管理系统</p>
<hr />
<a href="Home/Add">添加订单</a>
<table class="table table-bordered">
<tr style="background-color:aquamarine">
<th>订单编号</th>
<th>下单人</th>
<th>订单日期</th>
<th>订单状态</th>
<th>操作</th>
</tr>
@foreach (var item in ViewBag.Lists)
{
<tr>
<td>@item.OrderID</td>
<td>@item.UserName</td>
<td>@item.OrderDate.ToString("yyyy年MM月dd日")</td>
@if (@item.OrderState == 0)
{
<td style="background-color:red">未发货</td>
<td><a href="/Home/Update?id=@item.OrderID">发货</a></td>
}
else
{
<td>已发货</td>
<td></td>
}
</tr>
}
</table>
</div>
</div>
添加效果
前端代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>添加订单</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<p style="font-size:30px;margin-top:30px;">添加订单</p>
<hr />
<form action="/Home/Add" method="post">
下单人 <input type="text" name="UserName" id="UserName" onblur="checkName()" class="form-control" style="width:40%" /><span id="Message" style="color:red"></span><br />
订单日期 <input type="date" name="OrderDate" id="OrderDate" class="form-control" style="width:40%" /><span id="Messagedate" style="color:red"></span><br /><br />
<input type="submit" class="btn btn-block" value="添加" style="width:10%;margin-left:150px;" /><br />
<span>@ViewBag.message</span>
</form>
</div>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
//提交表单之前执行表单验证函数 checkForm
$("form").bind("submit", checkForm);
});
function checkName() {
if ($("#UserName").val() == "") {
$("#Message").html("下单人是必填项");
$("#UserName").focus();
return false;
} else {
$("#Message").html("");
}
return true; //验证通过
}
function checkDate() {
if ($("#OrderDate").val() == "") {
$("#Messagedate").html("订单日期是必填项");
$("#OrderDate").focus();
return false;
} else {
$("#Messagedate").html("");
}
return true; //验证通过
}
function checkForm() {
if (checkName()&&checkDate())
return true;
return false;
}
</script>
</body>
</html>
后台代码
添加失败，会弹出添加失败的弹出框
return Content("<script>alert('添加失败');window.location.href='Index'</script>");
HttpGet]
public ActionResult Add()
{
return View();
}
[HttpPost]
public ActionResult Add(OrderInfo o)
{
if (o != null)
{
db.OrderInfo.Add(o);
int a = db.SaveChanges();
if (a == 1)
{
return RedirectToAction("Index");
}
else
{
return Content("<script>alert('添加失败');window.location.href='Index'</script>");
}
}
ViewBag.message = "值为空";
return View();
}
发货后台代码
public ActionResult Update(string id)
{
if (id!=null)
{
OrderInfo o = db.OrderInfo.Find(int.Parse(id));
o.OrderState = 1;
db.SaveChanges();
return RedirectToAction("Index");
}
return RedirectToAction("Index");
}