Asp.net mvc 如何使用viewmodel中的一个属性验证tabs插件中的多个文本框

我有两个标签。在每个选项卡中，我都有一个带有验证的文本框

@model WebApplication2.Models.MyViewModel

@{
    ViewBag.Title = "Test";
}

<h2>Test</h2>

<style>
    .tabs li {
        list-style: none;
        display: inline;
    }

    .tabs a {
        padding: 5px 10px;
        display: inline-block;
        background: #666;
        color: #fff;
        text-decoration: none;
    }

        .tabs a.active {
            background: #fff;
            color: #000;
        }
</style>


@using (Html.BeginForm())
{

    <ul class='tabs'>
        <li><a href='#tab1'>Tab 1</a></li>
        <li><a href='#tab2'>Tab 2</a></li>
    </ul>
    <div id='tab1'>
        <h3>Section 1</h3>
        @Html.TextBoxFor(m => m.FirstName)
        @Html.ValidationMessageFor(m => m.FirstName)
    </div>
    <div id='tab2'>
        <h3>Section 2</h3>
        @Html.TextBoxFor(m => m.FirstName)
        @Html.ValidationMessageFor(m => m.FirstName)
    </div>
    <input type="submit" value="Submit" />
}

@section Scripts{
    @Scripts.Render("~/bundles/jqueryval")
    <script>
        // Wait until the DOM has loaded before querying the document
        $(document).ready(function () {
            $('ul.tabs').each(function () {
                // For each set of tabs, we want to keep track of
                // which tab is active and it's associated content
                var $active, $content, $links = $(this).find('a');

                // If the location.hash matches one of the links, use that as the active tab.
                // If no match is found, use the first link as the initial active tab.
                $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
                $active.addClass('active');
                $content = $($active.attr('href'));

                // Hide the remaining content
                $links.not($active).each(function () {
                    $($(this).attr('href')).hide();
                });

                // Bind the click event handler
                $(this).on('click', 'a', function (e) {
                    // Make the old tab inactive.
                    $active.removeClass('active');
                    $content.hide();

                    // Update the variables with the new link and content
                    $active = $(this);
                    $content = $($(this).attr('href'));

                    // Make the tab active.
                    $active.addClass('active');
                    $content.show();

                    // Prevent the anchor's default click action
                    e.preventDefault();
                });
            });
        });
    </script>
}

视图模型：

public class MyViewModel
{
    [Required]
    public string FirstName { get; set; }

}

我想做的是对这两个文本框分别进行验证。也就是说，当用户单击第一个选项卡时，我希望能够验证第一个选项卡中的文本框，如果用户单击第二个选项卡，我希望验证第二个选项卡中的文本框

---

如何在viewmodel类中仅使用一个属性来执行此操作？想象一下有50个标签。我不想在我的viewmodel类中有50个属性。

是否可以让您的操作方法接受列表而不是简单的字符串？您可以编写一些JS，根据哪个选项卡处于活动状态，有选择地关闭/打开字段验证，并将其连接到选项卡激活事件中，或者创建自己的。然而，这里真正的问题是糟糕的设计。同一字段不应在50个选项卡中。如果该字段与所有选项卡共享，请将其从选项卡中取出，并仅将特定于选项卡的字段放在每个选项卡中。我不确定我是否了解您。。？但是是的，如果这是工作所必需的，可以让它接受一个列表。@ChrisPratt我明白你的意思。我有两个文本框firstname、lastname、address、zipcode和city，它们在四个选项卡中重复出现。对于不同选项卡中的所有四个文本框，我都使用@Html.TextBoxForm=>m.FirstName。这样做是否更好：@Html.TextBoxForm=>m.firstnametab 1、@Html.TextBoxForm=>m.firstnametab 2、@Html.TextBoxForm=>m.firstnametab 3和@Html.TextBoxForm=>m.firstnametab 4？然后用户提交表单，是否只需提交其中一个选项卡？如果不是，那你就大错特错了。

data-val="true" data-val-required="The FirstName field is required."

public class MyViewModel
{
    [Required]
    public string FirstName { get; set; }

}