Как изменить данные из таблицы в зависимости от выбранного значения выпадающего списка

Question

Я использую ADO.NET и хочу узнать, как я могу изменить данные из таблицы в зависимости от значения моего выпадающего списка. Вот мой взгляд

@model IEnumerable<MVCcrud01.repuesto>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@Html.DropDownList("Modelos", ViewBag.datos as SelectList, "Seleccione un modelo...")

<p>
    @Html.ActionLink("Create New", "Create")    
</p>
<table class="table" id="grid">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.nombre)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.precio)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.descuento)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.modelo.modelo1)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.nombre)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.precio)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.descuento)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.modelo.modelo1)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.id_rep }) |
                @Html.ActionLink("Details", "Details", new { id = item.id_rep }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.id_rep })
            </td>
        </tr>
    }
</table>

А вот и мой контроллер:

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using MVCcrud01;

namespace MVCcrud01.Controllers
{
    public class repuestoesController : Controller
    {
        private autosEntities db = new autosEntities();

        // GET: repuestoes
        public ActionResult Index()
        {
            var repuestos = db.repuestos.Include(r => r.modelo);
            ViewBag.datos = new SelectList(db.modelos, "id_modelos", "modelo1");

            return View(repuestos.ToList());
        }

        // GET: repuestoes/Details/5
        public ActionResult Details(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }

            repuesto repuesto = db.repuestos.Find(id);

            if (repuesto == null)
            {
                return HttpNotFound();
            }

            return View(repuesto);
        }

        // GET: repuestoes/Create
        public ActionResult Create()
        {
            ViewBag.id_modelos = new SelectList(db.modelos, "id_modelos", "modelo1");
            return View();
        }

        // POST: repuestoes/Create
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        // more details see https://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create([Bind(Include = "id_rep,nombre,precio,descuento,id_modelos")] repuesto repuesto)
        {
            if (ModelState.IsValid)
            {
                db.repuestos.Add(repuesto);
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            ViewBag.id_modelos = new SelectList(db.modelos, "id_modelos", "modelo1", repuesto.id_modelos);
            return View(repuesto);
        }

        // GET: repuestoes/Edit/5
        public ActionResult Edit(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }

            repuesto repuesto = db.repuestos.Find(id);

            if (repuesto == null)
            {
                return HttpNotFound();
            }

            ViewBag.id_modelos = new SelectList(db.modelos, "id_modelos", "modelo1", repuesto.id_modelos);
            return View(repuesto);
        }

        // POST: repuestoes/Edit/5
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        // more details see https://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit([Bind(Include = "id_rep,nombre,precio,descuento,id_modelos")] repuesto repuesto)
        {
            if (ModelState.IsValid)
            {
                db.Entry(repuesto).State = EntityState.Modified;
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            ViewBag.id_modelos = new SelectList(db.modelos, "id_modelos", "modelo1", repuesto.id_modelos);
            return View(repuesto);
        }

        // GET: repuestoes/Delete/5
        public ActionResult Delete(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }

            repuesto repuesto = db.repuestos.Find(id);

            if (repuesto == null)
            {
                return HttpNotFound();
            }

            return View(repuesto);
        }

        // POST: repuestoes/Delete/5
        [HttpPost, ActionName("Delete")]
        [ValidateAntiForgeryToken]
        public ActionResult DeleteConfirmed(int id)
        {
            repuesto repuesto = db.repuestos.Find(id);
            db.repuestos.Remove(repuesto);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }
    }
}

У меня есть данные по умолчанию, загружаемые из базы данных, и я хочу, чтобы они были динамическими в зависимости от выбранного значения в раскрывающемся списке. Я буду благодарен вам, ребята!

Answer 1

Возможно, вы хотите использовать обратный вызов AJAX, который возвращает строки таблицы следующим образом:

$('#Modelos').change(function () {
    var selected = $(this).val(); // get selected value from dropdown

    var targetUrl = '@Url.Action("GetResults", "ControllerName")';
    var param = { id: selected };

    $.ajax({
        url: targetUrl,
        type: 'GET',
        data: param,
        dataType: 'json',
        success: function (response) {
            var row = '';

            // this part depends on JSON structure, here is just an example
            $.each(response, function(i, value) {
                row += '<tr><td>' + [...] + '</td></tr>'; // build table rows with each column values
            }

            // use append() to add new rows, or html() to replace existing rows
            $('#grid tbody').html(row);
        }
    });
});

Примечание: Добавление тега <tbody> рекомендуется, чтобы отличать раздел содержимого от заголовков таблицы, чтобы раздел содержимого мог динамически обновляться из ответа AJAX.

Также не забудьте создать метод действия, возвращающий JsonResult с тем же именем, как упомянуто в помощнике @Url.Action() выше:

public JsonResult GetResults(int id)
{
    // example query from table
    var list = db.repuestos.Where(x => x.nombre == id).Select(x => new {
        nombre = x.nombre,
        precio = x.precio,
        descuento = x.descuento,
        // other properties here
    }).ToList();

    // return JSON data
    return Json(list, JsonRequestBehavior.AllowGet);
}