如何从ASP.NET MVC C＃中的SQL Server数据库流式传输mp3文件

Question

如何将mp3文件从SQL Server数据库流式传输到C＃中的ASP.NET MVC视图？

我能够从数据库中成功检索文件，但是我不知道需要将哪些数据传递给视图以及需要设置哪些属性。 我尝试在视图中使用数据源，但是在运行该应用程序时仍然得到“找不到文件”。

我不确定数据源应该是什么。 当我将数据源设置为本地mp3文件的路径时，它可以正常工作。

当我运行该应用程序时，出现“找不到文件”

ASP.NET MVC控制器：

using (SqlDataReader dr = cmd.ExecuteReader())
{
    while (dr.Read())
    {
        var mp3 = new Mp3Files
                {
                    DATA = (Byte[])dr["DATA"],
                    DATASCOURCE = dr
                };
        list.Add(mp3);
    }

    foreach (var item in list)
    {
        Mp3FilesList.Add(item);
    }

    return View("Loops", "_Layout", Mp3FilesList);
}

视图：

<div data-thumb="Scripts/img/adg3.jpg" data-type="audio" 
     class="audioplayer-tobe skin-wave " 
     data-source="@item.DATASCOURCE" data-
     scrubbg="../Scripts/waves2/adg3_mp3.png" data-
     scrubprog="Scripts/waves2/wavesprog.png" data-
     playfrom="last">

Mp3Files类：

{
    public int AUDIO_ID { get; set; }
    public string NAME { get; set; }
    public string CONTENT_TYPE { get; set; }
    public string BPM { get; set; }
    public string CATEGORY { get; set; }
    public Byte[] DATA { get; set; }
    public DbDataReader DATASCOURCE { get; set; }
}

Answer 1

我知道这篇文章已经很老了，但是由于有人可能会在Google研究之后来到这里，所以我将分享解决方法。

您有两种选择：通过MVC（如果要在页面中包含很多声音，则不友好）或JQuery（例如，可以创建加载动画以向用户提供友好的等待消息或微调框）。

选项1-MVC （ 我用过您的View（循环）的名称和您发布的代码 ）：

public ActionResult Loops()
{
    PageViewModel result = new PageViewModel();
    IDataReader dr = null; // some SQL Search
    result.Files = new List<Mp3File>();

    while (dr.Read())
    {
        result.Files.Add(new Mp3File()
        {
           Id = int.Parse(dr["Id"].ToString()),
           Name = dr["Name"].ToString(),
           ContentType = dr["ContentType"].ToString(), //must be something like audio/mp3 for example
           Category = dr["Category"].ToString(),
           Data = (Byte[])dr["Data"]
        });
    }

    return Json(result, JsonRequestBehavior.AllowGet);
}

然后，在CSHTML文件中，循环浏览ViewModel的files属性，并将数据指向音频HTML元素的源：

if (Model.Files?.Count > 0)
{
    <div class="list">
    @for (var i = 0; i < Model.Files.Count; i++)
    {
        <!-- AUDIO ITEM -->
        <label class="item">
            <span class="title"><i class="far fa-file-audio"></i> @Model.Files[i].Name</span>
            <audio controls>
                <source src="@Model.Files[i].Data" type="@Model.Files[i].ContentType" />
            </audio>
        </label>
    }
    </div>
}

jQuery解决方案 ：我个人认为，此选项更好，因为它更加用户友好并且不会导致长时间的等待白页：

1）尽可能将文件存储在Web服务器中，因为加载过程会更快；

2）在控制器中创建一个HTTP Get方法

    [HttpGet]
    public ActionResult GetFiles()
    {
         PageViewModel result = new PageViewModel();
         IDataReader dr = null; // some SQL Search
         result.Files = new List<Mp3File>();

         while (dr.Read())
         {
             result.Files.Add(new Mp3File()
             {
                Id = int.Parse(dr["Id"].ToString()),
                Name = dr["Name"].ToString(),
                ContentType = dr["ContentType"].ToString(), //must be something like audio/mp3 for example
                Category = dr["Category"].ToString(),
                Data = (Byte[])dr["Data"],
                Url = $"{Request.Url.GetLeftPart(UriPartial.Authority)}/assets/audio/{Path.GetFileNameWithoutExtension(dr["Name"].ToString())}.mp3" //in case you stored your file in your web server
              });
          }

          return Json(result, JsonRequestBehavior.AllowGet);
    }

3）在CSTHML页面中创建一个JavaScript函数，该函数将加载文件

//In this example I'm using local JS for JQuery and Bootstrap. But you can use the way you prefer (CDN or NPM for example)
<!-- SCRIPTS -->
<script src="~/assets/js/jquery-3.3.1.slim.min.js"></script>
<script src="~/assets/js/bootstrap.min.js"></script>
<script>

    $(document).ready(function () {
        loadFiles();
    });

    function loadFiles() {

        //here I'm referencing a DIV tag that uses the spinner.js has the following content:
        $("#spinner").show(); 

            //<div class="wrapper-loading" id="spinner" style="display:none;">
            //    <span class="spinner-double-section-far"></span>
            //</div>

        $.ajax({
            async: true,
            url: "GetFiles",
            cache: false,
            dataType: "json",
            success: function (data) {

                $("#spinner").hide(); //stop spinner

                if (data) {
                    $("#audioContainer").show();

                    data.Files.forEach(audio => {
                        var newAudio = '<label class="item">';
                        newAudio += '<span class="title"><i class="far fa-file-audio"></i>' + audio.Name + '</span>';
                        newAudio += '<audio controls><source src="' + audio.Url + '" type="audio/mp3"/>';
                        newAudio += '</audio></label>';
                        $("#audioContainer").append(newAudio); //JQuery command to insert new HTML into some Element
                    });
                }
            },
            error: function (error) {
                $("#spinner").hide(); //stop spinner
                alert(JSON.stringify(error));
            }
        });
    }
</script>

这就是我需要使用标准AUDIO HTML控件在页面中放入一些音频文件的标准，该控件具有嵌入式控件，如播放，暂停等。

祝您好运，希望对您有所帮助。