如何將 Razor 頁面下拉列表中的選定值返回到 ac# 變量？

Question

我是 Razor Pages 的新手。 當用戶從下拉菜單中選擇一個字段時，我想將該值返回給 ac# 變量。 我的理解是這應該通過 ajax 調用來完成，但我無法讓 ajax 調用起作用。

我對 ajax url 字段應該是什么感到困惑。 也對method="POST" typeof="submit" asp-page-handler="SelectedCalculation"是否必要或在正確的位置感到困惑。

索引.cshtml：

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="dropdown text-center" style="position: center">
    <select method="POST" typeof="submit" asp-page-handler="SelectedCalculation" id="dropdownSelected" name="SelectedCalculation">
        <option style="display:none" value="value">Select a calculation type</option>
        <option style="display:@Model.OptionTwoVisible; font-weight: bold;" value="OptionOne"> OptionOne </option>
        <option style="display:@Model.UkOptionTwoVisible; font-weight: bold;" value=" OptionTwo ">OptionTwo</option>
        <option style="display:@Model.OptionThreeVisible; font-weight: bold;" value="OptionThree"> OptionThree</option>
    </select>
</div>

處理程序和 Ajax 調用：

(function ($) {
    $(document).ready(function () {
        $("#dropdownSelected").change(function () {
            var selectedType= $("#dropdownSelected option:selected").val();
            aj("Filter", "", selectedType);
        })();
    });
})(jQuery)

function aj(pageName, retFunc, args, failedCallBack) {
    var retval;
    retval = $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: $(this).attr("formaction"),
        data: args,
        processData: false,
        dataType: "json",
        success: retFunc,
        error: function (a, b, c) {
            failedCallBack(a, b, c);
        }
    });
}

Filter.cshtml.cs（我想從 ajax 調用中返回值）：

public ActionResult OnPostSelectedCalculation(string data)
        {
            var t = new JsonResult(data);
            return new JsonResult(data);
        }

Answer 1

我認為您缺少對data: JSON.stringify(YourParam), json parsing data: JSON.stringify(YourParam),因此我建議按以下格式提交請求。

 var args = {
            key_1: "Value_1",
            key_2: "Value_2"
        }

  $.ajax({
            type: "POST",
            url: $(this).attr("formaction"),
            data: JSON.stringify(args),
            dataType: "json",
            contentType: "application/json",
            success: function (data) {
                console.log(data);

            }
        });

希望這會有所幫助。

Answer 2

我找到了一種使用模型綁定的更好方法，它不涉及 jquery/ajax。

我所做的是將我的 select 標簽包裝在一個表單中，以便在提交時將值發布到 url。 然后我在模型中創建了一個與表單中的name="selectedCalculation"同名的屬性。 然后我所要做的就是使用SelectedCalculation屬性檢索OnGet()方法中的值。

索引.cshtml：

<form method="GET">
        <select onchange="this.form.submit()" name="SelectedCalculation">
            <option style="display:none" value="value">Select a calculation type</option>
            <option style="display:@Model.PmsVisible; font-weight: bold;" value="PMS">PMS</option>
            <option style="display:@Model.UkpmsVisible; font-weight: bold;" value="UKPMS">UKPMS</option>
            <option style="display:@Model.RciVisible; font-weight: bold;" value="RCI">RCI</option>
        </select>
    </form>

索引.cshtml.cs：

[BindProperty(SupportsGet = true)]
public string SelectedCalculation { get; set; }

public void OnGet()
{
   var CalculationType = SelectedCalculation;
}