javascriptc#htmlasp.net-corerazor-pages

ASP.NET Core Razor Pages: Dropdown selection cleared after form submission


The picture for demonstration for username not getting preselected after submission
Note: There is a dropdown which is not visible in the video due to unknown reason.

I have a Razor Page in ASP.NET Core where I have a dropdown list () populated with usernames. Upon selecting a username, the form is automatically submitted using JavaScript (onchange="this.form.submit()"). However, after the form submission, the selected username is cleared from the dropdown, which is not the intended behavior.

Razor Page (.cshtml):

 <div class="rollname">
     <label class="required">User Name :</label>
     <select id="selectedUser" name="selectedUser" class="form-control-1"
             asp-items='@(new SelectList(Model.Users, "Key", "Value",ViewData["SelectedUserId"]))'
             onchange="this.form.submit()">
         <option value="">--Select--</option>
     </select>


 </div>

Razor page (cshtml.cs)

public class PageNameModel : PageModel
{
    public Dictionary<long, string> Users { get; set; } // Replace with actual data type
    
    public void OnGet()
    {
        // Load users data and set default selected user ID
        ViewData["SelectedUserId"] = "123"; // Replace with your logic to get default selected user ID
    }

    public IActionResult OnPost(long selectedUser)
    {
        // Process form submission
        HttpContext.Session.SetString("selectedUserId", selectedUser.ToString());
        ViewData["SelectedUserId"] = selectedUser.ToString();
        return RedirectToPage();
    }
}

Above is the picture for demonstration for username not getting preselected after submission Note: There is a dropdown which is not visible in the video due to unknown reason.

How do I make sure that after selecting username dropdown value , it should not get cleared after Redirecting to same page . Is there a better approach towards this ?


Solution

  • Frontend.cshtml

     <select id="selectedCircleUser" name="selectedCircleUser" class="form-control-1"
             asp-items='@(new SelectList(Model.Users, "Key", "Value",ViewData["selectedCircleUser"]))'
             onchange="this.form.submit()">
         <option value=0>--Select--</option>
     </select>

    Used ViewData here to get the value and select it if it exists

    Backend.cshtml.cs file

      public void OnGet(long? selectedUserId = 0)
      {
    
          if (selectedUserId != null && selectedUserId != 0)
          {
              //string selectedUserId = HttpContext.Session.GetString("selectedCircleUserId");
              ViewData["selectedCircleUser"] = selectedUserId; // I
             //Code to get the available circle and assigned circle to that user
      }
    
      public IActionResult OnPost()
      {
          HttpContext.Session.SetString("selectedCircleUserId", selectedCircleUser.ToString());
          return RedirectToPage(new { selectedUserId = selectedCircleUser });
      }
    

    So whenever a page it revisited it the value is 0 then nothing will be displayed on the page . If the user has selected any particular username then through on post we have passed the parameter through which the assign circle and available circle will get fetched and also that username id will be stored in viewdata through which it gets pre selected in front end.