如何在選擇時更改下拉列表

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