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

Bill 20 Reputation points
2023-03-29T13:33:39.8466667+00:00

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>
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,313 questions
0 comments No comments
{count} votes

Accepted answer
  1. Bruce (SqlWork.com) 57,891 Reputation points
    2023-03-29T19:41:05.4866667+00:00

    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];
    
    
    1 person found this answer helpful.

3 additional answers

Sort by: Most helpful
  1. Lan Huang-MSFT 26,516 Reputation points Microsoft Vendor
    2023-03-30T05:33:03.91+00:00

    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.

    1 person found this answer helpful.
    0 comments No comments

  2. AgaveJoe 26,166 Reputation points
    2023-03-29T17:54:15.4233333+00:00

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

  3. Bill 20 Reputation points
    2023-03-30T20:39:08.93+00:00

    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.

    0 comments No comments