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:

接下来，创建web api 2:

 

下面展开GetCustomers()和Insert()说明一下,Update和Delete接口可以参考Insert来实现。

 

 

此时，会有网友会看到，还有一个repsonse类，它是什么来的，其实它只是Insus.NET为了方便前端call其所得到的一些数据而已。

 
views:

 
这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)函数：

 
最后效果，

 

来源:https://www.cnblogs.com/insus/p/18577591
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！