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

Time:01-08

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 >
           <input asp-for="Id" disabled  value="@item.Id" />
         </div>
       </td>
       <td>
         <div >
           <input asp-for="Code"  value="@item.Code" />
         </div>
       </td>
       <td>
         <div >
           <input asp-for="Name"  value="@item.Name" />
         </div>
       </td>
       <td>
         <div >
           <select asp-for="ParentId"  asp-items="@ViewBag.ParentList">
              <option value="0" disabled selected>Select...</option> 
           </select>
         </div>
         // ...PROBLEM IS IN THIS CELL...
       </td>
       <td>
         <div >
           <button type="submit" asp-action="Edit" >Edit</button>
         </div>
       </td>
     </tr>
   </form>
  }
   <form method="post">
     <tr>
       <td>
         <div >
           <input asp-for="Id" disabled />
         </div>
       </td>
       <td>
         <div >
           <input asp-for="Code"  />
         </div>
       </td>
       <td>
         <div >
           <input asp-for="Name"  />
         </div>
       </td>
       <td>
         <div >
           <select asp-for="ParentId"  asp-items="@ViewBag.ParentList">
              <option value="0" disabled selected>Select an item...</option>
           </select>
         </div>
       </td>
       <td>
         <div >
           <button type="submit" asp-action="Insert" >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?

CodePudding user response:

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"  name="ParentId" asp-items="@ViewBag.ParentList">
  <option value="0" disabled selected>Select an item...</option>
</select>
  • Related