Question

我正在尝试在ASP.NET MVC中执行下拉过滤器内容。我希望下拉菜单显示三个毕业状态（“毕业”，“及格”，“不及格”），并且当我选择一个时，它只会显示所选状态的学生！

以下是我现在所看到的屏幕截图：

Index page with dropdown

控制器：

ViewBag.GraduationStatus = new SelectList(db.Graduated_Students, "Graduated Status");

var graduates = db.Graduated_Students.Where(student => student.GraduationStatus != null);
return View(graduates.ToList());

查看：

@using (Html.BeginForm())
{
    <table>
        <tr>
            <th>
                @Html.DropDownList("GraduationStatus", null, htmlAttributes: new { @class = "form-control" })
            </th>
            <th>
                <input type="submit" value="Filter by graduation Status" />
            </th>
        </tr>
    </table>
}

型号：

namespace CodeboxxSchoolPortal
{
    using System;
    using System.ComponentModel.DataAnnotations;
    using System.Collections.Generic;

    public partial class Graduated_Students
    {
        public int ID { get; set; }
        public int CohortId { get; set; }
        public string GraduationStatus { get; set; }
        public string Name { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string ContractStatus { get; set; }
        public string DepositStatus { get; set; }
        public Nullable<int> PartnerId { get; set; }
        public string PartnerName { get; set; }


            public List<SelectListItem> GraduationStatusList = new List<SelectListItem>
            {
                 new SelectListItem { Value="Graduated", Text="Graduated" },
                 new SelectListItem { Value ="Pass", Text="Pass" },
                 new SelectListItem { Value ="Failed", Text="Failed" }
            };

        public class SelectListItem
        {
            public string Value { get; set; }
            public string Text { get; set; }
        }

    }
}

Answer 1

这是我认为你应该做的，

如果您在控制器中的Action为GetStudents，并且您的下拉列表中的值为字符串（毕业状态），请在过滤器按钮上单击，将其传递给控制器。

 [HttpPost]
 public ActionResult Documents(string? graduationStatus)
 {
     var graduates = db.Graduated_Students.Where(student => student.GraduationStatus == graduationStatus);
     return View(graduates.ToList());
 }

请注意，string? graduationStatus的类型必须与数据库中的student.GraduationStatus相同

还要确保Html.BeginForm()对控制器具有正确的操作

@Html.BeginForm("GetStudents", "Controller", FormMethod.Post, new { @class = "my_form"})

编辑：

将下面的行更改为

@Html.DropDownList("GraduationStatus", new SelectList(ViewBag.GraduationStatus, "Value Here", "Text Here", null), "- Select -", new { @class = "form-control"})

Answer 2

好的，所以我为您准备了一个示例工作应用程序，介绍如何实现所需的结果。请在以下位置找到应用程序的工作链接：https://dotnetfiddle.net/XmrW53

您的模型应如下所示：

using System;
using System.ComponentModel.DataAnnotations;
using System.Collections.Generic;
using System.Web.Mvc;

namespace SampleDropDownList
{
    public class Graduated_Students
    {
        public int ID { get; set; }
        public int CohortId { get; set; }
        public string GraduationStatus { get; set; }
        public string Name { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string ContractStatus { get; set; }
        public string DepositStatus { get; set; }
        public Nullable<int> PartnerId { get; set; }
        public string PartnerName { get; set; }
    }

    public class Graduated_StudentsList:Graduated_Students
    {
        public List<string> getGraduationStatusList  { get; set; }
        public MultiSelectList GraduationStatusList { get; set; }
        public Graduated_StudentsList()
        {
            this.GraduationStatusList = GetGraduationStatus(null);
        }

        public MultiSelectList GetGraduationStatus(string[] selectedValues)
        {
            List<SelectListItem> graduationstatus = new List<SelectListItem>()
            {
                new SelectListItem() { Value = "Graduated",Name="Graduated" },
                new SelectListItem() { Value = "Pass",Name="Pass" },
                new SelectListItem() { Value = "Fail",Name="Fail" },
            };

            return new MultiSelectList(graduationstatus, "Value", "Name", selectedValues);
        }
      }
        public class SelectListItem
        {
            public string Value { get; set; }
            public string Name { get; set; }
        }
}

您的控制器将如下所示：

using System;
using System.Web.Mvc;
using System.Collections.Generic;

namespace SampleDropDownList
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            return View(new Graduated_StudentsList());
        }


        [HttpPost]
        public JsonResult SendPostData(Graduated_StudentsList studentmodel)
        {               
            studentmodel.GraduationStatus = studentmodel.getGraduationStatusList[0];
            return Json(studentmodel.GraduationStatus);
        }
    }
}

最后，您的视图将如下所示：

@model SampleDropDownList.Graduated_StudentsList
@{
    Layout = null;
}

<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- CSS Includes -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">                  
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

        <style type="text/css">

            .field-validation-error {
                color: #ff0000;
            }

        </style>
    </head>

    <body>
        <div class="container">
            <div class="col-md-6 col-md-offset-3">


                @using (Html.BeginForm("SendPostData", "Home", FormMethod.Post))
                {
                    <div class="form-group">
                         @Html.DropDownListFor(m => m.getGraduationStatusList, Model.GraduationStatusList, "---select graduation status---", new { @class = "form-control"})
                    </div>

                    <button type="submit" class="btn btn-primary btn-lg">Process !</button>
                }

                <br/><br/>
                <div class="alert alert-warning fade">
                    <img src="//dl.dropboxusercontent.com/s/lq0mgxtxtc4uj1e/morph.jpg?dl=1&token_hash=AAGm5lEcLzicmV_-T4h6Hc_3iBvhKVerZlOjvGP_vjpoJQ" /><br/><br/>
                    <strong><span class="alert-content"></span></strong>
                </div>
            </div>
        </div>
    </body>
</html>

我已经使用MultiSelectList命名空间的System.Web.Mvc类来实现此目的。我希望这可以帮助您解决问题。

如何更改下拉菜单内容

2 个答案: