时间戳

首页 > 解决方案 > 无法通过剃刀页面中的javascript从控件中获取值

javascript - 无法通过剃刀页面中的javascript从控件中获取值

问题描述

我有一个剃须刀页面，其中 evrything 显示正常，但我需要能够读取几个控制器中的值，以便在调用中将它们作为参数传递以预过滤一些数据：

@page
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@model MyApp.Pages.IndexModel
@{
    ViewData["Title"] = "MyApp";
}

<div class="col-12 border p-3 mt-3">
    <h3>Filters</h3>
    <div class="col-12">
        <select id="portMultiselect" name="lsPorts" asp-items="@Model.Ports" multiple></select>
        <input id="searchString" type="text" name="searchString">
    </div>
</div>
    @* A "REFRESHABLE" TABLE GOES HERE...*@

@section scripts{

    @* REFRESH SCRIPT *@
    <script type="text/javascript">
            $(function () {
                setInterval(loadTable, 60000);
                loadTable();
            });

        function loadTable() {
            var select1 = document.getElementById("portMultiselect");
            var selectedPorts = [];
            for (var i = 0; i < select1.options.length; i++) {
                if (select1.options[i].selected) selectedPorts.push(select1.options[i].value);
            }
            var searchString = document.getElementById('searchString').value;
            if (searchString != "" || selectedPorts.length != 0) {
                debugger;
            }
                fetch('/Index?handler=IndexPartial', {
                    data: {
                        searchString: searchString,
                        selectedPorts: selectedPorts
                    }
                })
                    .then((response) => {
                        return response.text();
                    })
                    .then((result) => {
                        document.getElementById('refreshable').innerHTML = result;
                    });
            }
        </script>
}

如您所见，我试图在我的多选和文本输入中捕获选定的值，以作为刷新脚本中的参数传递。

我正确地到达了预期的端点，但我从来没有得到任何值（它总是空的和零）我什至在我从未遇到过的 Javascript 代码中添加了一个调试器。

为什么我不能读取这些值？

编辑： 我见过其他处理这些的方法，例如数据绑定，但正如这里提到的，避免页面重新加载的唯一方法是 javascript 和 AJAX，所以我仍然需要从 javascript 中获取这些值。

标签： javascriptrazor-pages

解决方案

最后，我找到了解决我的困境的方法如下：

按照本页中显示的示例，我更改了呈现 selectPicker 的方式：

@page
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@model MyApp.Pages.IndexModel
@{
    ViewData["Title"] = "MyApp";
}

<div class="col-12 border p-3 mt-3">
    <h3>Filtros</h3>
    <div class="row">
        <div class="col-6">
            <p>Puertos</p>
            @Html.DropDownListFor(x =>
                x.selectPort,
                (IEnumerable<SelectListItem>)ViewData["MyPorts"],
                new
                {
                    @id = "portMultiselect",
                    @class = "form-control selectpicker",
                    @Value = @Model.Ports,
                    data_live_search = "true",
                    multiple = "multiple"
                })
        </div>
        <div class="col-6">
            <p>Nombre de variable</p>
            <input id="searchString" type="text" name="searchString">
        </div>
    </div>
</div>

这对您正在使用的模型进行了某些更改，您可以按照 T.Trassoudaine 评论的说明在此处绑定数据

为此，您需要在 _Layout 中添加指定的引用（用于引导选择），您可以在此处检查需要添加的所有内容

最后，您需要在 javascript 中使用 AJAX 来将参数传回：

<script type="text/javascript">
    $(function () {
        setInterval(loadTable, 1000);
        loadTable();
    });

    function loadTable() {
        var select1 = document.getElementById("portMultiselect");
        var selectedPorts = [];
        for (var i = 0; i < select1.options.length; i++) {
            if (select1.options[i].selected) selectedPorts.push(select1.options[i].value);
        }
        var searchString = document.getElementById('searchString').value.toUpperCase();
        var searchPorts = "";
        if (selectedPorts.length != 0) {
            searchPorts = selectedPorts.join(",");
        }
        $.ajax({
            url: '/?handler=IndexPartial',
            data: {
                searchString: searchString,
                searchPorts: searchPorts
            },
            success: function (data) {
                document.getElementById('refreshable').innerHTML = data;
            }
        })
    }
</script>

推荐阅读