使下拉列表依赖于 ASP.NET 没有 JS 的核心 MVC 中的另一个下拉列表

Question

我必须使用板的名称做下拉列表，并且由于选择的名称显示该板的所有子类型。这在代码中看起来像这样：

国家Class：

public class Country
{
    public List<Plate> plates { get; set; }
    public string name { get; set; }

    public Country(string jsonRead)
    {
        plates = JsonConvert.DeserializeObject<List<Plate>>(jsonRead);
    }

    public IEnumerable<Plate> getAllPlates()
    {
        return plates.OrderBy(r => r.type);
    }
}

板块class:

public class Plate
{
    public string type { get; set; }
    public List<Subtype> subtypes { get; set; }

    public Plate()
    {
        subtypes = new List<Subtype>();
    }
}

子类型 class:

public class Subtype
{
    public string subtypeName { get; set; }
    public string color { get; set; }

    public Subtype(string subtype, string color)
    {
        this.subtypeName = subtype;
        this.color = color;
    }
}

在控制器中，我有一个字段CountryData。它有关于所有表的信息（我从文件中读取）和功能来查看我想要这两个下拉列表的位置：

[Route("Home/CreatePlate/{name}")]
public IActionResult CreatePlate(string name)
{
    var model = countryData.GetCountry(name);
    return View(model);
}

最后 CreatePlate.cshtml 查看：

@model Generator.Country

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

<h1>CreatePlate</h1>

<div>
    <h4>Country</h4>
    <hr />
    <dl class="row">
        <dt class="col-sm-2">

            <select id="Plate" name="Plate" onchange="this.form.submit()">
                @if (Model.plates != null)
                {
                    foreach (var Title in Model.plates)
                    {
                        <option value="@Title.type">@Title.type</option>
                    }
                }
            </select>

            <select id="Subtype" name="Subtype" onchange="this.form.submit()">
                @if (Model.plates != null)
                {
                    foreach (var Title in Model.plates.Select(r => r))
                    {
                        foreach (var subtype in Title.subtypes) 
                        {
                        <option value="@subtype.subtypeName">@subtype.subtypeName</option>
                        }
                    }
                }
            </select>

        </dt>
        <dd class = "col-sm-10">
        </dd>
    </dl>
</div>

现在我在第一个 foreach 中显示所有板块，但在第二个中，我得到所有子类型而不是第一个下拉列表中选择的子类型。

我在Whosebug上看到了一些解决方案，但是它们都需要JS（我不知道那个lang）而且和我的问题也没什么不同。

这是我在 ASP.NET Core MVC 中的第一个项目。

Answer 1

简单的答案是 'No'。如果不使用 JS，您将无法做到这一点。如果你正在做网络开发。 JS 几乎是基本要求！

所以解决方案...学习JS。你知道 C#。语法是一样的。或者找个差不多的JS（有）修改一下

Answer 2

避免使用JS是不可能的。如果不想学JS，至少用this.form.submit().

这是一个完整的工作演示：

型号：

public class Plate
{
    public string type { get; set; }
    public List<Subtype> subtypes { get; set; }
    public Plate()
    {
        subtypes = new List<Subtype>();
    }
}
public class Subtype
{
    public string subtypeName { get; set; }
    public string color { get; set; }
    public Subtype(string subtype, string color)
    {
        this.subtypeName = subtype;
        this.color = color;
    }
}
public class Country
{
    public List<Plate> plates { get; set; }
    public string name { get; set; }     
}

查看：

@model Country    
@{
    ViewData["Title"] = "CreatePlate";
}    
<h1>CreatePlate</h1>
<form>
    <div>
        <h4>Country</h4>
        <hr />
        <dl class="row">
            <dt class="col-sm-2"> 
                <select id="Plate" name="Plate" onchange="this.form.submit()">
                    @if (Model.plates != null)
                    {
                        foreach (var Title in Model.plates)
                        {
                            <option value="@Title.type" selected="@(ViewBag.SelectedIndex==Title.type?"selected":null)" >@Title.type</option>
                        }
                    }
                </select>

                <select id="Subtype" name="Subtype">
                    @if (Model.plates != null)
                    {
                        foreach (var Title in Model.plates.Select(r => r))
                        {
                            foreach (var subtype in Title.subtypes)
                            {
                                <option value="@subtype.subtypeName">@subtype.subtypeName</option>
                            }
                        }
                    }
                </select>

            </dt>
            <dd class="col-sm-10">
            </dd>
        </dl>
    </div>

</form>

控制器：

public class HomeController : Controller
{
    //hard coded the data
    List<Country> country = new List<Country>()
    {
        new Country(){
            name="aa",
            plates= new List<Plate>()
            {
                new Plate(){type="p1",subtypes=new List<Subtype>(){new Subtype("sub1","red"),new Subtype("sub2","yellow")}},
                new Plate(){type="p2",subtypes=new List<Subtype>(){new Subtype("sub3","green"),new Subtype("sub4","blue")}},
                new Plate(){type="p3",subtypes=new List<Subtype>(){new Subtype("sub5","gray")}}
            }
        }
    };
      
    [Route("Home/CreatePlate/{name}")]
    public IActionResult CreatePlate(string name, string Plate)   
    {
        ViewBag.SelectedIndex = "p1";
        //get all the data of three tables
        var model = country.Where(a=>a.name==name).FirstOrDefault();
        if (Plate != null)
        {
            model.plates.Where(a => a.type != Plate).Select(a => a.subtypes).ToList().ForEach(a => a.Clear());
            ViewBag.SelectedIndex = Plate;  //used to keep the selected item
            return View(model);
        }

        model.plates.ForEach(a => a.subtypes.Clear());
        return View(model);
    }
}

使下拉列表依赖于 ASP.NET 没有 JS 的核心 MVC 中的另一个下拉列表

Make dropdown list dependent on another dropdown in ASP.NET Core MVC without JS

c#

razor

drop-down-menu

asp.net-core-mvc