如何为高级项目组定义数据模型类型？

Question

我刚刚开始接触 ASP.Net Core MVC 领域，有一种输入项的形式让我很困惑。其中，几个项目将以复选框的形式收集。对于每个选中的项目，它将显示与这些选中项目相关的输入字段列表。我不知道定义此模型以及在 Razor 页面中使用它的正确方法。它包含大量数据中的多层数据。我图片中的数量项目已经减少，它们的实际数量要多得多。

What it looks like on Web

Answer 1

从您的描述看来，您似乎是想根据选择的Category动态加载相关数据，对吧？如果是这种情况，您可以参考以下示例：

模型：类别和调查有one-to-many relationship。

public class Category
{
    public int CategoryId { get; set; }
    public string Name { get; set; }
    public bool IsSelected { get; set; }

    public List<Survey> Surveys { get; set; }
}

public class Survey
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string Answer { get; set; } 
    public int CategoryId { get; set; }
    [ForeignKey("CategoryId")]
    public Category Category { get; set; }
}

控制器：

public class TestController : Controller
{
    private readonly ApplicationDbContext _context;

    public TestController(ApplicationDbContext context)
    {
        _context = context;
    }

    public IActionResult Index()
    {
        return View(_context.Categories.ToList());
    }
    // get the survey based on the checked category.
    [HttpPost]
    public IActionResult GetSurveyByCategory(List<int> ids)
    {
        //according the selected category to find the related data.
        var surveys = _context.Categories.Include(c => c.Surveys).Where(c => ids.Contains(c.CategoryId)).SelectMany(c => c.Surveys).ToList();

        //use partial view display the data and return to the main page.
        return PartialView("_PVSurvey", surveys);
    }
}

Index.cshtml：使用 jQuery Ajax 加载局部视图方法来呈现相关调查

@model List<WebApplication6.Data.Category>

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>Category</h1>  
<div class="container"> 
    @foreach (var item in Model)
    {
        <div class="form-check-inline">
            <label class="form-check-label">
                <input type="checkbox" class="form-check-input chk" value="@item.CategoryId" @(item.IsSelected ? "checked" : "")>@item.Name
            </label>
        </div> 
    }
</div> 

<div id="detailcontent" class="container" style="background-color:gainsboro">

</div>

@section Scripts{ 
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script>
    function GetSurveyByCategory() { 
        var category = [];
        //get the checked category id.
        $(".chk").each(function (i, e) {
            if ($(e).is(":checked"))
                category.push(parseInt($(e).val())); 
        });  
        //use jquery to get survery
        $.ajax({
            url: '/Test/GetSurveyByCategory',
            type: 'Post',
            data: { "ids": category }, 
            traditional: true,   
            success: function (result) {
                $('#detailcontent').html("");//clear the content
                $('#detailcontent').html(result); //add the partial view in the index page.
            },
            error: function (xhr, status) {
                alert(status);
            }
        });
    };
    $(function () {
        $(".chk").each(function (index, item) {
            $(item).click(function () {
                GetSurveyByCategory();
            });
        });
        //after page loading, check whether need to load the related survey based on the checked category
        GetSurveyByCategory();
    });
</script>
}

_PVSurvey.cshtml：使用此局部视图显示相关数据。

@model IEnumerable<WebApplication6.Data.Survey>

<div class="row"> 
    @foreach (var item in Model)
    {
        <div class="col-3">
            <dl>
                @Html.DisplayFor(modelItem => item.Title)
            </dl>
            <div>
                <input asp-for="@item.Answer" />
            </div>
        </div>
    }
</div> 

结果如下：

有关实体之间关系的更多详细信息，请参阅：

One-to-Many Relationship Conventions in Entity Framework Core

Relationships

此外，在渲染相关数据后，您可能需要更新相关数据。如果是这种情况，您可以参考以下教程：

Loading Related Data

Update related data

Jquery/Ajax to update a TABLE