Правильный модал для конкретного ID - PullRequest
Новая
       8

Правильный модал для конкретного ID

0 голосов
/ 22 января 2019

У меня есть приложение .NET Core 2.0, использующее Bootstrap 4. У меня есть список элементов, отображаемых из базы данных с использованием цикла @foreach. Каждый элемент имеет ссылку «Код состояния».

Я хочу, чтобы пользователь мог щелкнуть по этой ссылке, чтобы модальное окно всплыло для соответствующего элемента. С моим текущим кодом, я считаю, что модальный для первых элементов всегда показывает независимо от того, по какой ссылке я нажимаю.

Что мне нужно сделать, чтобы, когда я нажимал, скажем, 5-й предмет, модал для 5-го предмета появлялся в отличие от того же модала, появляющегося для каждого предмета?

Вот что у меня есть:

View 

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

1 Ответ

0 голосов
/ 22 января 2019

Вам необходимо установить 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>

В настоящее время вы визуализируете несколько модалов с одинаковым идентификатором, поэтому data-target использует первый модал, чтобы выбрать для показа.В html id s всегда должно быть уникальным.Вы можете использовать Submission.Id, чтобы сделать идентификатор каждого модального объекта уникальным и установить соответствующий data-target для вашего тега <a>, который используется для запуска модального режима.

...