jquery 如何在ASP.NET Core中使用Razor页面将选定的值ID和选定的文本存储在两个隐藏字段上？

2exbekwf 于 2023-08-04 发布在 jQuery

关注(0)|答案(1)|浏览(97)

我在ASP.NET Core 6中使用Razor页面。我面临的问题，我不能存储选定的值ID和选定的文本的选择选项下拉隐藏字段。
我需要创建两个隐藏字段：

存储选定值id的第一个隐藏字段
秒用于存储选定文本

我尝试过的：

<div class="col-md-3 col-lg-2">
    <label for="printerserver-selectlbl" style="margin-left:3px;font-size:15px;font-family: 'Open Sans', sans-serif;font-weight: bold;">Print Location</label>

    <select id="PrinterName-select" asp-for="SelectedPrinterId" name="selectprinterid" class="form-select" style="margin-left:3px;font-size:15px;font-family: 'Open Sans' , sans-serif;font-weight: bold;">
        <option value="0">--Select--</option>
        @foreach (var printer in Model.PrinterList)
        {
            <option value="@printer.UserPC">@printer.PrinterName</option>
        }
    </select>
</div>

public class LabelPrintingModel : PageModel
{
    [BindProperty]
    public List<LabelPrinitingView> PrinterList { get; set; }

    public async void OnGet()
    {
        PrinterList = dtprinters.AsEnumerable()
            .Select(row => new LabelPrinitingView
                           {
                               // Map the values from the DataRow  to the properties of the PrintServer object
                               UserPC = (string)row["UserPC"],
                               PrinterName = row["PrinterName"].ToString()
                               // etc.
                           })
            .ToList();
    }

    public class LabelPrinitingView
    {
        public string UserPC { get; set; }
        public string PrinterName { get; set; }
    }
}

字符串
我尝试做的是：

var selectElement = document.getElementById("PrinterName-select");

selectElement.addEventListener("change", function () {
            var selectedOption = selectElement.options[selectElement.selectedIndex];
            var selectedText = selectedOption.text;
            var selectedId = selectedOption.id;
            console.log("Selected Text: " + selectedText);
            console.log("Selected ID: " + selectedId);

<input type="hidden" id="selected-option-text" name="selected-option-text" value="@Model.SelectedOptionText" />
<input type="hidden" id="selected-option-value" name="selected-option-value" value="@Model.SelectedOptionValue" />

型
但在页面模型中仍有两个属性为空。

SelectedOptionValue
SelectedOptionText

型
请问我需要做什么来解决这个问题？

jquery

来源：https://stackoverflow.com/questions/76649559/how-to-store-selected-value-id-and-selected-text-on-two-hidden-field-using-razor

1条答案

按热度按时间

jqjz2hbq1#

1.在PageModel中，您需要在页面模型中使用[BindPoperty]属性的SelectedOptionValue和SelectedOptionText属性，以便在Razor页面和页面模型之间获取/传递值。

public class LabelPrintingModel : PageModel
{
    [BindProperty]
    public List<LabelPrinitingView> PrinterList { get; set; }

    [BindProperty]
    public string SelectedOptionValue { get; set; }

    [BindProperty]
    public string SelectedOptionText { get; set; }

    ...
}

字符串
1.对于JavaScript部分，您使用事件侦听器来侦听<select>元素的更改事件是正确的。不要忘记将所选的值（id）和文本分别绑定到<input>元素。JS Demo @ StackBlitz

var selectElement = document.getElementById("PrinterName-select");
selectElement.addEventListener("change", function () {
    var selectedOption = selectElement.options[selectElement.selectedIndex];
    var selectedText = selectedOption.text;
    var selectedId = selectedOption.value;
    console.log("Selected Text: " + selectedText);
    console.log("Selected ID: " + selectedId);

    document.getElementById("selected-option-text").value = selectedText;
    document.getElementById("selected-option-value").value = selectedId;
});

型
1.对于<input>元素，确保您需要将name属性设置为与在Page Model中声明的属性相同。

<input type="hidden" id="selected-option-text" name="SelectedOptionText" value="@Model.SelectedOptionText" />
<input type="hidden" id="selected-option-value" name="SelectedOptionValue" value="@Model.SelectedOptionValue" />

型
参考：利用模型绑定|在Razor Pages中使用表单

赞(0）回复(0）举报 2023-08-04

我来回答

jquery 如何在ASP.NET Core中使用Razor页面将选定的值ID和选定的文本存储在两个隐藏字段上？

1条答案

相关问题

热门标签

最新问答