如何在提交前更新 MVC 表单

Question

所以我有 2 个 Viewbags，它们每个都有来自数据库 table 的值列表，第一个 Viewbag 具有数据库列的所有可能值，而另一个只有第一个 Viewbag 中所选值对应的值。我有搜索的逻辑。但我需要在选择一个值后更新表格，因为它们都需要采用相同的表格，所以它不会搜索第二个值。

OBS：我只使用控制器和 cshtml 视图，而不是 razor 页面。

Answer 1

问题是，.cshtml 文件在发送到您的浏览器之前已完全呈现。因此，在发送到浏览器后，您无法使用 C# 代码更改它。

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

Answer 2

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

型号：

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; }
}

视图(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"));
   }
}

结果：

如何在提交前更新 MVC 表单

How to update a MVC Form before Submit

forms

asp.net-core

model-view-controller

viewbag

ef-core-3.1