Question

我有一个使用Bootstrap 4的.NET Core 2.0应用程序。我有一个使用@foreach循环从数据库中显示的项目列表。每个项目都有一个“状态代码”链接。

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

我需要做些什么，以便当我说第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>

}

背后的控制器/代码

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使用第一个模态来选择显示。在html中，id应该始终是唯一的。您可以使用Submission.Id来使每个模式的ID唯一，并在用于触发模式的data-target标签上设置相应的<a>。

特定ID的正确模态

1 个答案: