特定 ID 的正确模态

Question

我有一个使用 Bootstrap 的 .NET Core 2.0 应用程序 4. 我有一个使用 @foreach 循环从数据库中显示的项目列表。每个项目都有一个 "Status Code" link。

我希望用户能够单击该 link 并弹出相应项目的模式。使用我当前的代码，我相信无论我单击哪个 link，第一个项目的模式总是显示。

我需要做什么才能在我点击第 5 个项目时出现第 5 个项目的模式而不是每个项目出现相同的模式？

这是我目前的情况：

查看

<div class="row">
@foreach(var Submission in Model.Submissions)
{
    < div class="col-sm-3">
        <div class="card text-center my-3 shadow">
            ...
            <div class="card-footer text-muted">
                <b>Status: </b><a data-target="#StatusCodeUpdate" asp-route-id="@Submission.ID" data-toggle="modal">@Html.DisplayFor(modelItem => Submission.Status)</a>

                < !--Modal-- >
                <div class="modal fade" id="StatusCodeUpdate" tabindex="-1" role="dialog" aria-labelledby="StatusCodeUpdateLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="StatusCodeUpdateLabel">Update Status Code</h5>
                        <button type = "button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        ...
                      </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>

}

Controller/Code落后

public class TeamleadModel : PageModel
{
    public IList<Submission> Submissions { get; set; }
    private readonly SubmissionContext _context;

    public TeamleadModel(SubmissionContext context)
    {
        _context = context;
    }

    public async Task OnGetAsync()
    {
        Submissions = await _context.Submissions.ToListAsync();


    }

}

型号

public class Submission
{
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    public int ID { get; set; }
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:g}")]
    public DateTime Date { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Email { get; set; }
    public string LoginID { get; set; }
    public string Title { get; set; }
    public string Location { get; set; }
    [Column(TypeName = "text")]
    public string ProjectDescription { get; set; }
    public string Goal { get; set; }
    [Column("Timeline")]
    public string DesiredCompletionDate { get; set; }
    public int Status { get; set; }
    public string Files { get; set; }

    public ICollection<Comment> Comments { get; set; } = new List<Comment>();
}

Answer 1

您需要将 data-target 设置为适当的模式。见下文：

<div class="card-footer text-muted">
       <b>Status: </b><a data-target="#modal-@Submission.ID" asp-route-id="@Submission.ID" data-toggle="modal">@Html.DisplayFor(modelItem => Submission.Status)</a>

       <div id="modal-@Submission.ID" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="StatusCodeUpdateLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                  <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="StatusCodeUpdateLabel">Update Status Code</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="modal-body">
                              <label>Submission first name: </label><span id="modal-firstname">@Submission.FirstName</span>
                        </div>
                        <div class="modal-footer">
                            ...
                        </div>
                   </div>
             </div>
       </div>
 </div>

目前您正在渲染具有相同 ID 的多个模态，因此 data-target 使用第一个模态到 select 来显示。在 html 中，ids 应该始终是唯一的。您可以使用 Submission.Id 使每个模式的 id 唯一，并在用于触发模式的 <a> 标签上设置适当的 data-target。

特定 ID 的正确模态

Correct Modal for Specific ID

asp.net-mvc

foreach

asp.net-core-2.0