如何在一页中循环多个表单并在.NET core mvc中保留相同的提交按钮？

Question

我正在构建一个 asp.net mvc web 应用程序，使用剃须刀页面让事情变得更容易，但由于我的 UI 设计，我遇到了一些障碍。

我需要有多个表单可以由用户在引导导航元素中循环浏览。这些表单都是独一无二的，但它们在右侧的单独元素中都有一个“cmets”元素（文本框和按钮），用作表单的提交按钮。

现在，我同时拥有“卡片”、rfi 和知识库，它们都采用 cmets 元素的一种形式。当用户在 cmets 元素上单击提交时，将同时提交卡片、rfi 和知识库。我需要用户在单击提交表单时提交的当前表单。有没有办法做到这一点？我应该使用局部视图吗？

@using (Html.BeginForm())
{
    <!--<div asp-validation-summary="All"></div>-->
    <div class="row">
        <div class="container col-sm-8">
            <div class="card form-nav-bar">
                <ul class="nav nav-pills">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="pill" href="#rfi">RFI</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="pill" href="#kBase">Knowledge Base</a>
                    </li>
                </ul>
            </div>
            <div class="tab-content">
                <!--RFI card-->
                <div id="rfi" class="card container box-shadow tab-pane active">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-12">
                                <h4>
                                    Consumer Information:
                                </h4>
                            </div>
                            <div class="field col-sm-4">
                                @Html.EditorFor(x => x.RFIModel.FirstName, new { htmlAttributes = new { placeholder = " " } })
                                @Html.LabelFor(x => x.RFIModel.FirstName)
                                @Html.ValidationMessageFor(x => x.RFIModel.FirstName, "", new { @class = "text-danger" })
                                . . .
                            </div>
                        </div>
                    </div>
                </div>
                <!--Knowledge Base card-->
                <div id="kBase" class="card container tab-pane">
                    <div class="card-body">
                        . . .
                    </div>
                </div>
            </div>
        </div>

        <!--Summary Modal-->
        <div class="container col-sm-4" role="dialog" id="Comments-Modal">
            <div class="modal-content box-shadow">
                <div class="modal-header">
                    <h5 class="modal-title">Summary</h5>
                </div>
                <div class="modal-body">
                    <div class="md-form">
                        <!--<label for="Comments"> </label>
                            <textarea type="text" id="Comments" class="md-textarea form-control" mdbInput></textarea>-->
                        @Html.LabelFor(x => x.RFIModel.Comments)
                        @Html.TextAreaFor(x => x.RFIModel.Comments, new { htmlAttributes = new { placeholder = " ", type = "text" }, @class = "md-textarea form-control" })
                        @Html.ValidationMessageFor(x => x.RFIModel.Comments, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>

    </div>
}

Answer 1

是的，我认为你可以使用js和ajax来动态引用局部视图：

@using (Html.BeginForm())
{
    <!--<div asp-validation-summary="All"></div>-->
    <div class="row">
        <div class="container col-sm-8">
            <div class="card form-nav-bar">
                <ul class="nav nav-pills">
                    <li class="nav-item">
                        <a id="rfiLink" class="nav-link active" data-toggle="pill" href="#rfi">RFI</a>
                    </li>
                    <li class="nav-item">
                        <a id="kBaseLink" class="nav-link" data-toggle="pill" href="#kBase">Knowledge Base</a>
                    </li>
                </ul>
            </div>
            <div class="tab-content">
                <div id="rfi" class="card container box-shadow tab-pane active">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-12">
                                <h4>
                                    Consumer Information:
                                </h4>
                            </div>
                            <div class="field col-sm-4">
                                @Html.EditorFor(x => x.RFIModel.FirstName, new { htmlAttributes = new { placeholder = " " } })
                                @Html.LabelFor(x => x.RFIModel.FirstName)
                                @Html.ValidationMessageFor(x => x.RFIModel.FirstName, "", new { @class = "text-danger" })
                                . . .
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--Summary Modal-->
        <div class="container col-sm-4" role="dialog" id="Comments-Modal">
            <div class="modal-content box-shadow">
                <div class="modal-header">
                    <h5 class="modal-title">Summary</h5>
                </div>
                <div class="modal-body">
                    <div class="md-form">
                        <!--<label for="Comments"> </label>
                            <textarea type="text" id="Comments" class="md-textarea form-control" mdbInput></textarea>-->
                        @Html.LabelFor(x => x.RFIModel.Comments)
                        @Html.TextAreaFor(x => x.RFIModel.Comments, new { htmlAttributes = new { placeholder = " ", type = "text" }, @class = "md-textarea form-control" })
                        @Html.ValidationMessageFor(x => x.RFIModel.Comments, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>

    </div>
}

@section scripts{ 
<script>
    $("#rfiLink").click(function () {
        $.ajax({
            type: "get",
            url: "Home/GetRFI",
            success: function (data) {
                $(".tab-content").empty();
                $(".tab-content").html(data);
            }
        })
    })

    $("#kBaseLink").click(function () {
        $.ajax({
            type: "get",
            url: "Home/GetkBase",
            success: function (data) {
                $(".tab-content").empty();
                $(".tab-content").html(data);
            }
        })
    })
</script>
}

在控制器中定义相应的方法返回局部视图：

public IActionResult GetRFI()
{
    return PartialView();
}

public IActionResult GetkBase()
{
    return PartialView();
}