Razor 表单 foreach 返回相同的 id

Question

我有一个带有文本区域的弹出模式按钮。当我单击模式中的提交按钮时，我想将数据传递给 post 方法（Description 和 OrderId）。问题是 orderid 始终与第一个订单相同。例如，我单击 ID 应该为 4 的订单，但它 returns 的 ID 为 1（作为第一个订单），因此我将错误的 ID 传递给控制器。注意 - order.Id 在模态之外工作得很好，问题是当我将它传递给模态时。

    @foreach (var order in Model .Where(x => Context.Request.Query["searchOption"] == "2" ? x.Status == "Completed" : x.Status == "Active")) {
    <div class="card" style="width: 18rem; margin-left:1em; margin-bottom: 1em; margin-top: 1em">
      <div class="card-body">
        <h5 class="card-title">@order.ServiceName</h5>
      </div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">@order.Address</li>
        <li class="list-group-item">@order.StartDate</li>
        <li class="list-group-item">@order.DueDate</li>
        <li class="list-group-item">@order.HoursBooked</li>
        <li class="list-group-item">@order.WorkersCount</li>
        <li class="list-group-item">@order.Status</li>
        <li class="list-group-item">@order.Price<text>$</text></li>
    
        @if (order.Status == "Completed") {
        <!-- Button trigger modal -->
    
        <form method="post" asp-controller="Orders" asp-action="AddComplaint">
          <!-- Modal Trigger -->
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                                    Add Complaint
                                </button>
    
          <!-- Modal -->
          <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                </div>
                <div class="modal-body">
                  ***<input name="OrderId" value="@order.Id" />
                  <textarea name="Description" style="height:100%; width:100%"></textarea>***
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  <button type="submit" class="btn btn-primary">Submit</button>
                </div>
              </div>
            </div>
          </div>
        </form>
    
        }

Answer 1

你可以这样改（在foreach前加i，在foreach里加i++，改变button的data-target，改变modal的id）：

@{ var i = 0;}
@foreach (var order in Model .Where(x => Context.Request.Query["searchOption"] == "2" ? x.Status == "Completed" : x.Status == "Active")) {
    i++;
    <div class="card" style="width: 18rem; margin-left:1em; margin-bottom: 1em; margin-top: 1em">
      <div class="card-body">
        <h5 class="card-title">@order.ServiceName</h5>
      </div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">@order.Address</li>
        <li class="list-group-item">@order.StartDate</li>
        <li class="list-group-item">@order.DueDate</li>
        <li class="list-group-item">@order.HoursBooked</li>
        <li class="list-group-item">@order.WorkersCount</li>
        <li class="list-group-item">@order.Status</li>
        <li class="list-group-item">@order.Price<text>$</text></li>
    
        @if (order.Status == "Completed") {
        <!-- Button trigger modal -->
    
        <form method="post" asp-controller="Orders" asp-action="AddComplaint">
          <!-- Modal Trigger -->
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal@(i)">
                                    Add Complaint
                                </button>
    
          <!-- Modal -->
          <div class="modal fade" id="exampleModal@(i)" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                </div>
                <div class="modal-body">
                  ***<input name="OrderId" value="@order.Id" />
                  <textarea name="Description" style="height:100%; width:100%"></textarea>***
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  <button type="submit" class="btn btn-primary">Submit</button>
                </div>
              </div>
            </div>
          </div>
        </form>
    
        }

Razor 表单 foreach 返回相同的 id

Razor form foreach returning the same id

html

javascript

razor

bootstrap-modal

asp.net-core