How do I dynamically replace value in razor syntax based on selectedIndex in dropdown

Question

I have an CSHTML View that has a dropdownlist. In the OnChange event I'm calling reportchange(this) which calls my function reportchange.

How can I dynamically use the selectedIndex, this code doesn't work because the Razor code errors out with the following error:

Error CS0103 The name 'selectedindex' does not exist in the current context

@{ ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
    int selectedEmbedIndex = 0;
    }

<div class="topreport" id="dropdown">
    @Html.DropDownList("ReportSelect", @Model.EmbedReports[selectedEmbedIndex].DropDownList, new { @class = "form-control", @onchange = "reportchange(this)" })
</div>


<script>

    


    //Report Update Function
    function reportchange(selectElement) 
     {
         var selectedIndex = selectElement.selectedIndex;     
         //Set Services Title
         document.getElementById('reportname').innerHTML = "@Model.EmbedReports[selectedIndex].ReportTitle";
    }
</script>

Answer 1

the code:

"@Model.EmbedReports[selectedIndex].ReportTitle"

runs on the server when rendering the page. selectedIndex is a c# variable, which is probably undefined. you have two options. the reportchange function makes an ajax call to get the title, or render all the titles to an array:

var reportTiles = @Html.Raw(JsonSerializer.Serialize(Model.EmbedReports.Select(r => r.ReportTitle).ToList()));
document.getElementById('reportname').innerHTML = reportTiles[selectedIndex];

Answer 2

Hi @Bill,

You can try the following code:

<script>
    function reportchange(selectElement)
    {
        var selectedIndex = selectElement.selectedIndex;
       // alert(selectedIndex);
        var reportTiles = @Html.Raw(Json.Encode(Model.EmbedReports));
        var reportTile = reportTiles[selectedIndex].ReportTiles;
       // alert(reportTile);
        document.getElementById('reportname').innerHTML = reportTile;
    }
</script>

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 3

The selected option is selectElement.value. Keep in mind that JavaScript runs in the browser after Razor populated the HTML while running on the server.

<div>
    <select id="ReportSelect" name="ReportSelect" onchange="reportchange(this)">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</div>

@section Scripts {
    <script>
        function reportchange(selectElement) {
            console.log(selectElement.value);
       }
    </script>
}

Answer 4

Both Lan and Bruce gave answers that lead me to the ultimate solution. I did end up writing javascript to read the model into an array of titles...and then checked the selected index and retrieve that title from the array of titles. Thanks all for your input.