如何在同一视图中的 3 个不同视图模型下使用 3 个不同的数据表？

Question

我有一个包含 3 个单选按钮的视图页面。我有 3 个数据表和 3 个视图模型。当我点击搜索时，我只想要一个数据表来显示和显示数据 - 由单选按钮选择。

如果我选择单选按钮'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>

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

Answer 1

解决此问题的两种方法，

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

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

如果model.details.count()!=0 做你的循环等等。

关于部分视图的更多信息： https://docs.microsoft.com/en-us/aspnet/core/mvc/views/partial?view=aspnetcore-3.0

• 右键单击您的视图文件夹并添加部分视图。不要继承布局。 您的表格 html 放在这里。例如，将其命名为 _details。

• 为它创建一个控制器动作，它将返回部分视图

• 当您点击搜索时，您希望呈现正确的局部视图：

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

一大类选项：

public class AllVMData{

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

然后在执行该循环之前，在剃须刀上检查 Model.DetailsVM 是否为空等。