如何在选择时更改下拉列表

Question

我有一个由SQL Server填充的下拉列表，我使用带有剃刀的Visual Studio 2010，cshtml和MVC模式创建此项目。 我要尝试做的是，当有人从更改下拉列表中选择一个值时，它将使用该书的信息更新页面。

我需要以下三点帮助：

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();
    }

Answer 1

下拉列表不能使页面单独发回到您的控制器。 您需要执行以下两项操作之一：

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

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

选项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();
}