Asp.net mvc MVC将音乐和图像列表放入表格

我已经在上传文件及其工作的代码插件，但问题是我想上传图像在图像名称表，音乐在音乐表列

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

这是我的桌子

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

图像文件
图片预览
MP3文件
去除

这是我的RazorHTML-我所有的文件都上传到一个目录中，有没有代码可以将.jpg的扩展名放到image列和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>
        }

@foreach（Directory.GetFiles（Server.MapPath（@ViewBag.UploadURL））中的var f）
{
var fileInfo=新的fileInfo（f）；
ViewBag.FileNoExtension=fileInfo.Name.Substring（0，fileInfo.Name.IndexOf（'.'）；
ViewBag.FileExtension=fileInfo.Name.Substring（fileInfo.Name.IndexOf（'.'）+1）；
@fileInfo.Name
@*@ViewBag.FileNoExtension*@
//我需要这行代码来填充mp3文件
}
@ActionLink（“删除”，“删除”，新的{id=@ViewBag.StoryID，id2=@ViewBag.FileNoExtension，id3=@ViewBag.FileExtension}）
}

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

在控制器中执行混乱的工作，而不是在视图中。保持视图简单

对更接近视图需要的内容使用视图模型

让控制器完成将原始事实转换为视图模型的繁琐工作

然后，控制器将视图模式传递到视图以显示它

您的视图应该很简单，如下所示：

@model IEnumerable
图像文件
MP3文件
去除
@foreach（模型中的var项目）
{
@ActionLink（“删除”，“删除”，新建{id=@item.id}）
}

…它将一组MusicItems作为其视图模型

视图模型将如下所示：

公共类音乐项目
{
/// 
///项目的唯一id
/// 
公共int Id{get；set；}
/// 
///指向图像的URL
/// 
公共字符串ImageUrl{get；set；}
/// 
///音乐网址
/// 
公共字符串MusicUrl{get；set；}
}

您的管制员应进行重物搬运：

public ActionResult详细信息（int-id）
{
Story Story=db.Stories.Find（id）；
//对视图使用服务器相对路径
字符串filepathMusic=“/Upload/story/Music/”+story.FileURL；
字符串filepathImage=“/Upload/story/Image/”+story.FileURL；
//构建MusicItem对象的列表
列表项=新列表（）；
字符串[]musicFiles=Directory.GetFiles（Server.MapPath（“~”+filepathMusic））；
foreach（music文件中的var music文件）
{
items.Add（新的MusicItem（）
{
Id=Id，
MusicUrl=filepathMusic+“/”+Path.GetFileName（musicFile）
});
}
//本例只是按照找到的顺序分配图像-需要正确地执行此操作
字符串[]imageFiles=Directory.GetFiles（Server.MapPath（“~”+filepathImage））；
int指数=0；
foreach（imageFiles中的var imageFile）
{
如果（索引

然后，假设你的故事中有两张图片和两个文件

上述测试代码的最终结果如下所示：

---

您是否尝试使用

System.IO.Path.GetExtension（文件名）

获取扩展名？最好将所有工作都放到控制器中，而不是视图中。构建包含视图所需详细信息的“项”（您自己的类）列表，并将其传递给视图。如果可能的话，视图应该保持相当简单，因为

cshtml

文件很快就会变得凌乱。请显示您的控制器代码，以便我可以提出改进建议（还有一个应用程序的屏幕截图也很好）呃，谢谢，但我没有从数据库tats获得为什么我在那里添加控制器，希望有帮助；）“从数据库获取”和它有什么关系？ViewModel只包含“数据”。它可以是来自任何地方的任何类型的数据。它不必来自数据库。只需根据目录内容构建对象列表。这种逻辑可以是简单的，也可以是复杂的，但您只希望它将图像和声音文件组合在一起。如果需要进一步建议，请提供文件夹中文件名的示例列表。

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

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