Question

I work on razor asp.net core 6 . 我面临问题,我可以储存某些价值,某些选择案文在隐蔽的田地上消失。

因此,我需要创建两个隐藏的领域。

储存某些价值的首个隐蔽领域

第二版

我曾尝试过:

<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.选用 价值" />

但是,仍然有两种特性在页面模型中无效。

选用价值

SelectedOptionText

因此,如果是解决问题,请

Answer 1

In your PageModel, you need both SelectedOptionValue and SelectedOptionText properties in the page model with the [BindPoperty] attribute in order to get/pass value between the Razor page and page model.

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

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

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

    ...
}

For the JavaScript part, you are in the correct way which using the event listener to listen to the change event for the <select> element. And don t forget to bind the selected value (id) and text to the <input> element respectively. 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.id;
    console.log("Selected Text: " + selectedText);
    console.log("Selected ID: " + selectedId);

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

For the <input> elements, make sure that you need to set the name attribute the same as the properties you declared in the 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" />

参考:

友情链接