如何在提交前更新MVC表单

Question

所以我有2个 Viewbags它们每个都有一个来自数据库表的值列表，第一个是 Viewbag 有一个数据库列的所有可能的值，而另一个只有对应于第一个数据库列的选定值的值。Viewbag.我有搜索的逻辑，但我需要在选择一个值后让表单更新，因为它们都需要在同一个表单中，它没有搜索第二个值。

OBS:我只使用控制器和cshtml视图，而不是剃刀页面。

Answer 1

这里是一个简单的演示如何创建级联选择列表在asp.net核心mvc。

Model.View(Index.cshtml)

public class Category
{
    public int Id { get; set; }
    public string Name { get; set; }
}
public class SubCategory
{
    public int Id { get; set; }
    public int CategoryId { get; set; }
    public string SubCategoryName { get; set; }
}

View(Index.cshtml)。

<div>
    <div style="float:left;width:40%">
        <form id="form">
            <div class="form-group row">
                <label>Category Name</label>
                <div class="col-12">
                    <select id="CategoryId" class="custom-select mr-sm-2"
                            asp-items="@(new SelectList( @ViewBag.Category,"Id","Name"))">
                        <option value="">Please Select</option>
                    </select>
                </div>
            </div>
            <div class="form-group row">
                <label>SubCategory Name</label>
                <div class="col-12">
                    <select id="SubCategoryId" class="custom-select mr-sm-2"
                            asp-items="@(new SelectList(string.Empty,"Id","SubCategoryName"))">
                        <option value="">Please Select</option>
                    </select>
                </div>
            </div>
            <div>
                <input type="button" value="Search" />
            </div>
        </form>

    </div>
</div>

@section Scripts
{
    <script>
    $(function () {
        $('#CategoryId').change(function () {
            var data = $("#CategoryId").val();
            $.ajax({
                url: '/Home/GetSubCategory?CategoryId=' + data,
                type: 'Get',
                success: function (data) {
                    var items = "";
                    $.each(data, function (i, item) {
                        items += "<option value='" + item.value + "'>" + item.text + "</option>";
                    });
                    $('#SubCategoryId').html(items);  
                }
            })
        });           
    })
    </script>
}

控制器。

public class HomeController : Controller
{
    private readonly MvcProj3Context _context;    
    public HomeController(MvcProj3Context context)
    {
        _context = context;
    }
    public IActionResult Index()
    {
        ViewBag.Category = _context.Category.ToList();
        return View();
    }
    public JsonResult GetSubCategory(int CategoryId)
    {
        ViewBag.SubCategory = (from m in _context.SubCategory
                               where m.CategoryId == CategoryId
                               select m).ToList();
        return Json(new SelectList(ViewBag.SubCategory, "Id", "SubCategoryName"));
   }
}

结果。

Answer 2

问题是，.cshtml文件在发送到浏览器之前已经完全渲染了。因此，你不能在它被发送到浏览器后用C#代码改变它。

如果你想用c#来做，可以用blazor，或者用javascript来做。