C# 我想使用MVC razor引擎使用相同的视图在不同的导航栏中显示不同的结果

我用html标签设计了一个页面。我在MVC应用程序的视图中使用了相同的代码。该页面有三个选项卡tab1、tab2和tab3

@using (Html.BeginForm("ViewName", "Home", FormMethod.Post))
{
 <div class="col">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="tab">Search</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link tab" id="tab2"  href="#tab2"</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link tab" id="tab3">Details</a>
                </li>
            </ul>
        </div>
 <div class="col-auto text-right">
         @Html.TextBoxFor(Model => Model.Name) <!--This is my text box to enter the text.-->

          <input type="submit" class="btn btn-primary" value="Search" name="Search" action="ViewName"><!--On submitting it, it will hit the "test" action method in the Controller.-->

        </div>


 <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="results-tab">
            <table id="Table" class="table" style="width:100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Name1</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>name2</td>
                        <td>name2</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="tab-pane fade" id="details" role="tabpanel" aria-labelledby="details-tab">Details</div>-- the above is the table to which i want to bind the data and show the result and it is in the same view.
}

现在我想在Tab2中以相同视图中的网格格式显示结果

tab2包含该表。由于结果模型值位于同一视图中，如何将其绑定到它

我不想使用JQuery。我想使用任何.net核心概念来实现它。 有人能告诉我怎么做吗。

解决方案1：不同视图中包含的局部视图 我会选择另一种实现方式。看起来视图之间确实不同，每个选项卡需要不同的模型这一事实告诉我同样的道理

如果是这样的话

其主要思想是将导航栏创建为可重用的局部视图，并将其包含在您要使用的每个其他视图（即每个其他选项卡）中

解决方案2：使用jquery选项 MVC使用html/css和javascript呈现客户端项目。使用JQuery并不是非MVC实践，事实上这是一种常见的实践

解决方案3：使用razor逻辑 您可以在剃须刀中添加下面这样的检查，并拥有一个型号

@if (Model.Tab == 1)
{
 <div class="col-auto text-right">
         @Html.TextBoxFor(Model => Model.Name) <!--This is my text box to enter the text.-->

          <input type="submit" class="btn btn-primary" value="Search" name="Search" 
    action="ViewName"><!--On submitting it, it will hit the "test" action method in the 
    Controller.-->
}
        </div>

虽然我已经看到了很多，但它有很大的缺点

无法应用整体验证

您的代码在单个函数中会变得非常复杂。它违反了多个原则，无法轻松进行单元测试

---

在我看来，您可以使用ajax发布名称，并返回位于Tab2内容的局部视图，然后将结果显示到主视图

请参阅以下步骤：

1.ViewName.cshtml

@model NameModel
<div class="col">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" href="#tab" role="tab" data-toggle="tab">Search</a>
        </li>
        <li class="nav-item">
            <a class="nav-link tab" href="#tab2" role="tab" data-toggle="tab">Grid</a>
        </li>
        <li class="nav-item">
            <a class="nav-link tab" href="#tab3" role="tab" data-toggle="tab">Details</a>
        </li>
    </ul>
</div>

<div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active" id="tab">
        <div class="col-auto text-right">
            <input asp-for="@Model.Name" id="myText" />

            <input type="button" class="btn btn-primary" onclick="myFunction()" value="Search" id="Search" name="Search" /><!--On submitting it, it will hit the "test" action method in the Controller.-->

        </div>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="tab2">
        <div id="Tab2Content">

        </div>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="tab3">ccc</div>
</div>

@section Scripts{
    <script>
        function myFunction() {
            var name = document.getElementById("myText").value;

            $.ajax({
                type: 'POST',
                url: '/Home/ViewName',

                data: { name: name },
                error: function (result) {
                    console.log("error");
                },
                success: function (result) {
                    $("#Tab2Content").html(result);
                }
            });
        }
    </script>
}

3.局部视图（位于

/Views/Shared/_Tab2PartialView.cshtml

）以显示网格

@model tab2model
@*or @model List<tab2model>*@
@*grid view*@
<table id="Table" class="table" style="width:100%">
       <thead>
           <tr>
                <th>Name</th>
                <th>Name1</th>
           </tr>
        </thead>
        <tbody>
                <tr>
                    <td>name2</td>
                    <td>name2</td>
                </tr>
        </tbody>
 </table>

@model选项卡2模型
@*或@model List*@
@*网格视图*@
名称
名称1
姓名2
姓名2

Hi Xing，我正在尝试使用RenderPartialAsync加载我的部分视图。使用它后，页面不会加载。这是一个错误“页面不工作”。如何在不将页面绑定到任何数据的情况下呈现页面，并且使用RenderPartialAsync呈现部分页面View@PoojaSharma不理解没有代码的问题。可能参考，但这种方式无法帮助您在提交表单后在同一视图中显示。我的解决方案是使用js渲染局部视图。嗨，Athanasios，我正在使用RenderPartialAsync渲染网格。但使用后，它抛出错误“页面不工作”。它不会加载页面。即使在使用RenderPartialAsync并且没有将任何数据绑定到主视图之后，如何渲染主视图。

@model NameModel
<div class="col">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" href="#tab" role="tab" data-toggle="tab">Search</a>
        </li>
        <li class="nav-item">
            <a class="nav-link tab" href="#tab2" role="tab" data-toggle="tab">Grid</a>
        </li>
        <li class="nav-item">
            <a class="nav-link tab" href="#tab3" role="tab" data-toggle="tab">Details</a>
        </li>
    </ul>
</div>

<div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active" id="tab">
        <div class="col-auto text-right">
            <input asp-for="@Model.Name" id="myText" />

            <input type="button" class="btn btn-primary" onclick="myFunction()" value="Search" id="Search" name="Search" /><!--On submitting it, it will hit the "test" action method in the Controller.-->

        </div>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="tab2">
        <div id="Tab2Content">

        </div>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="tab3">ccc</div>
</div>

@section Scripts{
    <script>
        function myFunction() {
            var name = document.getElementById("myText").value;

            $.ajax({
                type: 'POST',
                url: '/Home/ViewName',

                data: { name: name },
                error: function (result) {
                    console.log("error");
                },
                success: function (result) {
                    $("#Tab2Content").html(result);
                }
            });
        }
    </script>
}

[HttpPost]
public IActionResult ViewName(NameModel obj1)
    {
        NameModel model = new NameModel();
        -- Call the api and take out the Json response.
        --Bind the json response to the Model.
        --Send the model back to the same view but different tab.

        return PartialView("_Tab2PartialView", tab2model);

    }

@model tab2model
@*or @model List<tab2model>*@
@*grid view*@
<table id="Table" class="table" style="width:100%">
       <thead>
           <tr>
                <th>Name</th>
                <th>Name1</th>
           </tr>
        </thead>
        <tbody>
                <tr>
                    <td>name2</td>
                    <td>name2</td>
                </tr>
        </tbody>
 </table>