ASP.NET MVC，Angularjs和Vue.js呈现文件图片
周未了，又来博客园写随笔，分享步伐方法，本领，经验，把平常时常用的开辟框架，语言，脚本会合总结。前段时写了些上传文件，如图片，二进制存储，后来又把上传的二进制经管理实现转存为原文件，图片缩略图等。
今天把转换为文件，在网页呈现出来。决定使用ASP.NET MVC,Angularjs,vue,
代码可直接写在页面上，也可以写在js单独文件，然后在页面中引用即可。
以上所说的，有使用fetch, $http 等来呼叫WebAPI。
先来看看ASP.NET MVC,在控制器中，写2个ActionResult(),一个经控制器传递数据至视图中，另一个只是为了创建视图，稍后去单独的js获取数据。
https://img2024.cnblogs.com/blog/28036/202412/28036-20241228112742309-1785659958.png
https://img2024.cnblogs.com/blog/28036/202412/28036-20241228113216821-1958697816.png
在视图顶部，#1 and #2行，引用命名空间。
#4行，宣告model，便是在控制中，
_Data = entity.HerbPictureSelectByFile();返回的IEnumerable。
直接在视图中实现图片呈现，
https://img2024.cnblogs.com/blog/28036/202412/28036-20241228114357749-946660570.png
上面截图中，#12，#13，#22，#27，#31行中，有Hightlight的class，是为了使用Div标签实现表格，可查看从前的随笔，
HTML5使用Div标签来实现表格 https://www.cnblogs.com/insus/p/5653116.html
还有就是Razor语法，变量与字符串毗连，可以使用@()或@string.Format()，参考上截图的#33,#34红色箭头的语法。
末了需要指出，#27，WriteLiteral(）是为表格，每行呈现参数指定列数之后，换行。
接下来，我们看看MVC Ver2版本。
https://img2024.cnblogs.com/blog/28036/202412/28036-20241228123357323-369253936.png
超简单的，写div标签和引用js。
https://img2024.cnblogs.com/blog/28036/202412/28036-20241228124233902-1906405577.png
#17，API访问URL，
#21为异步Function，从获取的数据，动态生表格与数据呈现。
#44function,
#68行，img标签，数据动态Bind，
<img src="https://www.cnblogs.com/Thumbnail/' + item.ThumbnailFileName +'" width="'+ item.Thumbnail_Width +'px" height="'+ item.Thumbnail_Height +'px" />
下面是使用angularjs，非MVC，而是html页面来实现，
https://img2024.cnblogs.com/blog/28036/202412/28036-20241228125848447-1932077640.png
<img ng-src="..https://www.cnblogs.com/Thumbnail/{{pic.ThumbnailFileName}}" ng-style="width:{{pic.Thumbnail_Width}}px; height:{{pic.Thumbnail_Height}}px;" />
#9指定 ng-app，
#10指定ng-controller，
https://img2024.cnblogs.com/blog/28036/202412/28036-20241228130441272-1686768525.png
#14行，使用$http获取数据。
末了是vue示例，
https://img2024.cnblogs.com/blog/28036/202412/28036-20241228131127618-1308336749.png
<img src="https://www.cnblogs.com/Thumbnail/' + item.ThumbnailFileName +'" width="'+ item.Thumbnail_Width +'px" height="'+ item.Thumbnail_Height +'px" />
上截2号js文件引用，
https://img2024.cnblogs.com/blog/28036/202412/28036-20241228131755674-1837761468.png
在vue代码，注意this的应用。
上截图#8行el值，便是更前一截图中#10指定的值。
别的，#11这个变量，此是静态指定，实际需要从数据库参数表中获取。
上面的不管angular照旧vue，图片呈现是一行呈现，不管是table照旧div也均不能列换行。
想换行的话，可以参考前几篇的实现。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]