无法通过 Razor 页面中的 javascript 从控件获取值

Question

我有一个 razor 页面，其中所有内容都显示正常，但我需要能够读取一些控制器内的值，以便将它们作为参数传递给预过滤某些数据的调用：

@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 代码中添加了一个调试器。

为什么我无法读取这些值？

编辑： 我已经看到其他处理这些问题的方法，例如数据绑定，但是如前所述 here，避免页面重新加载的唯一方法是 javascript 和 AJAX，所以我仍然需要得到这些来自 javascript.

的值

Answer 1

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

我更改了呈现 selectPicker 的方式，遵循显示的示例 in this page:

@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 评论的说明绑定数据，here

为此，您需要在 _Layout 中添加指定的引用（对于 bootstrap-select），您可以检查所有需要添加的内容 here

最后，您需要在 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>

无法通过 Razor 页面中的 javascript 从控件获取值

Can't obtain values from controls through javascript in razor page

javascript

razor-pages