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

问题描述

如何让动态加载的标签页在 ASP.Net Core MVC 中工作？

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

我不确定要返回什么以使其有效。我在网上看到很多使用动态加载选项卡的例子，但没有一个有模型或验证。

代码如下： 索引页

@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>

FirstTab 创建视图

@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");
        }
    }
}

解决方法

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

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

改用这个

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

,

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

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