javascript - 如何在同一 View 的3个不同 View 模型下使用3个不同的数据表？

Question

我有一个包含 3 个单选按钮的 View 页面。我有 3 个数据表和 3 个 View 模型。当我单击搜索时，我只想显示一个数据表并显示数据 - 这是通过单选按钮选择的。

如果我选择单选按钮“B”，则在单击搜索后，需要显示我的第二个数据表，必须隐藏第一个和第三个表。

我尝试过的代码:

对于单选按钮:

 <div class="row">
    <div class="col-md-4  col-lg-4">
        <label class="radio-inline">
            @Html.RadioButton("RBData", "true", new { @checked = true }) Data 1
        </label>
    </div>
    <div class="col-md-4  col-lg-4">
        <label class="radio-inline">
            @Html.RadioButton("RBData", "true", new { @checked = true }) Data 2
        </label>
    </div>
    <div class="col-md-4  col-lg-4">
        <label class="radio-inline">
            @Html.RadioButton("RBData", "true", new { @checked = true }) Data 3
        </label>
    </div>
</div>

对于 3 个数据表:

@model IEnumerable<ViewModel.DetailsVM>
<div class="row">
<div class="col-md-12 col-sm-12 datagrid">
<table cellspacing="1" cellpadding="2" style="width:100%" id="table1" class="table table-striped table-hover table-bordered table-hd">
<thead>
    <tr class="gridheader">
        <td style="width: 25%;" >value 1</td>
        <td style="width: 25%;" >value 2</td>
        <td style="width: 25%;" >value 3</td>
        <td style="width: 25%;" >value 4</td>               
    </tr>
</thead>
<tbody>
    @if (Model != null)
{
foreach (var m in Model)
{
    <tr>
        <td>@Html.DisplayFor(modelItem => m.value1)</td>
        <td>@Html.DisplayFor(modelItem => m.value2)</td>
        <td>@Html.DisplayFor(modelItem => m.value3)</td>
        <td>@Html.DisplayFor(modelItem => m.value4)</td>
        </tr>
}
}
</tbody>
</table>
</div>
</div>
@model IEnumerable<ViewModel.ContactsVM>
<div class="row">
<div class="col-md-12 col-sm-12 datagrid">
<table cellspacing="1" cellpadding="2" style="width:100%" id="table2" class="table table-striped table-hover table-bordered table-hd">
<thead>
    <tr class="gridheader">
        <td style="width: 25%;" >value 1</td>
        <td style="width: 25%;" >value 2</td>
        <td style="width: 25%;" >value 3</td>
        <td style="width: 25%;" >value 4</td>               
    </tr>
</thead>
<tbody>
    @if (Model != null)
{
foreach (var m in Model)
{
    <tr>
        <td>@Html.DisplayFor(modelItem => m.value1)</td>
        <td>@Html.DisplayFor(modelItem => m.value2)</td>
        <td>@Html.DisplayFor(modelItem => m.value3)</td>
        <td>@Html.DisplayFor(modelItem => m.value4)</td>
        </tr>
}
}
</tbody>
</table>
</div>
</div>
@model IEnumerable<ViewModel.DataVM>
<div class="row">
<div class="col-md-12 col-sm-12 datagrid">
<table cellspacing="1" cellpadding="2" style="width:100%" id="table3" class="table table-striped table-hover table-bordered table-hd">
<thead>
    <tr class="gridheader">
        <td style="width: 25%;" >value 1</td>
        <td style="width: 25%;" >value 2</td>
        <td style="width: 25%;" >value 3</td>
        <td style="width: 25%;" >value 4</td>               
    </tr>
</thead>
<tbody>
    @if (Model != null)
{
foreach (var m in Model)
{
    <tr>
        <td>@Html.DisplayFor(modelItem => m.value1)</td>
        <td>@Html.DisplayFor(modelItem => m.value2)</td>
        <td>@Html.DisplayFor(modelItem => m.value3)</td>
        <td>@Html.DisplayFor(modelItem => m.value4)</td>
        </tr>
}
}
</tbody>
</table>
</div>
</div>

以及搜索按钮:

 <div class="btn-group">
     <button id="btnSearch" type="submit" name="btnSearch" class="btn btn-block btn-success btn-flat"><span class="hide-on-mobile">Search </span><i class="fa fa-search"></i></button>
 </div>

我是使用不同 View 模型的 MVC 新手。我收到一条消息，同一 View 中不能使用多个 View 模型。但如何解决这个问题，我需要在单击搜索按钮后从 Controller 获取数据表的数据。到目前为止，我只熟悉单一 View 模型返回。要显示和隐藏数据表，我们可以使用javascript吗？如何解决这个问题？

Answer 1

解决这个问题的两种方法，

选项 1. 将 3 个循环分成 3 个部分 View ，并在搜索时加载您需要的 View 。

选项 2. 创建一个包含详细信息、联系人和数据的 View 模型类。

如果model.details.count()!=0执行循环等

有关部分 View 的更多信息: https://learn.microsoft.com/en-us/aspnet/core/mvc/views/partial?view=aspnetcore-3.0

• 右键单击您的 View 文件夹并添加部分 View 。不继承布局。 您的表格 html 位于此处。例如将其命名为_details。

• 为其创建一个 Controller 操作，它将返回部分 View

• 当您单击搜索时，您希望呈现正确的部分 View :

  @{ wait Html.RenderPartialAsync("_details");//或联系人等。 }

一大类选项:

public class AllVMData{

public class DetailsVM{get;set;}
public class DataVM{get;set;}
public class ContactsVM{get;set;}
}

然后在执行该循环之前，在 Razor 上检查 Model.DetailsVM 是否为 null 等。