Как вернуть выбранное значение из выпадающего списка Razor Page в переменную c#? - PullRequest
Новая
       27

Как вернуть выбранное значение из выпадающего списка Razor Page в переменную c#?

2 голосов
/ 12 февраля 2020

Я новичок в Razor Pages. Когда пользователь выбирает поле из выпадающего меню, я хочу вернуть это значение в переменную c#. Насколько я понимаю, это должно быть сделано с помощью вызова ajax, но я не могу заставить работать вызов ajax.

Я запутываюсь относительно того, каким должно быть поле ajax url. Также сбит с толку вопрос о том, нужен ли method="POST" typeof="submit" asp-page-handler="SelectedCalculation" или находится в нужном месте.

Index.cs html: 

@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.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>
</div>

Обработчик и Ajax call: 

(function ($) {
    $(document).ready(function () {
        $("#dropdownSelected").change(function () {
            var selectedCalculationType = $("#dropdownSelected option:selected").val();
            aj("Filter", "", selectedCalculationType);
        })();
    });
})(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.cs html .cs (где я хочу вернуть значение из ajax call): 

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

Ответы [ 2 ]

2 голосов
/ 12 февраля 2020

Я думаю, что вам не хватает 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);

            }
        });

Надеюсь, это поможет.

0 голосов
/ 13 февраля 2020

Я нашел лучший способ сделать это, используя привязку модели, и это не связано с jquery / ajax.

То, что я сделал, это обернул мой тег select в форму, чтобы при отправке значение размещалось в URL. Затем я создал свойство в модели с тем же именем, что и name="selectedCalculation" из формы. Затем все, что мне нужно было сделать, это извлечь значение в методе OnGet(), используя свойство SelectedCalculation.

Index.cs html: 

<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.cs html .cs: 

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

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