Как заполнить таблицу значениями из выпадающего списка в ASP.NET Core MVC

Question

Я хочу заполнить html-таблицу выбранным элементом из выпадающего списка, я уже передал данные базы данных в этот список, и я также получаю всю информацию о выбранном значении через результат действия, поэтому я хочу, чтобы когда явыберите элемент, поместите его в таблицу и делайте это каждый раз, когда я захочу, чтобы я мог добавлять различные значения одновременно.У кого-нибудь есть идеи, как это сделать?

Это моя модель

public partial class Producto
{
    public int Id { get; set; }
    public string Nombre { get; set; }
    public string Descripcion { get; set; }
    public string Precio { get; set; }

    [NotMapped]
    public List <Producto> Listasnom { get; set; }

    [NotMapped]
    public IEnumerable < SelectListItem > ProductoListItems  
        {  
            get  
            {  
                return new SelectList(Listasnom ?? new List<Producto>(), "Id", "Nombre"); 
            }  
        } 
}

Мой контроллер

MyDbContext db = new MyDbContext();

       [HttpGet] 
        public ActionResult Index()
        {
            return View(db.Pedido.ToList());
        }

        public ActionResult Create()
        {    
            var lista = new Producto();    
            lista.Listasnom = db.Producto.ToList();

            return View(lista);
        }  

        [HttpPost]
        public ActionResult Create(Producto producto)
        {    
            var lista = new Producto();     
            lista.Listasnom = db.Producto.ToList();

            var emp = lista.Listasnom.Where(e => e.Id == producto.Id).FirstOrDefault();

            lista.Id = emp.Id;
            lista.Nombre = emp.Nombre; 
            lista.Precio = emp.Precio;

            return View(lista);                
        } 

и мой взгляд:

@model punto.Models.Producto

<form class="form-horizontal" method="post" action="">
        <div class="box-body">

        <div class="form-group">
            <label for="inputEmail3" class="col-sm-1 control-label">Producto</label>
            <div class="col-sm-10">
                       @Html.DropDownListFor(model => model.Id, Model.ProductoListItems, "Elegir Producto", new { @class = "form-control"}) 
            </div>
            <button type="submit" class="btn btn-info">Agregar</button> 
        </div>
</form>

Это таблица, в которую я хочу поместить значения

<table id="example1" class="table table-bordered table-responsive">
            <thead>
            <tr> 
                <th>Id</th>                 
                <th>Producto</th>
                <th>Precio</th>
            </tr>
            </thead>
            <tbody>
                    <tr>
                        <td>@Html.DisplayFor(model => model.Id)</td>
                        <td>@Html.DisplayFor(model => model.Nombre)</td>
                        <td>@Html.DisplayFor(model => model.Precio) </td>
                    </tr> 
</table>

Я понятия не имею, как это сделать, если кто-то может мне помочь.

Answer 1

Если вы хотите выбрать больше продуктов и сохранить их в таблице, вы можете попробовать использовать ajax, как сказал Ньен:

Просмотр:

@model WebApplication2.Models.Producto
<div class="box-body">
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-1 control-label">Producto</label>
        <div class="col-sm-10">
            @Html.DropDownListFor(model => model.Id, Model.ProductoListItems, "Elegir Producto", new { @class = "form-control",id="selectlist" })
        </div>
        <button type="submit" id="btnCreate" class="btn btn-info">Agregar</button>
    </div>
</div>

<table id="example1" class="table table-bordered table-responsive">
  <thead>
    <tr>
        <th>Id</th>
        <th>Producto</th>
        <th>Precio</th>
    </tr>
  </thead>
  <tbody> </tbody>
</table>

@section Scripts
{
<script type="text/javascript">
    $("#selectlist").change(function () {
        var id = $("#selectlist").val()
        $.ajax({
            type: "get",
            url: "/products/getproduct?id=" + id,
            success: function (data) {
                var tBody = $("#example1 > TBODY")[0];
                var row = tBody.insertRow(-1);

                //Add ID cell.
                var cell = $(row.insertCell(0));
                cell.html(data.id);
                //Add Nombre cell.
                cell = $(row.insertCell(1));
                cell.html(data.nombre);
                //Add Precio cell.
                cell = $(row.insertCell(2));
                cell.html(data.precio);

            }
        });
    });
</script>
}

Контроллер:

 public IActionResult GetProduct(int id)
 {
        var selectProduct = db.Producto.Find(id);
        return Json(selectProduct);
 }