如何在同一視圖中的 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 新手。 我收到一條消息，不能在同一個視圖中使用多個視圖模型。 但是如何解決這個問題，我需要在單擊搜索按鈕后從 controller 獲取數據表的數據。 到目前為止，我只熟悉單視圖模型返回。 要顯示和隱藏數據表，我們可以使用 javascript 嗎？ 如何解決這個問題？

Answer 1

解決此問題的 2 種方法，

選項 1. 將 3 個循環分成 3 個部分視圖，並在搜索時加載您需要的部分。

選項 2. 創建一個包含詳細信息、聯系人和數據的視圖 model class。

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

有關部分視圖的更多信息： https://docs.microsoft.com/en-us/aspnet/core/mvc/views/partial?view=aspnetcore-3.0

• 右鍵單擊您的視圖文件夾並添加部分視圖。 不要繼承布局。 你的 html 放在這里。 例如，將其命名為 _details。

• 為它創建一個 controller 動作，它將返回部分視圖

• 當您單擊搜索時，您想要呈現正確的局部視圖：

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

一個大的 class 選項：

public class AllVMData{

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

然后在 razor 上檢查Model.DetailsVM是 null 等，然后再執行該循環。