Search code examples
javascriptc#asp.net-coreselectselecteditem

How to set selected option of select input that is bound at run time in asp.net core?


I'm writing code with ASP.net core. I had a view that uses for both editing a model and Inserting on it. We have a table, that top rows are records of the model that can be edited and last row is a form for inserting a new record in the model. a sample code is shown below for more explanation.

HomeController.cs :

public IActionResult Insert()
{            
    ViewBag.ParentList= new SelectList(ShowParent(), "Id", "ParentCode");

    MyViewModel viewModel = new MyViewModel ()
    {
        MyList = ShowAllItem(),
    };

    return View(viewModel);
}
[HttpPost]
public IActionResult Insert(MyViewModel myViewModel)
{
...some code...
}
[HttpPost]
public IActionResult Edit(MyViewModel myViewModel)
{
...some code...
}

MyViewModel.cs

public class MyViewModel
{
  public int Id { get; set; }

  public string Code { get; set; }
   
  public string Name { get; set; }
  
  public int ParentId { get; set; }

  public List<MyModel> MyList { get; set; }

}

Insert.cshtml:

@model MyViewModel

<table>
  <thead>
     <tr>
       <th>Id</th>
       <th>Code</th>
       <th>Name</th>
       <th>Parent</th>
       <th>operation</th>
     </tr>
  </thead>
  <tbody>
  @foreach(var item in Model.MyList)
  {
   <form method="post">
     <tr>
       <td>
         <div class="form-group">
           <input asp-for="Id" disabled class="form-control" value="@item.Id" />
         </div>
       </td>
       <td>
         <div class="form-group">
           <input asp-for="Code" class="form-control" value="@item.Code" />
         </div>
       </td>
       <td>
         <div class="form-group">
           <input asp-for="Name" class="form-control" value="@item.Name" />
         </div>
       </td>
       <td>
         <div class="form-group">
           <select asp-for="ParentId" class="form-control" asp-items="@ViewBag.ParentList">
              <option value="0" disabled selected>Select...</option> 
           </select>
         </div>
         // ...PROBLEM IS IN THIS CELL...
       </td>
       <td>
         <div class="form-group">
           <button type="submit" asp-action="Edit" class="form-control">Edit</button>
         </div>
       </td>
     </tr>
   </form>
  }
   <form method="post">
     <tr>
       <td>
         <div class="form-group">
           <input asp-for="Id" disabled class="form-control"/>
         </div>
       </td>
       <td>
         <div class="form-group">
           <input asp-for="Code" class="form-control" />
         </div>
       </td>
       <td>
         <div class="form-group">
           <input asp-for="Name" class="form-control" />
         </div>
       </td>
       <td>
         <div class="form-group">
           <select asp-for="ParentId" class="form-control" asp-items="@ViewBag.ParentList">
              <option value="0" disabled selected>Select an item...</option>
           </select>
         </div>
       </td>
       <td>
         <div class="form-group">
           <button type="submit" asp-action="Insert" class="form-control">Insert</button>
         </div>
       </td>
     </tr>
   </form>
  </tbody>
</table>

The problem is specified in code. I want to in select input in edit form, selected option set through model (@item.ParentId) but I don't have any idea how do that. Cas I solve this problem or there is not any solution?


Solution

  • After many attemping and searching, I found solution. I just use "name" attribute instead asp-for. asp-for can specified selected option.

    select tag in Edit form should be defined like this:

    <select asp-for="@item.ParentId" class="form-control" name="ParentId" asp-items="@ViewBag.ParentList">
      <option value="0" disabled selected>Select an item...</option>
    </select>