选择时如何更改下拉列表

本文关键字：下拉列表 何更改 选择 | 更新日期: 2023-09-27 18:29:38

我有一个由sql服务器填充的dropdownlist，我使用Visual Studio 2010、cshtml和razor，并使用MVC模式来创建这个项目。我想做的是，当有人从change的下拉列表中选择一个值时，它会用该书的信息更新页面。

我需要以下三件事的帮助：

  1. 用户从下拉列表中选择一本书如何将"书名"返回到控制器
  2. 服务器（从服务器检索有关该书的信息）和
  3. 返回要显示的视图

我从下拉列表开始。

我的视图看起来像这个

BookName: @Html.DropDownList("BookName", ViewData["BookName"] as IEnumerable<SelectListItem>, new { id = "UserSelectedValue" })

我的控制器：

public ActionResult Index()
    {
       ViewData["BookName"] = new SelectList(_context.BookName.Select(a => a.Book_Name).Distinct());
                    return View();
    }

选择时如何更改下拉列表

下拉列表不能使页面自行返回到控制器。你需要做两件事之一：

  1. 添加一个提交按钮，以便用户更改下拉列表，然后单击按钮查看结果
  2. 使用javascript提交元素的更改事件的表单

无论哪种方式，您都需要将下拉/提交按钮包装在表格中。

选项1

<form>
    BookName: @Html.DropDownList("BookName", ViewData["BookName"] as  IEnumerable<SelectListItem>, new { id = "UserSelectedValue" })
    <input type="submit" value="Show results" />
</form>

选项2

<script type="text/javascript">
    // assuming you're using jQuery
    $(function() {
        $('#UserSelectedValue').change(function() {
            $(this).parent('form').submit();
        });
    });
</script>    
<form>
    BookName: @Html.DropDownList("BookName", ViewData["BookName"] as  IEnumerable<SelectListItem>, new { id = "UserSelectedValue" })
    <input type="submit" value="Show results" />
</form>

然后你的控制器代码会变成这样：

public ActionResult Index(string bookName)
{
   ViewData["BookName"] = new SelectList(_context.BookName.Select(a => a.Book_Name).Distinct());
   if (!string.IsNullOrWhiteSpace(bookName))
   {
       ViewData["Books"] = _context.BookName.Where(b => b.Book_Name == bookName).ToList();
   }
   return View();
}
相关文章：