asp.net - 如何在 Razor 视图中使用模态表单进入循环

Question

我使用模态表单发送用户值我在模态框内放置了一个表单并将模态框放入循环中以获取所选用户ID的值并发送。当我在表单中输入模型 id 值时，没有发送正确的值，而是发送了一个少一个数字。不使用表单发送正确的 id 值。

请告诉我问题出在哪里以及如何解决。

  @foreach (var item in Model.ProjectViewModels)
            {


                <tr>
                    <td>@item.PersonName @item.Family</td>
                    <td>@item.PersonCode</td>

                    <td>@item.projectName</td>

                                <div>
                                    <a class="btn btn-sm btn-outline-primary" asp-controller="Home" asp-action="detailsPerson" asp-route-id="@item.PersonID">جزئیات</a>

                                    <a class="btn btn-sm btn-outline-secondary" asp-controller="Report" asp-action="SingelGhrardad" asp-route-id="@item.PersonID">قرارداد</a>

                                    <a class="btn btn-sm btn-outline-danger" data-toggle="modal" data-target="#myModal">ترک کار</a>
                                    <!-- The Modal -->
                                    <div class="modal fade" id="myModal">
                                        <div class="modal-dialog ">
                                            <div class="modal-content">

                                                <!-- Modal Header -->
                                                <div class="modal-header">
                                                    <h4 class="modal-title">ثبت تاریخ ترک کار پرسنل</h4>

                                                </div>

                                                <!-- Modal body -->
                                                <div class="modal-body">

                                                    <form asp-controller="Home" asp-action="PersonTarkKar"  asp-route-PersonNewState="0" method="post">


                                                        <div class="row">

                                                            <div class="col-md-5 col-xs-12">
                                                                <label>تاریخ ترک کار</label>

                                                                <div class="input-group" style="padding-left:9px; padding-right:9px;">
                                                                    <div class="input-group-addon"
                                                                         style="border:1px solid gray; padding:6px">
                                                                        <span>  <i class="right fa fa-calendar"></i></span>
                                                                    </div>
                                                                    <input id="calender1" name="calender1" type="text" required autocomplete="off" class="form-control" />
                                                                    <input  name="id" value="@item.PersonID" class="form-control d-none" />

                                                                </div>

                                                            </div>

                                                        </div>


                                                        <button class="btn btn-dark mt-5" type="submit">ثبت تاریخ</button>
                                                    </form>
                                                </div>

                                                <!-- Modal footer -->
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-danger" data-dismiss="modal">بستن</button>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        }



                    </td>

                </tr>

            }

public IActionResult PersonTarkKar(int id ,int PersonNewState,String calender1 )
{
    var per = _context.Persons.Find(id);

    per.PersonState = PersonNewState;
    per.PersonTarkKarDate = calender1;

    _context.SaveChanges();

    return RedirectToAction("allPerson");
}

标签： asp.netasp.net-mvcasp.net-core

Answer 1

您的模态ID不是唯一的，因此当您单击按钮时，它将打开相同的模态，因此隐藏的输入将是相同的。尝试使您的模态ID唯一，以便每次打开正确的模态。

@{ var count = 0;}
@foreach (var item in Model.ProjectViewModels)
            {


                <tr>
                    <td>@item.PersonName @item.Family</td>
                    <td>@item.PersonCode</td>

                    <td>@item.projectName</td>

                                <div>
                                    <a class="btn btn-sm btn-outline-primary" asp-controller="Home" asp-action="detailsPerson" asp-route-id="@item.PersonID">جزئیات</a>

                                    <a class="btn btn-sm btn-outline-secondary" asp-controller="Report" asp-action="SingelGhrardad" asp-route-id="@item.PersonID">قرارداد</a>

                                    <a class="btn btn-sm btn-outline-danger" data-toggle="modal" data-target="#myModal@(count)">ترک کار</a>
                                    <!-- The Modal -->
                                    <div class="modal fade" id="myModal@(count)">
                                        <div class="modal-dialog ">
                                            <div class="modal-content">

                                                <!-- Modal Header -->
                                                <div class="modal-header">
                                                    <h4 class="modal-title">ثبت تاریخ ترک کار پرسنل</h4>

                                                </div>

                                                <!-- Modal body -->
                                                <div class="modal-body">

                                                    <form asp-controller="Home" asp-action="PersonTarkKar"  asp-route-PersonNewState="0" method="post">


                                                        <div class="row">

                                                            <div class="col-md-5 col-xs-12">
                                                                <label>تاریخ ترک کار</label>

                                                                <div class="input-group" style="padding-left:9px; padding-right:9px;">
                                                                    <div class="input-group-addon"
                                                                         style="border:1px solid gray; padding:6px">
                                                                        <span>  <i class="right fa fa-calendar"></i></span>
                                                                    </div>
                                                                    <input id="calender1" name="calender1" type="text" required autocomplete="off" class="form-control" />
                                                                    <input  name="id" value="@item.PersonID" class="form-control d-none" />

                                                                </div>

                                                            </div>

                                                        </div>


                                                        <button class="btn btn-dark mt-5" type="submit">ثبت تاریخ</button>
                                                    </form>
                                                </div>

                                                <!-- Modal footer -->
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-danger" data-dismiss="modal">بستن</button>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    @{count++;}
                                </div>
                            </div>

                        }



                    </td>

                </tr>

            }

更新： 如果你使用calender1@ (count)，尝试这样做：

$(function () {
            for (var i = 0; i <@(count); i++) {
                $('#calender1' + i).MdPersianDateTimePicker({ targetTextSelector: '#calender1' + i, });
            }
            
        })