web应用学习记录

目录

一.初识ASP.NET

二.MVC架构

1.控制器(Controller)

2.视图(View)

三.掌握数据绑定

四.与前端结合(一般处理程序和axios)

        1.vue

        2.一般处理程序

五.效果

1.返回的json数据

2.网页效果


一.初识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接口,这个接口要求实现两个主要方法:ProcessRequestIsReusable

  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向前端提供数据,并利用前端框架实现动态、交互式的用户界面。这种前后端分离的方式使得开发更具灵活性,同时也提高了整个应用的可维护性。

  • 19
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值