目录
一.初识ASP.NET
ASP.NET 是Microsoft 公司的ASP和.NET Framework 两项核心技术的结合。ASP.NET是一项功能强大、非常灵活的新技术,它是微软推出的动态服务器页面(Active Sever Pages,ASP)的新一代Web开发技术,用于编写动态Web服务页面。
二.MVC架构
MVC架构的引入使得Web应用程序更容易维护和扩展。通过将应用程序划分为模型、视图和控制器,能够更清晰地组织代码,并实现业务逻辑与用户界面的分离。这种分层的设计使得团队协作更加容易,同时也提高了代码的可测试性和可维护性。
1.控制器(Controller)
public class ProductController : Controller
{
public IActionResult Index()
{
// 业务逻辑处理
var products = _productService.GetProducts();
return View(products);
}
public IActionResult Details(int id)
{
// 通过id获取产品详情
var product = _productService.GetProductById(id);
return View(product);
}
}
2.视图(View)
html:
@model IEnumerable<Product>
<h2>Product List</h2>
@foreach (var product in Model)
{
<div>
<h4>@product.Name</h4>
<p>@product.Description</p>
</div>
}
三.掌握数据绑定
ASP.NET的数据绑定机制简化了将数据与用户界面元素关联的过程。通过数据绑定,能够更轻松地将数据库中的数据呈现在Web页面上,而不必手动编写大量的HTML和JavaScript代码。这种简化大大提高了开发效率,特别是在处理大量数据时。
public class HomeController : Controller
{
public IActionResult Index()
{
var model = new List<string> { "Item 1", "Item 2", "Item 3" };
return View(model);
}
}
@model List<string>
<h2>Items</h2>
<ul>
@foreach (var item in Model)
{
<li>@item</li>
}
</ul>
四.与前端结合(一般处理程序和axios)
1.vue
现代Web开发往往离不开前端框架的使用。在ASP.NET中,与流行的前端框架(如Vue.js、React等)结合使用,成为提升用户体验的关键一环。我学到了如何通过Web API向前端提供数据,并利用前端框架实现动态、交互式的用户界面。这种前后端分离的方式使得开发更具灵活性,同时也提高了整个应用的可维护性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-3.7.1.js"></script>
<script src="vue.js"></script>
</head>
<body>
<input id="Button1" type="button" value="查询" onclick="moclick()"/>
<div id="app">
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>学号</th>
<th>操作</th>
</tr>
</thead>
<tbody id="ta1">
</tbody>
</table>
</div>
</body>
</html>
<script>
function moclick() {
$.ajax({
type: "post",
url: "userHandler.ashx",
data: {"retype":"cx"},
success: function (res) {
console.log(res);
var str = "";
if (res.code==200) {
for (var i = 0; i < res.data.length; i++) {
str += "<tr><td>" + res.data[i].username + "</td><td>" + res.data[i].sno + "</td>"
+ "<td><input id='Button1'' type='button'' value='删除'' onclick='userEdit(" + res.data[i].id + ")'/></td>"
+ "<td><input id='Button1'' type='button'' value='修改'' onclick='userInfoEdit(" + res.data[i].id + ")'/></td>"
+ "<td><input id='Button1'' type='button'' value='修改'' onclick='userAdd()'/></td>"
+ "</tr > "
}
$("#ta1").html(str)
}
},
error: function (res) {
}
});
}
function userEdit(id) {
$.ajax({
type: "post",
url: "userHandler.ashx?id=" + id,
data: {"retype":"sc"},
success: function (res) {
if (res.code==1) {
alert("删除成功");
}
},
error: function(res) {
}
});
}
function userInfoEdit(id) {
window.location = "UserHandler.ashx?retype=xgpage&id=" + id;
}
function userAdd() {
window.location="UserHandler.ashx?retype=addpage"
}
</script>
2.一般处理程序
一般处理程序(Generic Handler)是ASP.NET中用于处理HTTP请求的一种特殊类型的类。它通常用于响应特定的HTTP请求,如异步JavaScript和XML(AJAX)请求、图像生成、文件上传等。一般处理程序的文件扩展名通常是.ashx
。
一般处理程序实现了IHttpHandler
接口,这个接口要求实现两个主要方法:ProcessRequest
和IsReusable
。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using BLL;
using Model;
namespace moweb
{
/// <summary>
/// UserHandler 的摘要说明
/// </summary>
public class UserHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
string retype = context.Request["retype"];
//context.Response.Write("Hello World");
if (retype=="cx")
{
UserInfoBll ui = new UserInfoBll();
UserInfoModel moder = new UserInfoModel();
moder.username = "";
moder.page = 1;
moder.pagesize = 20;
string ss = "123";
List<UserInfoModel> list = ui.getUserInfoList(moder);
JavaScriptSerializer jss = new JavaScriptSerializer();
string str = jss.Serialize(list);
str = "{\"code\":\"200\",\"total\":\""+ss+ "\",\"data\":"+str+" }";
context.Response.Write(str);
}
else if (retype=="sc")
{
UserInfoBll uid=new UserInfoBll();
string id = context.Request.QueryString["id"];
if (deleteUser(id))
{
context.Response.Write("{\"code\":\"1\"}");
}
else
{
context.Response.Write("{\"code\":\"2\"}");
}
}
else if (retype == "xgpage")
{
//context.Response.Write("跳转成功!");
context.Response.Redirect("web2.html?id=" + context.Request["id"]);
}
else if (retype == "getedit")
{
getUserInfoEdit(context);
}
else if (retype == "xg")
{
editUserInfo(context);
}
else if (retype=="addpage")
{
context.Response.Redirect("web3.html");
}
else if (retype=="adduser")
{
}
}
public bool deleteUser(string id)
{
UserInfoBll uid= new UserInfoBll();
if (uid.deleteUserINfo(id))
{
return true;
}
return false;
}
private void editUserInfo(HttpContext context)
{
UserInfoBll uib = new UserInfoBll();
UserInfoModel user = new UserInfoModel();
string id = context.Request.Form["id"] + "";
user.id = int.Parse(id);
user.username = context.Request.Form["username"];
if (uib.editUserInfo(user) > 0)
{
context.Response.Write("{\"code\":\"1\"}");
}
else
{
context.Response.Write("{\"code\":\"0\"}");
}
}
public void getUserInfoEdit(HttpContext context)
{
UserInfoBll uib = new UserInfoBll();
UserInfoModel uim = new UserInfoModel();
uim.id = int.Parse(context.Request.QueryString["id"]);
uim = uib.getUserInfoById(uim);
JavaScriptSerializer jss = new JavaScriptSerializer();
string str = jss.Serialize(uim);
context.Response.Write(str);
}
public void addUser()
{
UserInfoBll user = new UserInfoBll();
UserInfoModel model = new UserInfoModel();
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
五.效果
1.返回的json数据
2.网页效果
现代Web开发往往离不开前端框架的使用。在ASP.NET中,与流行的前端框架(如Vue.js、React等)结合使用,成为提升用户体验的关键一环。我学到了如何通过Web API向前端提供数据,并利用前端框架实现动态、交互式的用户界面。这种前后端分离的方式使得开发更具灵活性,同时也提高了整个应用的可维护性。