Javascript 基于dropdownlist和按钮单击的MVC5Ajax刷新

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

我很难弄清楚如何读取dropdownlist的选定值。我试着在这里搜索，但没有找到任何简单的例子。看起来大部分都是基于javascript的。我希望一定有一些不使用javascript的简单解决方案

控制器

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

命名空间WebApplication2.控制器
{
公共类HomeController:控制器{
DBEntities db=新的DBEntities（）；
//吸引顾客/
公共行动结果索引（）
{
返回视图（）；
}
//归还所有学生
公共部分结果全部（）
{
列表模型=db.AspNetUsers.ToList（）；
返回PartialView（“用户”，模型）；
}
//返回前三名学生
公共PartialViewResult Top3（）
{
List model=db.AspNetUsers.OrderByDescending（x=>x.UserName）.Take（3.ToList（）；
返回PartialView（“用户”，模型）；
}
}
}

局部视图

@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>

@model IEnumerable
@DisplayNameFor（model=>model.Email）
@DisplayNameFor（model=>model.PhoneNumber）
@foreach（模型中的var项目）
{
@DisplayFor（modelItem=>item.Email）
@DisplayFor（modelItem=>item.PhoneNumber）
}

查看

@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>

@{
ViewBag.Title=“主页”；
} 
学生
@ActionLink（“全部”、“全部”，
新选择
{
HttpMethod=“GET”，UpdateTargetId=“divStudents”，InsertionMode=InsertionMode.Replace
})
|
@ActionLink（“前三名”、“前三名”，
新选择
{
HttpMethod=“GET”，UpdateTargetId=“divStudents”，InsertionMode=InsertionMode.Replace
} )

您需要将您的

Ajax.ActionLink（）

替换为一个包含dropdownlist的

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>

在生成此视图的GET方法中

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

StudentSearchVM模型=新建StudentSearchVM
{
FilterList=new SelectList（new List（）{“All”，“Top 3”}）
}
返回视图（模型）；

然后您将有一个单一的控制器方法

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

公共操作结果筛选器（字符串筛选器）
{
如果（过滤器=“全部”）
{
列表模型=db.AspNetUsers.ToList（）；
返回PartialView（“用户”，模型）；
}
其他的
{
....
}
}

您的下拉列表在哪里？如果要将所选值发送回控制器，请将其放入并

Ajax.BeginForm（）

使用

FormMethod.Get

，而不是操作link@StephenMuecke谢谢你的回复。我没有放下拉列表，因为我不知道如何使用它。如果您可以修改我的示例并演示如何使用Ajax.BeginForm（），那么它将非常有用。我也在网上找。谢谢。下拉菜单的目的是显示say“All”和“Top 3”吗？您有一个按钮可以发回一个控制器方法，并根据所选值返回结果？@StephenMuecke是的，您是对的。谢谢@StephenMuecke。这对我有用。我还硬编码了DropdownList，以避免对模型进行任何更改，它仍然有效。非常感谢。我注意到如果我在Html.BeginForm（“Index”，“Students”）中使用Ajax.BeginForm，那么它就不起作用了。任何提示。你不能有嵌套表单。这是无效的html，任何浏览器都不支持。你为什么想要这个？哦，对不起，我只是在学习这些。这对我来说是新鲜事。我确实读过你提到的关于嵌套表单的内容，并删除了Html.BeginForm。在开始研究Ajax之前，我有Html.BeginForm。所以这一切都有点让人困惑。我来自windows桌面开发世界：）