在 Razor 视图中使用 Jquery答案

【问题标题】：Using Jquery in Razor View在 Razor 视图中使用 Jquery
【发布时间】：2019-05-14 00:59:49
【问题描述】：

我遇到了需要在 Razor 视图中插入 jquery 变量的问题。例如我有以下代码：

$(document).ready(function () {
        var options = {
            pages: @Html.Raw(Json.Encode(ViewBag.Array)) ,
            singlePageMode: true
        };
        $("#pdfbox").flipBook(options);
    })

给出输出：

$(document).ready(function () {
        var options = {
            pages: ["http://localhost:651684/Document/GetPage?PageID=71184505-1.png","http://localhost:65184/Document/GetPage?PageID=71184505-2.png"] ,
            singlePageMode: true
        };
        $("#pdfbox").flipBook(options);
    })

要使其正常工作，我必须在页面数组中添加“{src:}”，如下所示：

pages:[
{src:"http://localhost:651684/Document/GetPage?PageID=71184505-1.png"},        
{src:"http://localhost:651684/Document/GetPage?PageID=71184505-1.png"}
]

但我似乎无法做到这一点。有没有办法在@Html.Raw(Json.Encode(ViewBag.Array)) 中插入 jquery。请需要帮助。

谢谢。

【问题讨论】：

标签： jquery .net visual-studio razor-pages

【解决方案1】：

使用Array#map()返回需要的对象数组

    var options = {
        pages: @Html.Raw(Json.Encode(ViewBag.Array)) ,
        singlePageMode: true
    };

    options.pages = options.pages.map(function(url){
       return { src: url };
    });

    $("#pdfbox").flipBook(options);

【讨论】：

【解决方案2】：

这是一个单行解决方案

$(document).ready(function () {
    var options = {
        pages: @Html.Raw(Json.Encode(ViewBag.Array) + ".map((u)=>{return {src: u };})") ,
        singlePageMode: true
    };
    $("#pdfbox").flipBook(options);
})

变成了

$(document).ready(function () {
    var options = {
        pages: ["http://www.google.com","http://www.stackoverflow.com"].map((u)=>{return {src: u };}) ,
        singlePageMode: true
    };
    $("#pdfbox").flipBook(options);
})

【讨论】：