javascript - 基于下拉列表和按钮单击的 MVC 5 Ajax 刷新

Question

下面是我之前在网上找到的代码。它根据链接点击刷新表单部分。我想将其更改为在 DropDownList 中有链接。然后根据它的选择和按钮单击我想执行与链接单击相同的操作。

我很难搞清楚如何读取下拉列表中的选定值。我试着在这里搜索 SO，但没有找到任何简单的例子。看起来他们中的大多数都是基于 javascript 的。我希望一定有一些不使用 javascript 的简单解决方案。

Controller

namespace WebApplication2.Controllers
{
    public class HomeController : Controller {
        DBEntities db = new DBEntities();
        // GET: /AllUsers/
        public ActionResult Index()
        {
            return View();
        }
        // Return all students
        public PartialViewResult All()
        {
            List<AspNetUser> model = db.AspNetUsers.ToList();
            return PartialView("_Users", model);
        }
        // Return Top3 students
        public PartialViewResult Top3()
        {
            List<AspNetUser> model = db.AspNetUsers.OrderByDescending(x => x.UserName).Take(3).ToList();
            return PartialView("_Users", model);
        }
    }
}

局部 View

@model IEnumerable<WebApplication2.Models.AspNetUser>
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Email)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.PhoneNumber)
            </th>
            <th></th>
        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Email)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.PhoneNumber)
                </td>
            </tr>
        }
    </table>

查看

@{
    ViewBag.Title = "Home Page";
} 
<div style="font-family:Arial">
    <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
    <h2>Students</h2>
    @Ajax.ActionLink("All", "All",
    new AjaxOptions
    {
        HttpMethod = "GET",  UpdateTargetId = "divStudents", InsertionMode = InsertionMode.Replace 

    })
    <span style="color:Blue">|</span>
    @Ajax.ActionLink("Top 3", "Top3",
    new AjaxOptions
    {
        HttpMethod = "GET",   UpdateTargetId = "divStudents",   InsertionMode = InsertionMode.Replace  
    } )
    <br /><br />
    <div id="divStudents"  style="height: 600px; overflow: auto;"></div>
</div>

Answer 1

您需要将 Ajax.ActionLink() 替换为包含下拉列表的单个 Ajax.BeginForm()

@model StudentSearchVM
<h2>Students</h2>
@using (Ajax.BeginForm("Filter", new AjaxOptions { HttpMethod = "GET",  UpdateTargetId = "divStudents", InsertionMode = InsertionMode.Replace }))
{
  @Html.DropDownListFor(m => m.Filter, Model.FilterList)
  <input type="submit" value="Search" />
}
<div id="divStudents"  style="height: 600px; overflow: auto;"></div>

注意上面假设你有以下 View 模型

public class StudentSearchVM
{
  public string Filter { get; set; }
  public SelectList FilterList { get; set; }
}

在生成这个 View 的 GET 方法中

StudentSearchVM model = new StudentSearchVM
{
  FilterList = new SelectList(new List<string>(){ "All", "Top 3" })
}
return View(model);

那么你会有一个 Controller 方法

public ActionResult Filter(string filter)
{
  if (filter == "All")
  {
    List<AspNetUser> model = db.AspNetUsers.ToList();
    return PartialView("_Users", model);
  }
  else
  {
    ....
  }
}