Is there a way to keep track of a select's value in a .cshtml page?

Question

So, I have a .cshtml page with a select box, based on the chosen option I want to conditionally render one div or another. Is there a way to do this only utilizing code within the .cshtml and not having to refer back to the controller or model?

<div class="text-center">
    <select id="Select">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
    
    </select>

    @if(someOptionFromTheSelect == 1)
    {
        <div>Render this Div</div>
    }
    else
    {
        <div>Render this one</div>
    }

</div>

Is there anyway to use the selected option in the conditional statement? I have tried JQuery but I cannot seem to find a way to make that accessible to the C# conditional statement.

"I cannot seem to find a way to make that accessible to the C# conditional statement."...that's because the C# executes on the server, when it's building the page initially, before sending to the browser. So by the time any jQuery has run, all the C# has already executed. All that's left is the HTML which was sent to the browser. If you want to show and hide the div in response to the user's selection, then forget about C# and just do the whole task using Javascript/jQuery — ADyson, Aug 31 '20 at 22:49
See this for more background: [What is the difference between client-side and server-side programming?](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) (a lot of the examples use PHP, but the concept is the same). — ADyson, Aug 31 '20 at 22:50

score 4 · Accepted Answer · answered Sep 01 '20 at 02:45

You can use if-else in the javascript.

You can refer to my demo:

View:

<div class="text-center">
    <select id="Select" onchange="show()">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>

    </select>
   
        <div id="id1">Render this Div</div>
        <div id="id2" style="display:none;">Render this one</div>
</div>

@section Scripts
{
    <script type="text/javascript">       
        function show() {           
            if ($("#Select :selected").val() == "1")
            {
                $("#id1").show();
                $("#id2").hide();
            }
            else {
                $("#id2").show();
                $("#id1").hide();
            }
        }
    </script>

}

result:

score 0 · Answer 2 · answered Aug 31 '20 at 22:50

0

This post should provide what you need. In short, you’re going to need some JavaScript or to post the info to your controller. You won’t be able to just reference it with Razor directly.

answered Aug 31 '20 at 22:50

reynoldsbj

329
1
8

Is there a way to keep track of a select's value in a .cshtml page?

2 Answers2