如何使用帶有JQuery、Ajax和MVC的SelectChange事件顯示PDF檔案

我正在使用選擇下拉串列從我的 ASP.Net MVC 專案中的檔案夾加載 pdf 檔案，該專案可以順利運行。我現在想要實作的是當用戶從下拉串列中單擊檔案并加載它時加載一個 pdf 檔案。我能夠檢索一些需要的資料，但不確定如何繼續使用 ajax 使其作業。任何指導將不勝感激。以下是我到目前為止所做的。

$(function () {
    $("#selectPdf").change(function () {

        var url = "Mechanical/Index";
        
        var fileid = $(this).find(":selected").val();
        var filename = $(this).find(":selected").text();

        
        $.ajax({
            url: url,

        Not sure how to proceed.    
        })
        

    });
});

<div class="pdfViewContainer">
    <div class="h3 card-header"><label id="pdfviewerlabel">Mechanical</label></div>
    <div id="pdfContainer" class="card-body">
        <div class="row mb-3">
            <div class="col-md-2">
                <form id="form" action="">
                    <select asp-for="FileId" asp-items="@Model.Files" id="selectPdf" class="form-control" datastyle="btn-warning">
                        <option disabled selected>-- Select File --</option>
                    </select>
                </form>
            </div>
        </div>
        <div id="pdf">
            <embed type="application/pdf" src="@Model.Path/@Model.Name" width="100%" height="1024px"/>
        </div>
    </div>
</div>

@section scripts {
    <script src="~/js/ShowPDF.js"></script>
}

namespace MyNamespace.Controllers
{
    public class MechanicalController : Controller
    {
        private readonly IWebHostEnvironment _webHostEnvironment;

        public MechanicalController(IWebHostEnvironment webHostEnvironment)
        {
            _webHostEnvironment = webHostEnvironment;
        }

        private string fileDirectory = SD.Mechanical_Path;

        public IActionResult Index()
        {
            
            string path = $"{_webHostEnvironment.WebRootPath}{fileDirectory}";
            int nId = 1;

            var userFile = new UserFile();
            userFile.Files = new List<SelectListItem>();

            foreach (string pdfPath in Directory.EnumerateFiles(path, "*.pdf"))
            {
                userFile.Files.Add(new SelectListItem
                {
                    Text = Path.GetFileName(pdfPath),
                    Value = nId.ToString()
                });

                nId  ;
            }

            int listCount = userFile.Files.Count - 1;
            userFile.Name = userFile.Files[listCount].Text;
            userFile.Path = fileDirectory.Replace('\\', '/');
            return View(userFile);
        }
    }   
}

@model MyNamespace.Models.UserFile

namespace MyNamespace.Models
{
    public class UserFile
    {
        public int FileId { get; set; }

        public string Name { get; set; }

        public string Path { get; set; }

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

uj5u.com熱心網友回復：

為了在ajax回發時渲染更新的html，您可以默認使用.html()in successfunction。你可以在這里看到一個簡單的例子。但是在您使用embed元素的場景中，它只能src通過 ajax 更新但不能顯示更新的 pdf。所以我建議使用window.location.replace它可以向后端發送新請求并更新pdf。

@model UserFile 
<div class="pdfViewContainer">
    <div class="h3 card-header"><label id="pdfviewerlabel">Mechanical</label></div>
    <div id="pdfContainer" class="card-body">
        <div class="row mb-3">
            <div class="col-md-2">
                <form id="form" action="">
                    <select asp-for="FileId" asp-items="@Model.Files" id="selectPdf" class="form-control" datastyle="btn-warning">
                        <option disabled selected>-- Select File --</option>
                    </select>
                </form>
            </div>
        </div>
        <div id="pdf">
            <embed type="application/pdf" src="@Model.Path/@Model.Name" width="100%" height="1024px"/>
        </div>
    </div>
</div>

@section scripts {
 <script>
    $(function () {
        $("#selectPdf").change(function () {

            var url = "/Mechanical/Index";     //remember add `/`
        
            var filename = $(this).find(":selected").text();
            window.location.replace(url "?filename=" filename);

           // $('#pdfViewContainer').load(url "?filename=" filename);
            //$.ajax({
            //    url: url "?filename=" filename,
            //    method:"GET",
            //    success:function(res){
            //        $("#pdfViewContainer").html(res);
            //    }
            //})             
        });
    });
</script>
}

控制器：

public IActionResult Index(string filename)
{

    string path = $"{_webHostEnvironment.WebRootPath}{fileDirectory}";
    int nId = 1;

    var userFile = new UserFile();
    userFile.Files = new List<SelectListItem>();

    foreach (string pdfPath in Directory.EnumerateFiles(path, "*.pdf"))
    {
        userFile.Files.Add(new SelectListItem
        {
            Text = Path.GetFileName(pdfPath),
            Value = nId.ToString(),
            Selected = filename== Path.GetFileName(pdfPath)?true : false    //better to modify here...
        });

        nId  ;
    }

    int listCount = userFile.Files.Count - 1;
    userFile.Name = userFile.Files[listCount].Text;
    userFile.Path = fileDirectory.Replace('\\', '/');
    if(filename != null)       
    {
        userFile.Name = filename;     //add here....
    } 
    return View(userFile);
}

標籤：jQuery 阿贾克斯 asp.net-core-mvc

上一篇：元素在隨機位置的出現擴大了頁面

下一篇：滑塊范圍在0和1之間，步長為0.05