首页 > 解决方案 > Javascript 链接到 AspCore 操作

问题描述

我想将 Javascript 创建的字符串作为 aspcore 中的路由数据传递。该字符串是从 Javascript 数组中按如下方式创建的:

<body>
    FULL LIST: <span id="Inventory"></span>
</body>    
<script>
var FullString = LargeList.concat(SmallList);
    LenB = BoxList.length;
    FullString.push(LenB);

    document.getElementById("Inventory").innerHTML = FullString.join("/");
</script>

我在想我可以再次使用 Javascript 来创建链接,但这似乎不是正确的想法。

<body>
    <input type="button" onclick="AddToFiv()" value="Create A 5/I Remark" />
    <p id="FivRemarkLink"></p>
</body>
<script>
    function AddToFiv() {

    var FullString = LargeList.concat(SmallList);
    LenB = BoxList.length;
    FullString.push(LenB);

    var Inventory = FullString.join("/");

    var text = "<a asp-action="FivCreate" asp-route-zero="@ViewBag.zero" asp-route-code="I" asp-route-priority="5" asp-route-remark=" + Inventory + ">ADD 5/I</a>";

    document.getElementById("FivRemarkLink").value = text;
}
</script>

标签: javascriptc#asp.net-coremodel-view-controller

解决方案


首先js中无法识别asp-xxx,所以可以使用href,然后如果要添加 <a></a><p id="FivRemarkLink"></p>可以这样使用document.getElementById("FivRemarkLink").innerHTML = text;

这是一个带有假数据(ViewBag.zero="zero")的演示:

<input type="button" onclick="AddToFiv()" value="Create A 5/I Remark" />
<p id="FivRemarkLink"></p>
<script>

    //$(function () {

    //    const LargeList = ['a', 'b', 'c'];
    //    const SmallList = ['d', 'e', 'f'];
    //    const BoxList = ['g', 'h', 'i'];
    //    var FullString = LargeList.concat(SmallList);
    //    LenB = BoxList.length;
    //    FullString.push(LenB);

    //    document.getElementById("Inventory").innerHTML = FullString.join("/");
    //})
     function AddToFiv() {
         const LargeList = ['a', 'b', 'c'];
         const SmallList = ['d', 'e', 'f'];
         const BoxList = ['g', 'h', 'i'];
    var FullString = LargeList.concat(SmallList);
    LenB = BoxList.length;
    FullString.push(LenB);

    var Inventory = FullString.join("/");
         var text = "<a href='FivCreate?zero=@ViewBag.zero&code=I&priority=5&remark="+Inventory+"'>ADD 5/I</a>";
         document.getElementById("FivRemarkLink").innerHTML = text;
     }
    </script>

结果: 在此处输入图像描述


推荐阅读