ASP.Net 核心 MVC - 验证摘要不适用于 bootstrap 选项卡和动态加载的内容

Question

如何让动态加载的选项卡在 ASP.Net Core MVC 中工作？

我有一个简单的 Index.cshtml，它使用 bootstrap 标签从页面上的 a 标签创建两个标签。（为了测试选项，我首先从 https://qawithexperts.com/article/asp.net/bootstrap-tabs-with-dynamic-content-loading-in-aspnet-mvc/176 复制）
每个选项卡上都有一个点击事件，使用$.ajax()调用控制器，然后设置相应的div.[=38=的html ]
我有一个只有一个字段的模型，一个字符串是必需的。
我有 Visual Studio 创建的创建视图。
当我运行它并单击第一个选项卡时，控制器 returns PartialView("FirstTabCreate") 并加载到 div 中，一切看起来都很棒。
问题出在单击“创建”按钮时。
控制器方法检查 ModelState 上是否为 IsValid。如果没有，这就是我运行遇到问题的地方。如果我 return 局部视图和传入的模型，我会按预期看到验证错误，但是因为我 return 编辑了局部视图，所以我丢失了标签。如果我 return 主视图（索引）然后 javascript 重新加载我的部分视图并在那时丢失了 ModelState。

我不确定要 return 做什么才能使其有效。我在网上看到很多使用动态加载选项卡的示例，但是 none 其中有模型或验证。

代码如下：索引页

@model FirstTab
<!-- Tab Buttons -->
<ul id="tabstrip" class="nav nav-tabs" role="tablist">
    <li class="active">
        <a href="#FirstTab" role="tab" data-toggle="tab">Submission</a>
    </li>
    <li>
        <a href="#SecondTab" role="tab" data-toggle="tab">Search</a>
    </li>
</ul>

<!-- Tab Content Containers -->
<div class="tab-content">
    <div class="tab-pane active" id="FirstTab">
       
    </div>
    <div class="tab-pane fade" id="SecondTab">

    </div>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script>
    $('#tabstrip a').click(function (e) {
        e.preventDefault();
        var tabID = $(this).attr("href").substr(1);
        $(".tab-pane").each(function () {
            console.log("clearing " + $(this).attr("id") + " tab");
            $(this).empty();
        });

        $.ajax({
            url: "/@ViewContext.RouteData.Values["controller"]/" + tabID,
            cache: false,
            type: "get",
            dataType: "html",
            success: function (result) {
                $("#" + tabID).html(result);
            }

        });
        $(this).tab('show');
    });

    $(document).ready(function () {
        $('#tabstrip a')[0].click();
    });
</script>

FirstTabCreate 视图

@model WebApplication1.Models.FirstTab

<h4>FirstTab</h4>
<hr />
<div class="row">
    <div class="col-md-4">
       <form asp-action="FirstTabCreate">        
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="FirstName" class="control-label"></label>
                <input asp-for="FirstName" class="form-control" />
                <span asp-validation-for="FirstName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

型号

using System.ComponentModel.DataAnnotations;

namespace WebApplication1.Models
{
    public class FirstTab
    {
        [Required()]
        public string FirstName { get; set; }
    }
}

控制器

using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using System.Diagnostics;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {       
        public IActionResult Index()
        {
            return View();
        }

        public ActionResult FirstTab()
        {
            return PartialView("FirstTabCreate");
        }

        public ActionResult FirstTabCreate(FirstTab model)
        {
            if (!ModelState.IsValid)
            {
                return View("FirstTabCreate",  model);
            }
            return Content("Success");
        }

        public ActionResult SecondTab()
        {
            return PartialView("_SecondTab");
        }
    }
}

Answer 1

尝试在您的代码中添加 jquery 验证脚本删除这个

<script src="~/lib/jquery/dist/jquery.min.js"></script>

并改用它

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Answer 2

我不喜欢它，但为了让它正常工作，当我单击“保存”时，我在控制器方法中检查 ModelState 是否有效。如果没有，我将键和值放入自定义 class 列表中，然后将该列表放入缓存中。当加载子部分视图时，它会检查缓存中是否有任何内容，如果有，则将其解析出来并使用 ModelState.AddModelError().

它不是很漂亮，但它确实允许验证工作。

Answer 3

将以下代码添加到您的@section 脚本

@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
<script>
    $.validator.setDefaults({ 
        ignore: [] 
    });
</script>

}

注意：不要在$(document).ready()

里面添加上面的内容

ASP.Net 核心 MVC - 验证摘要不适用于 bootstrap 选项卡和动态加载的内容

ASP.Net Core MVC - Validation Summary not working with bootstrap tabs and dynamically loaded content

asp.net

model-view-controller

tabs

loaded