在 ASP .NET 中动态添加 PartialView 时的验证问题

Question

我就在这里面临这个问题。我有一个 _ContactsPartial，当调用时，它会添加字段以动态地将联系人数据输入到患者的创建视图中。当仅显示一个联系人时一切都很好，但当尝试添加多个联系人时，它会验证每个字段，即使最后一个字段是正确的。

这是部分视图：

@model Vital365.Models.ContactModel
<div class="d-flex mb-2">
    <div class="me-2">
        <label for="Ddd">DDD</label>
        <input id="dddInput" type="number" class="form-control" asp-for="Ddd">
        <span asp-validation-for="Ddd" class="text-danger" />
    </div>
    <div class="me-2">
        <label for="PhoneNumber">Número</label>
        <input id="phoneNumberInput" type="number" class="form-control" asp-for="PhoneNumber">
        <span asp-validation-for="PhoneNumber" class="text-danger" />
    </div>
    <div>
        <label for="ContactName">Nome</label>
        <input id="contactNameInput" class="form-control" asp-for="ContactName">
        <span asp-validation-for="ContactName" class="text-danger" />
    </div>
    <div>
        <button id="deleteContact" type="button" class="btn btn-danger ms-2 mt-4"><i class="bi bi-trash"></i></button>
    </div>
</div>

并且使用ajax调用：

$(document).on('click', '#addPhoneContact', function (e) {
$.ajax({
    url: '/Patient/DisplayNewContact',
    success: function (partialView) {
        $('.ContactsFieldClass').append(partialView);
    }
   });
});

关于如何控制验证仅出现在真正无效的字段上有什么想法吗？

Answer 1

-> 首先，您已在布局中包含用于客户端验证的脚本。

代码：-

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery- 
 validate/1.19.3/jquery.validate.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation- 
 unobtrusive/3.2.12/jquery.validate.unobtrusive.min.js"></script>

-> 然后更新您的 PartialView，按照我的代码操作：-

@model Vital365.Models.ContactModel

@{
 var uniqueId = Guid.NewGuid().ToString(); // Generate a unique ID for 
 each instance of the partial view
 }

 <div class="d-flex mb-2">
 <div class="me-2">
    <label for="@($"Ddd_{uniqueId}")">DDD</label>
    <input id="@($"dddInput_{uniqueId}")" name="@($"Ddd_{uniqueId}")" 
     type="number" class="form-control" asp-for="Ddd">
    <span asp-validation-for="Ddd" class="text-danger" />
  </div>
  <div class="me-2">
    <label for="@($"PhoneNumber_{uniqueId}")">Número</label>
    <input id="@($"phoneNumberInput_{uniqueId}")" 
  name="@($"PhoneNumber_{uniqueId}")" type="number" class="form-control" 
  asp-for="PhoneNumber">
    <span asp-validation-for="PhoneNumber" class="text-danger" />
  </div>
 <div>
    <label for="@($"ContactName_{uniqueId}")">Nome</label>
    <input id="@($"contactNameInput_{uniqueId}")" 
 name="@($"ContactName_{uniqueId}")" class="form-control" asp- 
 for="ContactName">
    <span asp-validation-for="ContactName" class="text-danger" />
</div>
<div>
    <button type="button" class="btn btn-danger ms-2 mt-4 deleteContact"> 
     <i class="bi bi-trash"></i></button>
</div>

-> Ajax 代码：-

$(document).on('click', '#addPhoneContact', function (e) {
$.ajax({
    url: '/Patient/DisplayNewContact',
    success: function (partialView) {
        $('.ContactsFieldClass').append(partialView);
         var form = $('form'); // Assuming your form has only one form 
                             //element, adjust selector accordingly if not
        form.removeData('validator');
        form.removeData('unobtrusiveValidation');
        $.validator.unobtrusive.parse(form);
    }
 });
});