C# mvc +axios + web api + javascript
2024年,是Insus.NET生命中转折的一年,许久没有更新博客了。
许多网友在通讯或邮件私聊,希望在博客上更新内容,分享一些技能与通用的博文。
回归正题,在C# mvc使用javascript axios访问web api。
在ms sql server创建数据表
存储过程...
C# MVC程序与数据库交互,创建entity:
上面的entity,有传参数与无参数传入的,有把datatable 转为IEnumerable和直接执行存储过程的。当然,还有一个类别BizSP sp = new BizSP(),可以在本博客上搜索得到。
model:
controller:
下面展开GetCustomers()和Insert()说明一下,Update和Delete接口可以参考Insert来实现。
此时,会有网友会看到,还有一个repsonse类,它是什么来的,其实它只是Insus.NET为了方便前端call其所得到的一些数据而已。
这3个视图,仅是html,input text button以及引用javascript。
下面为视图CustList.cshtml的js的部分代码:
在List视图中,数据行皆动态产生,并在每行数据最后一列产detail和delete 2个button。
上面截图中,
#1动态产生数据行。
#2产生的detail 按钮临听click enent事件。
#3 生成的delete按钮addEventListener 监听click行为。
其中,function DetailButton_EventListener(data)内,有此代码需要解释一下,
#A 链接至详细页面,此时,我们不只传记录主键,到详细面再去从数据库获取数据,而是为了效率,我们只需要把本笔数据从列表面内取得,传过去即可。
#B 这是一个js函数,把数据通过#C上传至asp.net mvc的控制器Controller来对传过来的数据进行处理。
下面是function DeleteButton_EventListener(data)函数:
最后效果,
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· 10亿数据,如何做迁移?
· 推荐几款开源且免费的 .NET MAUI 组件库
· c# 半导体/led行业 晶圆片WaferMap实现 map图实现入门篇