Question

当我在下拉列表中选择一个项目时，我希望我的表刷新相同ID的数据。正如您所看到的，我希望我的表1位于下拉列表中，而表2则需要表格式网格

因此，当我从表1 id 1中选择时，我的网格将刷新外键1上的数据，当我从表1 id 2中选择时，我的网格将刷新外键2上的数据等。

Answer 1

更新：这是一个相当普遍的问题，MVC的所有新开发人员都会遇到这个问题。我已经更新了我的答案，包括一个完整的工作示例，说明如何解决这个问题。我怀疑它将来会帮助其他新人。。

您需要使用一些JavaScript（JQuery）和控制器上的另一个操作来完成此操作，该操作将根据所选的ID返回相关项的列表，或者您可以让子操作返回带有选择列表数据的局部视图

您的第一个任务是将脚本中的事件连接到第一个下拉列表中的.change（）事件。

一旦捕获了 - 您可以将ID发布到其他操作并让它返回您的数据或部分视图。

解决方案

MVC中的级联下降是通过几种技术的组合来完成的。您需要视图模型来呈现下拉列表（选择列表），您将需要一些JavaScript代码来捕获客户端浏览器上的事件并获取其他数据。最后，您将使用部分视图返回到客户端。

在这个例子中 - 我们将创建一个包含3个父值的选择列表。当用户选择不同的值时，我们将请求与父值对应的新的第二个下拉列表。

我创建了简单的模型类

public class Catalog
{
    public int Id { get; set; }
    public string Name { get; set; }
    public DateTime CatalogDate { get; set; }
}

public class Book
{
    public int BookId { get; set; }
    public int CatalogId { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }

 }

public class CatalogViewModel
{
    public int SelectedCatalog { get; set; }

    public List<Catalog> Catalogs { get; set; }

}

public class BookViewModel
{
    public int SelectedBook { get; set; }
    public List<Book> Books { get; set; }
}

目录和书籍视图模型将在我们的Razor视图中使用DropDownListFor HTML帮助程序。 SelectedCatalog和SelectedBook属性保存实际选定的值 - 而Catalogs和Books属性用于加载选择列表。

在Home控制器的Index操作上 - 我修改了方法：

public ActionResult Index()
{

    CatalogViewModel model = new CatalogViewModel()
    {
        Catalogs = Catalogs(),
    };
    return View(model);
}

这里将返回CatalogViewModel中的目录列表。

我还添加了另一个我们将用于Ajax调用的操作：

public ActionResult Books(string catalogId)
{
    int catId = Convert.ToInt32(catalogId);
    var model = new BookViewModel()
    {
        Books = Books().Where(x => x.CatalogId == catId).ToList()
    };
    return PartialView("Partials/_BooksDropDownList", model);
}

此方法将接受用户指定的目录标识，并检索与目录标识对应的图书列表。然后将在局部视图中使用它并返回给调用者。

家庭控制器的索引视图：

  @model WebApplication1.Controllers.HomeController.CatalogViewModel

  @Html.DropDownListFor(m => m.SelectedCatalog, new SelectList(Model.Catalogs, "Id", "Name"))

  <div id="bookContainer"></div>

<script>

    $(document).ready(function () {
    $('#SelectedCatalog').change(function () {
        CatalogChanged();
    });
 });


function CatalogChanged() {
    var catalogId = $('#SelectedCatalog').val();

    $.get('@Url.Action("Books","Home")' + "?catalogId=" + catalogId,
        function (data) {
            $('#bookContainer').html(data);
        });
}

这里我们定义了模型，一个Html帮助器，它呈现我们的第一个下拉列表，一个空的包含div来保存第二个下拉列表和一些脚本。

该脚本只是捕获下拉列表的.change事件并调用CatalogChanged函数。在此函数中，我们获取下拉列表的值，并使用Url帮助程序发出get请求，以将url构建回Home / books操作。

以下是根据第一个下拉列表中的选定值动态加载的局部视图。

 @model WebApplication1.Controllers.HomeController.BookViewModel

 <div id="BookDropDown">

        @Html.DropDownListFor(x => Model.SelectedBook, new SelectList(Model.Books, "BookId", "Name"))

  </div>

那就是它。这是解决此类问题的一种相当常见的方法。还有其他方法（比如使用数据和从脚本生成html）。

我写了这篇文章是因为它可能是压倒性的开始，希望这将有助于其他人走出困境。

如何链接下拉列表和表数据以更改相同ID上所选项目的数据？

1 个答案: