CODEWITHSUNDEEP
c#ajaxasp.net-corerazorrazor-pages
NickyLarson
NickyLarson

Reputation: 197

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

I am new to Razor Pages. When a user selects a field from the dropdown menu, I want to return that value to a c# variable. My understanding is that this should be done via ajax call, but I cannot get the ajax call to work.

I'm getting confused as to what the ajax url field should be. Also confused as to whether method="POST" typeof="submit" asp-page-handler="SelectedCalculation" is necessary or in the right place.

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>

Handler and Ajax call:

(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 (where I want to return the value from ajax call):

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

Upvotes: 2

Views: 2949

Answers (2)

NickyLarson
NickyLarson

Reputation: 197

I found a better way of doing this using model binding, and it doesn't involve jquery/ajax.

What I did was wrap my select tag in a form, so that on-submit the value is posted to the url. Then I created a property in the model with the same name as name="selectedCalculation" from the form. Then all I had to do was retrieve the value in the OnGet() method using the SelectedCalculation property.

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;
}

Upvotes: 0

Md Farid Uddin Kiron
Md Farid Uddin Kiron

Reputation: 22487

I think you are missing json parsing on data: JSON.stringify(YourParam), So I would suggest to submit request on following format.

 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);

            }
        });

Hope this would help.

Upvotes: 2

Related Questions