在同一 Razor 页面的不同部分显示图像

Question

我有一个 Azure Blob，它有一个容器，里面有几个子文件夹。在上一个问题中，他们回答了我如何让其中一个子文件夹输出其内容而不输出其他子文件夹。到目前为止一切顺利。

现在的问题是：

我有几个部分，例如 DFD、用例、流程图等。这些部分是按屏幕截图显示的。我必须找到一种方法如何在正确的部分下输出每个子文件夹。

我正在使用 public ActionResult Index() which returns View(blobList)（很快就会显示代码）。问题是它只显示一个子容器，我必须手动输入它。

有没有一种方法可以让我在从 blob 获取图像时在不同的部分显示不同的图像？

我尝试编写一种方法，该方法基本上根据指定的子文件夹从特定的 blob 中获取 URLs，但我不知道如何 return String 列表从 Controller 到视图。

这是我正在使用的一些屏幕截图和编码

http://i.imgur.com/fVs1SZk.png [例如，在状态图中应该有前两个图像，在 Activity 图中应该有剩余的图片]

这是编码：

SystemDesign.cs // 型号

public class 系统设计 { public 字符串 URL { 得到；放; }

public static SystemDesign returnImageURL(IListBlobItem item)
{

    if (item is CloudBlockBlob)
    {
        var blob = (CloudBlockBlob)item;
        return new SystemDesign { URL = blob.Uri.ToString() };

    }
    return null;
}

}

SystemDesignModel.cs

public class SystemDesignModel
    {
        public SystemDesignModel() : this(null)
        {
            Files = new List<SystemDesign>();
        }

        public SystemDesignModel(IEnumerable<IListBlobItem> list)
        {
            Files = new List<SystemDesign>();

            foreach (var item in list)
                {
                    SystemDesign test = SystemDesign.returnImageURL(item);
                    Files.Add(test);

                }


        }
        public List<SystemDesign> Files { get; set; }
    }

index.cshtml

<!-- other code hidden from brevity -->
@foreach (var item in Model.Files)
{
    <a href="@item.URL"><img src="@item.URL" height="128" width="128" /></a>
}

SystemDesignController Index()

public ActionResult Index()
        {
            // Code until Container reference removed from brevity

            Models.SystemDesignModel blobsListDFD = new Models.SystemDesignModel(storageContainer.ListBlobs("**dfd**", useFlatBlobListing: true));
            return View(blobsListDFD);
        }

这是我为了 return 字符串 URI 列表而尝试发明的方法，但不知道如何将它从控制器传递到视图 中这个方法我想在 Index.cshtml 中传递容器名称，然后根据参数，我将这些图像输出到所述子文件夹中

public List<string> showBlobs(string blobContainerName)
{
    StorageCredentials credentials = new StorageCredentials("swiftdevelopmentstorage", "HqaCkZjdQ8w/DX/fS3wDxU6HXbeqV5EZ1b+UQaKALxaJDrN9JoZZYn8Q0KT6QR4tCrdGQicxE+tKRKScjINW8w==");
    CloudStorageAccount storageAccount = new CloudStorageAccount(credentials, true);

    CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
    CloudBlobContainer storageContainer = blobClient.GetContainerReference("systemdesign");

    List<string> list = new List<string>();
    Models.SystemDesignModel blobsListDFD = new Models.SystemDesignModel(storageContainer.ListBlobs("dfd", useFlatBlobListing: true));
    foreach (var item in blobsListDFD.Files)
    {
        list.Add(item.URL.ToString());
    }


    return list;

}

有什么我可以改变的吗？

Answer 1

好吧，这很尴尬，但我要回答我自己的问题，因为我想出了解决方法。

我所做的是实现了一个 _PartialView ，它连接到方法 showBlobs(string containerName) 。在 Index.cshtml 中找到的代码 @foreach 被重新定位到局部视图中，因此由于传递的参数，它只显示所需容器中的图像。

下面我发布了所有重写的代码，使其正常工作。希望对某人有所帮助

SystemDesignController.cs // 更改了 Index() 和 _showBlobs()

public ActionResult Index()
{
    return View();
}
// Other code

[ChildActionOnly]
public PartialViewResult _showBlobs(string containerName)
{
    StorageCredentials credentials = new StorageCredentials(name, key);
    CloudStorageAccount storageAccount = new CloudStorageAccount(credentials, true);

    CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
    CloudBlobContainer storageContainer = blobClient.GetContainerReference(rootContainer);


    Models.SystemDesignModel blobsList = new Models.SystemDesignModel(storageContainer.ListBlobs(containerName, useFlatBlobListing: true));

    return PartialView(blobsList);

}

_showBlobs.cshtml // 部分视图

@{
        foreach (var item in Model.Files)
        {
            <a href="@item.URL"><img src="@item.URL" height="128" width="128" /></a>

        }

}

SystemDesignModel.cs // 模型和实例

 public partial class SystemDesign
    {
        public string URL { get; set; }


        public SystemDesign() { }

        public SystemDesign (string url, string directory)
        {
            this.URL = url;

        }

        public static SystemDesign returnImageURL(IListBlobItem item)
        {

            if (item is CloudBlockBlob)
            {
                var blob = (CloudBlockBlob)item;
                return new SystemDesign 
                {   URL = blob.Uri.ToString(),

                };

            }
            return null;
        }

    }   


    // System Design Model 
    public partial class SystemDesignModel
    {
        public SystemDesignModel() : this(null)
        {
            Files = new List<SystemDesign>();
        }

        public SystemDesignModel(IEnumerable<IListBlobItem> list)
        {
            Files = new List<SystemDesign>();

            foreach (var item in list)
                {
                    SystemDesign test = SystemDesign.returnImageURL(item);
                    Files.Add(test);

                }


        }
        public List<SystemDesign> Files { get; set; }
    }

在同一 Razor 页面的不同部分显示图像

Show images in different sections, of the same Razor Page

c#

azure

razor

asp.net-mvc-4