EFCoreASP.NETMVC在一個視圖中包含詳細資訊和索引一對多-有解無憂

EF Core ASP.NET MVC 在一個視圖中包含詳細資訊和索引一對多

我有一個與步驟表具有一對多關系的待辦事項表。每個待辦事項都有很多步驟。索引視圖列出了所有待辦事項，詳細資訊視圖在其下方的表格中顯示了一個待辦事項及其許多步驟。我想要一個視圖來顯示所有列出的待辦事項以及每個待辦事項下的所有步驟。我計劃有一個手風琴來展開/折疊串列中每個待辦事項的步驟。任何有關如何做到這一點的幫助將不勝感激。

控制器

public IActionResult Index()
{

    List<TodoList> todolists;
    todolists = _context.TodoLists.ToList();
    return View(todolists);
}

public IActionResult Details(int id)
{
    TodoList todolist = _context.TodoLists
        .Include(e => e.Steps)
        .Where(a => a.Id == id).FirstOrDefault();
     return View(todolist);
}

詳情視圖

<form asp-action="Details" id="TodoForm">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="Name" class="control-label"></label>
        <input asp-for="Name" class="form-control" disabled />
    </div>
    <div class="form-group">
        <label asp-for="Description" class="control-label"></label>
        <input asp-for="Description" class="form-control" disabled />
    </div>
    <div class="form-group">
    </div>
     <div class="col-md-12 bg-light p-0 m-0">
        <table class="table table-sm codes-table" id="StepTable">
            <thead>
                <tr>
                    <th>Priority</th>
                    <th>Name</th>
                    <th style="width:75px;">
                    </th>
                </tr>
            </thead>
            <tbody>
                @for (int i = 0; i < Model.Steps.Count; i  )
                {
                    <tr>
                        <td>
                            <input asp-for="@Model.Steps[i].Priority" class="form-control" disabled />
                        </td>
                        <td>
                            <input asp-for="@Model.Steps[i].Name" class="form-control" disabled />
                        </td>
                        <td style="width:60px;">
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
    <input type="hidden" id="hdnLastIndex" value="0" />
</form>

索引視圖

<table class="table">
<thead>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Description)
        </th>
        <th></th>
    </tr>
</thead>
<tbody>
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Description)
        </td>
        <td>
            <a asp-action="Edit" asp-route-id="@item.Id" class="btn btn-outline-success rounded-pill mx-2"><i class="bi bi-pencil-square"></i>&nbsp;Edit</a>
            <a asp-action="Details" asp-route-id="@item.Id" class="btn btn-outline-info rounded-pill mx-2"><i class="bi bi-binoculars"></i>&nbsp; Details </a>
            <a asp-action="Delete" asp-route-id="@item.Id" class="btn btn-outline-danger rounded-pill mx-2"><i class="bi bi-trash-fill"></i>&nbsp;Delete</a>
        </td>
    </tr>
}
</tbody>
</table>

uj5u.com熱心網友回復：

我建議你可以使用 Bootstrap Collapse。

首先確保您的專案包含bootstrap.cssand bootstrap.js。

然后，檢查 Bootstrap 版本。Bootstrap在 v5.0 之前data-target使用/并將/用于v5.0。data-toggle data-bs-targetdata-bs-toggle

這是一個完整的作業演示：

模型

public class TodoList
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public List<Step> Steps { get; set; }
}
public class Step
{
    public int Id { get; set; }
    public string Priority { get; set; }
    public string Name { get; set; }
}

看法

@model IEnumerable<TodoList>

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

<h1>Index</h1>

<p>
    <a asp-action="Create">Create New</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th></th>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Description)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
    @{
        int i = 0;
    }
    @foreach (var item in Model) {
        <tr>
            <td>
                <button type="button" class="btn btn-outline-primary btn-sm" 
                                        data-bs-toggle="collapse" data-bs-target="#step_@i"
                                        aria-expanded="false" aria-controls="step_@i">   </button>
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Description)
            </td>

            <td>
                <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
                <a asp-action="Details" asp-route-id="@item.Id">Details</a> |
                <a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
            </td>
         </tr>
        <tr id="step_@i" class="collapse">
        @for (int j = 0; j < item.Steps.Count; j  )
        {
            <td>
                Priority:<input asp-for="@item.Steps[j].Priority" class="form-control" disabled />
                <br/>
                Name:<input asp-for="@item.Steps[j].Name" class="form-control" disabled />
            </td>
        }
        </tr>
         i  ;
    }
    </tbody>
</table>

在 _Layout.cshtml 中添加Bootstrap.css和Bootstrap.js

<head>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
</head>
 <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

控制器

public class TodoListsController : Controller
{
    private readonly MvcProjContext _context;

    public TodoListsController(MvcProjContext context)
    {
        _context = context;
    }

    // GET: TodoLists
    public async Task<IActionResult> Index()
    {
          return View(await _context.TodoLists.Include(a=>a.Steps).ToListAsync());
    }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/515591.html

標籤：C＃asp.net-mvcasp.net 核心实体框架核心

上一篇：如何在Asp.netmvc5中管理并行Foreach中的耗時操作并減少Api回應時間

下一篇：將Id從視圖決議到控制器