Question

我希望能够根据Dot.Net Core上的选择值显示更改的表单。我见过很多东西，比如动态表单，View Components，剃须刀和partials，还有很多信息，但非常令人困惑。任何关于正确做我想做的事情的信息都将非常感激。

我有类别＆gt;子类别＆gt;＆gt;产品订单只能用于一个类别＆gt;＆gt; SubCategory。所以我想显示一个选择，并根据用户为新订单选择的类别，我必须显示的产品。所以我不想选择用户选择并返回控制器并再次返回视图，依此类推。我希望能够根据用户选择动态显示数据。

这里是代码的摘录，只是为了简单地弄清楚我在做什么......我没有粘贴像产品等的类。

    public class OrderCreateViewModel
{    
    public IEnumerable<Category> Categories { get; set; }
    public IEnumerable<Branch> Branches { get; set; }
    public int BranchId { get; set; }
    public int CategoryId { get; set; }
}

控制器：

        [HttpGet]
    public IActionResult Create()
    {
        //Create vm
        IEnumerable<Branch> branchList = _branchDataService.GetAll();
        IEnumerable<Category> categoryList = _categoryDataService.GetAll();

        OrderCreateViewModel vm = new OrderCreateViewModel
        {
            Categories = categoryList,
            Branches = branchList
        };
        return View(vm);
    }

查看：

 @model OrderCreateViewModel
<p>Create New Order </p>
<form asp-controller="Order" asp-action="Create" method="post">
    <div class="form-group">
        <label >Select Category</label>
        <select class="form-control col-md-2"  asp-for="CategoryId"
                asp-items="@(new SelectList(Model.Categories ,"CategoryId","Name"))">            
        </select>
    </div>
    <div class="form-group">
        <label>Select Branch</label>
        <select class="form-control  col-md-2" asp-for="BranchId"
                asp-items="@(new SelectList(Model.Branches,"BranchId","Name"))">           
        </select>
    </div>
    <div >
        <input type="submit" value="Save" />
    </div>
</form>

我只是填写视图上的选择，并根据用户选择的内容，我想要显示的产品。我还没有通过产品清单，因为我不知道＆＃34;过滤器＆＃34;对于那个特定的类别发生。希望你理解我需要的想法：）

Answer 1

你在这里有两个选择：

＃1使用部分视图和AJAX获取数据

请查看下面的链接，它会准确描述您想要实现的目标。

Populating Dropdown using partial view

＃2使用Javascript填充您的第二个选择：

首先，您需要在页面加载时保留数据

在视图开头，添加以下内容：

@{
<text>
    <script>
        var data = "@Newtonsoft.Json.JsonConvert.SerializeObject(Model)";
    </script>
</text>
}

接下来在分支选择器上使用on change事件：

在视图底部，在页面就绪事件中执行以下操作：

<script>
    (function () 
        {
            var sltBranch = document.getElementsByName("BranchId")[0];
            var sltCat = document.getElementsByName("CategoryId")[0]
            sltCat.onchange = function () {
                var dataAsObj = JSON.parse(data);
                var branches = "";
                for (i = 0; i < dataAsObj.Branches.length; i++)
                {
                     if (dataAsObj.Branches[i].CategoryId == sltCat.value)
                     {
                         branches += "<option value='" + dataAsObj.Branches[i].BranchId + "'>" + dataAsObj.Branches[i].BranchName + "</option>"; //Whatever The branch name may be
                     }
                }
                sltBranch.innerHTML = branches;
            }


        }
    )(document, window);
</script>

但我会建议您遵循选项1，因为这是一个更加面向未来的战略。这意味着您需要更改您的视图模型等，但如果您计划大量使用此策略，则需要使用（如选项1 ）使其更加强大。

无论如何，祝你好运 - 快乐的编码。

如何根据Asp.Net核心

1 个答案: