如何 return 从 Razor 页面下拉列表中选择的值到 c# 变量？

Question

我是 Razor Pages 的新手。当用户从下拉菜单中选择一个字段时，我想 return 该值到 c# 变量。我的理解是，这应该通过 ajax 调用来完成，但我无法让 ajax 调用工作。

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

Index.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（我想 return 来自 ajax 调用的值）：

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

Answer 1

我想你 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() 方法中的值

Index.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>

Index.cshtml.cs:

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

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

如何 return 从 Razor 页面下拉列表中选择的值到 c# 变量？

How to return the selected value from a Razor Page dropdown to a c# variable?

c#

ajax

razor

asp.net-core

razor-pages