MVC将音乐和图像列表放入表格中

Question

我已经插入了上传文件及其工作的代码，但问题是我希望上传图片在图片名称表中，音乐表格列中的音乐。

但下面的代码集是我上传其中任何一个我会得到一个新列

这是我的表

<table class="display" id="example">
    <thead>
        <tr>
            <th style = width = "10">
                Image File
            </th>
            <th>
                Image Preview
            </th>
            <th>
               MP3 File
            </th>
            <th>
                Remove 
            </th>
        </tr>
    </thead>
    <tbody>

这是我的剃刀html - 我的所有文件都上传到目录中，是否有代码将.jpg扩展为图像列和mp3到mp3列？

      @foreach (var f in Directory.GetFiles(Server.MapPath(@ViewBag.UploadURL)))
        {
            var fileInfo = new FileInfo(f);

            ViewBag.FileNoExtension = fileInfo.Name.Substring(0, fileInfo.Name.IndexOf('.'));
            ViewBag.FileExtension = fileInfo.Name.Substring(fileInfo.Name.IndexOf('.') + 1);
            <tr>
               <td style = width = "10">@fileInfo.Name</td>
                @* <td>@ViewBag.FileNoExtension</td>*@
              <td><img width="50" height="50" src="@Url.Content(@ViewBag.UploadURL + "/" + fileInfo.Name)" /></td>


                    <td>
                       // i need the code for this line to populate mp3 files         
                    </td>
                    }
                    <td>            
                      @Html.ActionLink("Remove", "Remove", new { id = @ViewBag.StoryID, id2 = @ViewBag.FileNoExtension, id3 = @ViewBag.FileExtension })
                    </td>

            </tr>
        }

Answer 1

我假设您有某种形式的通用命名来将图像与名称相关联。在这个例子中，我只是按顺序将图像分配给MP3文件。

1. 在控制器中做杂乱的工作，而不是你的观点。保持观点简单。
2. 将视图模型用于更接近视图需要的内容。
3. 让控制器完成将原始事实转换为视图模型的混乱工作。
4. Controller然后将视图模式传递给视图以显示它。

您的观点应该像这样简单：

@model IEnumerable<SomeWebApplication.Models.MusicItem>
<table class="display" id="example">
    <thead>
        <tr>
            <th>Image File</th>
            <th>MP3 File</th>
            <th>Remove</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td><img width="50" height="50" src="@item.ImageUrl" /></td>
                <td><embed src="@item.MusicUrl" /></td>
                <td>@Html.ActionLink("Remove", "Remove", new { id = @item.Id })</td>
            </tr>
        }
    </tbody>
</table>

...它将一个MusicItems集合作为其视图模型

视图模型将如下所示：

public class MusicItem
{
    /// <summary>
    /// Unique id of item
    /// </summary>
    public int Id { get; set; }

    /// <summary>
    /// URL to image
    /// </summary>
    public string ImageUrl { get; set; }

    /// <summary>
    /// Url to music
    /// </summary>
    public string MusicUrl { get; set; }
}

您的控制器应该进行繁重的工作：

    public ActionResult Details(int id)
    {
        Story story = db.Stories.Find(id);

        // Use server relative paths for views
        String filepathMusic = "/Upload/story/Music/" + story.FileURL;
        String filepathImage = "/Upload/story/Image/" + story.FileURL;

        // Build a list of MusicItem objects
        List<MusicItem> items = new List<MusicItem>();
        string[] musicFiles = Directory.GetFiles(Server.MapPath("~" + filepathMusic));
        foreach (var musicFile in musicFiles)
        {
            items.Add(new MusicItem()
            {
                Id = id,
                MusicUrl = filepathMusic + "/" + Path.GetFileName(musicFile)
            });
        }

        // This example simply allocates the images in the order found - need to do this properly
        string[] imageFiles = Directory.GetFiles(Server.MapPath("~" + filepathImage));
        int index = 0;
        foreach (var imageFile in imageFiles)
        {
            if (index < items.Count)
            {
                items[index].ImageUrl = filepathImage + "/" + Path.GetFileName(imageFile);
            }
            index++;
        }

        return View(items);
    }

然后，假设你的故事中有2个图像和两个文件......

上面测试代码的最终结果如下：