ASP.NET MVC，Angularjs和Vue.js呈现文件图片

周未了，又来博客园写随笔，分享程序方法，技巧，经验，把平常时常用的开发框架，语言，脚本集中总结。
前段时写了些上传文件，如图片，二进制存储，后来又把上传的二进制经管理实现转存为原文件，图片缩略图等。

今天把转换为文件，在网页呈现出来。决定使用ASP.NET MVC,Angularjs,vue,
代码可直接写在页面上，也可以写在js单独文件，然后在页面中引用即可。
以上所说的，有使用fetch, $http 等来呼叫WebAPI。

先来看看ASP.NET MVC,在控制器中，写2个ActionResult(),一个经控制器传递数据至视图中，另一个只是为了创建视图，稍后去单独的js获取数据。

 

在视图顶部，#1 and #2行，引用命名空间。
#4行，宣告model，即是在控制中，

_Data = entity.HerbPictureSelectByFile();

返回的IEnumerable<herbPicture>。

直接在视图中实现图片呈现，

 

上面截图中，#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版本。


超简单的，写div标签和引用js。

 

#17，API访问URL，
#21为异步Function，从获取的数据，动态生表格与数据呈现。
#44function,
#68行，img标签，数据动态Bind，

<img src="/Thumbnail/' + item.ThumbnailFileName +'" width="'+ item.Thumbnail_Width +'px" height="'+ item.Thumbnail_Height +'px" />

 

下面是使用angularjs，非MVC，而是html页面来实现，

<img ng-src="../Thumbnail/{{pic.ThumbnailFileName}}" ng-style="width:{{pic.Thumbnail_Width}}px; height:{{pic.Thumbnail_Height}}px;" />

#9指定 ng-app，
#10指定ng-controller，

 

#14行，使用$http获取数据。

最后是vue示例，

 

<img v-bind:src="'../Thumbnail/' + pic.ThumbnailFileName" v-bind:width="pic.Thumbnail_Width + 'px'" v-bind:height="pic.Thumbnail_Height + 'px'">

 

上截2号js文件引用，

 

在vue代码，注重this的应用。

上截图#8行el值，即是更前一截图中#10指定的值。

另外，#11这个变量，此是静态指定，实际需要从数据库参数表中获取。

上面的不管angular还是vue，图片呈现是一行呈现，不管是table还是div也均不能列换行。
想换行的话，可以参考前几篇的实现。