C# + html + fetch + API + javascript

  • C# + html + fetch + API + javascript已关闭评论
  • 14 次浏览
  • A+
所属分类:.NET技术
摘要

本随笔,在html利用fetch去call web api对数据进行添加,修改,更新和删除。

数据库与存储过程,此处略过…

创建entity,方便web api进行互动。

本随笔,在html利用fetch去call web api对数据进行添加,修改,更新和删除。

数据库与存储过程,此处略过...

创建entity,方便web api进行互动。
C# + html + fetch + API + javascript

 

现在可以写Web API,

C# + html + fetch + API + javascript

html 实现添加数据,

C# + html + fetch + API + javascript

 

js file,

C# + html + fetch + API + javascript

 
上面添加的数据,将以下面的数据列呈现,
C# + html + fetch + API + javascript

 

 

Insus.NET只是在html静态写了数据的表头。数据将是在js动态生成。

C# + html + fetch + API + javascript

 

动态生成数据行,还有几个按钮 input type as button,当然其的 click事件也将是动态的。
上面的js截图中,还有#1,2,3,4个子function,下面分别详细解释与说明。

function dynamic_table_rendering(data):
C# + html + fetch + API + javascript

 

function picturebutton_eventlistener(data):
function detailbutton_eventlistener(data):
C# + html + fetch + API + javascript

 

function deletebutton_eventlistener(data):
C# + html + fetch + API + javascript

 

C# + html + fetch + API + javascript

 

最后分析一下数据详细,数据接收传过来的参数,以及fetch对api的操作,如更新,删除等。
C# + html + fetch + API + javascript

 

C# + html + fetch + API + javascript

 

function reload_data() 本次Insus.NET实现从数据库重新加载,与前几篇实现不相同。
即是传入记录主键,去数据库select得到更新后的数据。
C# + html + fetch + API + javascript

虽说是从数据搜索来重新加载,但是Insus.NET有想过,页面刷新时,却是要localStorage来加载,上面截图#84行代码。

接下来,我们看看删除的功能实现。
C# + html + fetch + API + javascript

Insus.NET由于第1次使作 fetch,诸多代码没有写得完美,或许还不足之处,望日后有强劲....
C# + html + fetch + API + javascript