时间戳

首页 > 解决方案 > 我想使用相同的视图使用 MVC razor Engine 在不同的导航栏中显示不同的结果。我设计了一个使用 html 标签的页面

c# - 我想使用相同的视图使用 MVC razor Engine 在不同的导航栏中显示不同的结果。我设计了一个使用 html 标签的页面

问题描述

我设计了一个使用 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.
}

以上是我在 MVC 代码视图中使用的 HTML 代码。我的 Html 代码中有三个选项卡。在我的 Tab1 中：我有一个带有搜索按钮的文本框。我将文本框绑定到所需的模型属性。在我输入文本并点击搜索按钮后。它会调用一个 API 并给出包含或等于所需文本的列表。在我的控制器中，我使用了 [HttpPost] 属性。我在单击提交按钮时发布表单。

public IActionResult ViewName()
        {
            NameModel obj = new NameModel();
            return View("ViewName", obj);
        }
        [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 View("ViewName", model);

        }

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

tab2 包含表格。我如何将结果模型值绑定到它，因为它在同一个视图中。

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

标签： c#.netasp.net-core

解决方案

IMO，您可以使用 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>
}

2.邮寄方式：

[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);

    }

3.Partial View（位于/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>

推荐阅读