我想在视图页面上显示控制器操作的图像

本文关键字：控制器 显示 操作 图像 视图 | 更新日期: 2023-09-27 17:59:53

public ActionResult GetContentFromFTP()
{
    string[] FTP_Imagery = Directory.GetFiles(@"F:'abc'imgfiles'Imagery'");
    string[] FTP_Audio = Directory.GetFiles(@"F:'abc'audiofiles'Audio'");
    return View("showfiles");
}

这是我的控制器操作，其中两个字符串数组包含所有音频文件和图像文件的路径。现在，我必须在我的视图页面"showfiles"上显示这些图像。请告诉我如何实现这一点？

我想在视图页面上显示控制器操作的图像

有很多方法可以将数据从控制器获取到视图，您可以使用ViewBag

控制器：

public ActionResult GetContentFromFTP()
{
    string[] FTP_Imagery = Directory.GetFiles(@"F:'abc'imgfiles'Imagery'");
    string[] FTP_Audio = Directory.GetFiles(@"F:'abc'audiofiles'Audio'");
    ViewBag.Add("FTP_Imagery", FTP_Imagery);
    ViewBag.Add("FTP_Audio", FTP_Audio);
    return View("showfiles");
}

视图：

@foreach(var img in ViewBag["FTP_Imagery"]){
    <!-- HTML for each image file -->
}
@foreach(var audio in ViewBag["FTP_Audio"]){
    <!-- HTML for each audio file -->
}

在我看来，您应该利用MVC的强类型视图，并拥有一个ViewModel类(例如ShowFilesViewModel(，该类具有视图所需的任何属性，例如每个数组然后在视图模型类中强烈键入您的视图：

视图模型：

public class ShowFilesViewModel()
{
    public string[] Images {get; set;}
    public string[] Audio {get; set;}
    // anything else you need for your view...
}

控制器：

public ActionResult GetContentFromFTP()
{
    string[] FTP_Imagery = Directory.GetFiles(@"F:'abc'imgfiles'Imagery'");
    string[] FTP_Audio = Directory.GetFiles(@"F:'abc'audiofiles'Audio'");
    var viewModel = new ShowFilesViewModel() 
    {
        Images = FTP_Imagery;
        Audio = FTP_Audio;
    };
    return View("showfiles", viewModel);
}

视图：

@model ShowFilesViewModel
@foreach(var image in Model.Images){
    <!-- HTML for an image file -->
}
@foreach(var image in Model.Audio){
    <!-- HTML for an audio file -->
}

Controller.View方法有一个重载，它还可以向视图传递一个模型，在本例中是您的字符串数组。将您的代码更改为：

public ActionResult GetContentFromFTP()
{
    string[] FTP_Imagery = Directory.GetFiles(@"F:'abc'imgfiles'Imagery'");
    string[] FTP_Audio = Directory.GetFiles(@"F:'abc'audiofiles'Audio'");
    return View("showfiles", FTP_Imagery);
}

在视图中，使用模型对象获取图像并使用标准HTML显示它们。一个解决方案可能是这样的：

@foreach (var image in Model)
{
    <img src="@image" />
    <br />
}

关于模型以及控制器和视图之间的通信的好教程可以在ASP.NET网站上找到——MVC简介和从控制器访问模型。

您只需创建一个包含媒体和图像数组的视图模型类，如下所示：

class ViewModel{
   Public string[] Images {get;set;}
   Public string[] Videos {get;set;}
}

所以在你的行动中：

public ActionResult GetContentFromFTP()
{
string[] FTP_Imagery = Directory.GetFiles(@"F:'abc'imgfiles'Imagery'");
string[] FTP_Audio = Directory.GetFiles(@"F:'abc'audiofiles'Audio'");
ViewModel vm = new ViewModel(){Images = FTP_Imagery,Videos=FTP_Audio };
return View("showfiles", vm);
}

视图：

@foreach (var image in Model.Images)
{
   <img src="@image" />
   <br />
}
@foreach (var video in Model.Videos)
{
   <video src="@video " />
   <br />
}

在MVC中为播放视频而制作，并通过自定义动作过滤器从控制器获取此视频，这可能对您非常有用。

1(为自定义操作过滤器添加新的类文件"VideoDataResult.cs">

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Web;
    using System.Web.Hosting;
    using System.Web.Mvc;
    namespace PlayVideoInMVC.CustomDataResult
    {
        public class VideoDataResult : ActionResult
        {
    /// <summary>
    /// The below method will respond with the Video file
    /// </summary>
    /// <param name="context"></param>
    public override void ExecuteResult(ControllerContext context)
    {
        var strVideoFilePath = HostingEnvironment.MapPath("~/VideoFiles/Test2.mp4");
        context.HttpContext.Response.AddHeader("Content-Disposition", "attachment; filename=Test2.mp4");
        var objFile = new FileInfo(strVideoFilePath);
        var stream = objFile.OpenRead();
        var objBytes = new byte[stream.Length];
        stream.Read(objBytes, 0, (int)objFile.Length);
        context.HttpContext.Response.BinaryWrite(objBytes);
            } 
        }
    }

2添加"VideoDataController"控制器文件使用系统；使用System.Collections.Generic；使用System.Linq；使用System.Web；使用PlayVideoInMVC.CustomDataResult；使用System.Web.Mvc；

    namespace PlayVideoInMVC.Controllers
    {
        public class VideoDataController : Controller
        {
            //
            // GET: /VideoData/
            public ActionResult Index()
            {
                return new VideoDataResult();
            }
        }
    }

3(添加"视图"的HTML标记：@{ViewBag.Title="索引"；}

    <h2>Play Video</h2>
    <h3><a href="@Url.Action("Index", "VideoData")">Download Video</a> </h3>
    <video width="320" height="240" controls autoplay="autoplay">
        <source src="@Url.Action("Index", "VideoData")" type="video/mp4">
    </video>
相关文章：