ASP核心Razor页面，带下拉列表的可变视袋过滤器内容

问题描述

我有三个下拉列表，我用viewBag变量的内容填充它们。当我使用JQuery或Java脚本选择第一个变量的值时，我希望过滤第二个变量的内容。第三个下拉列表也是如此，它将根据第二个下拉列表中选择的内容进行筛选。

 <script type="text/javascript">

        function SelectedIndexChanged(accion, idnum) {
            var nuevaSelProyecto = "";
            var proyecto = "";
            var nombre = "";
            switch (idnum) {
                case "ddlSelContrato": {
                    //var getValue = document.getElementById('ddlSelContrato').selectedOptions[0].value;
                    var e = document.getElementById("ddlSelContrato");
                    var getValue = e.options[e.selectedIndex].value;
                    nombre = "Contrato, indice seleccionado: " + getValue;
                };
                    break;
                case "ddlSelProyecto":
                    nombre = "Proyecto";
                    break;
                case "ddlPtoStudio":
                    nombre = "Punto Estudio";
                default:
                    nombre = "Defecto";
                    break;
            }
            alert("Alerta, indice: " + accion + " - " + nombre);
        }

    </script>
    <div>
        <text style="margin-left: 8px;">
            &nbsp   Contrato &nbsp
        </text>
        @*--------------------Listado desplegable de Contrato--------------------------*@
        @Html.DropDownList("ddlSelContrato", new SelectList(ViewBag.SelContrato, "Id", "Nombre"), new { Class = "ddlStyle", onchange = "SelectedIndexChanged(this.value ,id)" })

    </div>

    <div>
        <text style="margin-left: 8px;">
            &nbsp   Proyecto &nbsp
        </text>
        @*--------------------Listado desplegable de Proyecto--------------------------*@
        @Html.DropDownList("ddlSelProyecto", new SelectList(ViewBag.SelProyecto, "Id", "Nombre"), new { Class = "ddlStyle", onchange = "SelectedIndexChanged(this.value ,id)"})
    </div>
    <div>
        <text style="margin-left: 8px;">
            &nbsp   Punto de Medicion &nbsp
        </text>
        @*--------------------Listado desplegable de Puntos de estudio--------------------------*@
        @Html.DropDownList("ddlPtoStudio", new SelectList(ViewBag.PtoStudio, "Id", "Nombre"), new { Class = "ddlStyle", onchange = "SelectedIndexChanged(this.value ,id)" })
    </div>

控制器：

       // GET: PuntoEstudios
    public IActionResult Index()
    {
        ViewBag.SelContrato = _context.Contratos.OrderByDescending(x=>x.Nombre).ToList(); //Variable MVC donde paso a la vista el List de los Contratos
        ViewBag.SelProyecto = _context.Proyectos.ToList(); //Variable MVC donde paso a la vista el List de los Proyectos
        ViewBag.PtoStudio = _context.PuntoEstudios.ToList(); //Variable MVC donde paso a la vista el List de los pto de estudio

        return View();
    }

我如何才能在不调用服务器的情况下完成此操作

推荐答案

我假设您的三个模型之间的关系：对立面投影(一对多)、投影-PtoStudio(一对多)。如果您想在不调用服务器的情况下将筛选器更改为DropDownList的值，可以参考下面的工作演示：

型号

public class Contact
{
    public int Id { get; set; }
    public string Name { get; set; }

    public ICollection<Product> Products { get; set; }

}
 public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public ICollection<StudyPoint> StudyPoints { get; set; }

    [ForeignKey("Contact")]

    public int ContactId { get; set; }
    public Contact Contact { get; set; }
}
public class StudyPoint
{
    public int Id { get; set; }
    public string Name { get; set; }

    [ForeignKey("Product")]
    public int ProductId { get; set; }
    public Product Product { get; set; }
}

控制器，使用Include()加载相关数据

public IActionResult CascadeDropdownlist()
    {
        ViewBag.SelContrato = _context.Contact.OrderByDescending(x => x.Name).ToList(); 
        ViewBag.SelProyecto = _context.Product.Include(p=>p.Contact).ToList(); 
        ViewBag.PtoStudio = _context.StudyPoint.Include(s=>s.Product).ToList(); 

        return View();
    }

查看和Java脚本，请参考https://sung.codes/blog/2018/02/24/approximate-equivalent-linq-methods-javascript/在Java脚本中使用LinQ

@{
    ViewData["Title"] = "CascadeDropdownlist";
}

<h1>CascadeDropdownlist</h1>


<div>
    <text style="margin-left: 8px;">
        &nbsp   Contact &nbsp
    </text>
    @*--------------------Listado desplegable de Contrato--------------------------*@
    @Html.DropDownList("ddlSelContrato", new SelectList(ViewBag.SelContrato, "Id", "Name"),"Select value" ,new { Class = "ddlStyle", onchange = "SelectedIndexChanged(this.value ,id)" })

</div>

<div id="">
    <text style="margin-left: 8px;">
        &nbsp   Product &nbsp
    </text>
    @*--------------------Listado desplegable de Proyecto--------------------------*@
    @Html.DropDownList("ddlSelProyecto", new SelectList(ViewBag.SelProyecto, "Id", "Name"),"Select value" , new { Class = "ddlStyle", onchange = "SelectedIndexChanged(this.value ,id)" })
</div>
<div>
    <text style="margin-left: 8px;">
        &nbsp   Study point &nbsp
    </text>
    @*--------------------Listado desplegable de Puntos de estudio--------------------------*@
    @Html.DropDownList("ddlPtoStudio", new SelectList(ViewBag.PtoStudio, "Id", "Name"),"Select value" , new { Class = "ddlStyle", onchange = "SelectedIndexChanged(this.value ,id)" })
</div>

@section Scripts
{
    <script type="text/javascript">

        function SelectedIndexChanged(action, idnum) {
            var nuevaSelProyecto = "";
            var proyecto = "";
            var name = "";
            switch (idnum) {
                case "ddlSelContrato": {
                    //var getValue = document.getElementById('ddlSelContrato').selectedOptions[0].value;
                    var e = document.getElementById("ddlSelContrato");
                    var array = @Html.Raw(Json.Serialize(ViewBag.SelProyecto));
                    var getValue = e.options[e.selectedIndex].value;
                    var projectdata = array.filter(a => a.contactId == getValue);
                    $("#ddlSelProyecto").empty();
                    $('#ddlSelProyecto').append($("<option value=0>Select value</option>"));
                    projectdata.forEach(function (e) {
                        $('#ddlSelProyecto').append($("<option></option>").attr("value",e.id).text(e.name));
                    });

                };
                    break;
                case "ddlSelProyecto":
                     {
                    //var getValue = document.getElementById('ddlSelContrato').selectedOptions[0].value;
                    var e = document.getElementById("ddlSelProyecto");
                    var array = @Html.Raw(Json.Serialize(ViewBag.PtoStudio));
                    var getValue = e.options[e.selectedIndex].value;
                    var projectdata = array.filter(a => a.productId == getValue);
                    $("#ddlPtoStudio").empty();
                    $('#ddlPtoStudio').append($("<option value=0>Select value</option>"));

                    projectdata.forEach(function (e) {
                        $('#ddlPtoStudio').append($("<option></option>").attr("value",e.id).text(e.name));
                    });

                };
                    break;
                case "ddlPtoStudio":
                    name = "Punto Estudio";
                default:
                    name = "Defecto";
                    break;
            }
        }
    </script>
}

结果

这篇关于ASP核心Razor页面，带下拉列表的可变视袋过滤器内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！