CODEWITHSUNDEEP
c#asp.net-mvc-3razor
Abhay Singh
Abhay Singh

Reputation: 1689

i want to show images on view page from controller action

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

    return View("showfiles");
}

This is my controller action in which two string array contain path of all audio file and image file. Now, I have to show these images on my view page "showfiles". Please suggest me how I will have to implement this ?

Upvotes: 0

Views: 517

Answers (4)

Jayesh Sorathia
Jayesh Sorathia

Reputation: 1614

Made this for play video in MVC and get this video from controller through custom action filter may be this can be very useful to you.

1 ) Add new class file 'VideoDataResult.cs' for custom action filter

    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 Add 'VideoDataController' controller file using System; using System.Collections.Generic; using System.Linq; using System.Web; using PlayVideoInMVC.CustomDataResult; using System.Web.Mvc;

    namespace PlayVideoInMVC.Controllers
    {
        public class VideoDataController : Controller
        {
            //
            // GET: /VideoData/

            public ActionResult Index()
            {
                return new VideoDataResult();
            }

        }
    }

3 ) Add HTML markup of 'View' : @{ ViewBag.Title = "Index"; }

    <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>

Upvotes: 1

smallerpig
smallerpig

Reputation: 11

you can just creat a viewmodel class contain the media and image array like this:

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

so in you action :

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);
}

view:

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

Upvotes: 1

user61470
user61470

Reputation:

There are a number of ways of getting data from a Controller to the View, you can use the ViewBag

Controller:

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");
}

View:

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

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

In my opinion you should take advantage of MVC's strongly typed views and have a ViewModel class (e.g. ShowFilesViewModel) which has properties anything you need for your view such as for each of these arrays and then strongly type your View to that view model class:

ViewModel:

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

Controller:

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);
}

View:

@model ShowFilesViewModel

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

Upvotes: 3

keenthinker
keenthinker

Reputation: 7830

The Controller.View method has an overload, that can pass also a model to the view, in this case your string array. Change your code to:

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);
}

In your view use the model object to fetch the images and show them using standard HTML. One solution could look like this:

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

A good tutorial about models and the communication between controller and view can be found at the ASP.NET site - Intro to MVC and Accessing model from controller.

Upvotes: 1

Related Questions