Getting selected value from dropdownlistfor

Question

I want to draw a circle with different state image depending on my selected value from the dropdownforlist.

How can I access the value in my razor page?

Here is my code

        <div class="form-group">
            @Html.LabelFor(model => model.CustomerNeed.NeedState, htmlAttributes: new { @class = "form-group" })
            <div class="form-group">
                @Html.DropDownListFor(model => model.CustomerNeed.NeedState, new List<SelectListItem>
                {
                    new SelectListItem {Text = "Bedarf erfasst", Value = "Need specified", Selected = true },
                    new SelectListItem {Text = "Qualifikation", Value = "Qualification"},
                    new SelectListItem {Text = "Talent Zuweisung", Value = "Talent assignment" },
                    new SelectListItem {Text = "Am Offerieren", Value = "Quotation" },
                    new SelectListItem {Text = "Auftrag bestätigt", Value = "Order Confirmed" },
                    new SelectListItem {Text = "Wird ausgeführt", Value = "In Action" },
                    new SelectListItem {Text = "Abgeschlossen", Value = "Finished" },
                }, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.CustomerNeed.NeedState, "", new { @class = "text-danger" })

                @{

                    if  (x == "Need specified")
                    {
                        <div class="finished">
                            <div class="imgcircleSeleted">
                                <img src="/images/Finished.png" alt="finished">
                            </div>
                            <label>@Localizer["Demand fulfilled"]</label>
                        </div>


                    }
                    else
                    {
                        <div class="signed">
                            <div class="imgcircleSelected">
                                <img src="/images/Signed.PNG" alt="customer signed contract">
                            </div>
                            <span class="line"></span>
                            <label>@Localizer["Contract signed"]</label>
                        </div>
                        
                    }
                }


            </div>
        </div>

Thank you for helping

Answer 1

Firstly,you cannot get the value of drop down list dynamically with @{if (x == "Need specified")},x in the code will be rendered with the default selected value of drop down list,and it will not be changed even though the selected value changes.So You can try to use js to get the value.and set the div to hidden or shown. Here is a demo:

View:

<div class="form-group">
    @Html.LabelFor(model => model.CustomerNeed.NeedState, htmlAttributes: new { @class = "form-group" })
    <div class="form-group">
        @Html.DropDownListFor(model => model.CustomerNeed.NeedState, new List<SelectListItem>
        {
            new SelectListItem {Text = "Bedarf erfasst", Value = "Need specified", Selected = true },
            new SelectListItem {Text = "Qualifikation", Value = "Qualification"},
            new SelectListItem {Text = "Talent Zuweisung", Value = "Talent assignment" },
            new SelectListItem {Text = "Am Offerieren", Value = "Quotation" },
            new SelectListItem {Text = "Auftrag bestätigt", Value = "Order Confirmed" },
            new SelectListItem {Text = "Wird ausgeführt", Value = "In Action" },
            new SelectListItem {Text = "Abgeschlossen", Value = "Finished" },
        }, new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.CustomerNeed.NeedState, "", new { @class = "text-danger" })

        <div class="finished" id="finished">
            <div class="imgcircleSeleted">
                <img src="/images/Finished.png" alt="finished">
            </div>
            <label>@Localizer["Demand fulfilled"]</label>
        </div>
        <div class="signed" id="signed" hidden>
            <div class="imgcircleSelected">
                <img src="/images/Signed.PNG" alt="customer signed contract">
            </div>
            <span class="line"></span>
            <label>@Localizer["Contract signed"]</label>
        </div>
    </div>
</div>

js:

<script>
    $("#CustomerNeed_NeedState").change(function () {
        if ($(this).val() == "Need specified") {
            $("#finished").removeAttr("hidden");
            $("#signed").attr("hidden", "hidden");
        } else {
            $("#signed").removeAttr("hidden");
            $("#finished").attr("hidden", "hidden");
        }
    })
</script>

result: