Javascript （ASP.NET Core）如何在视图上更新视图组件

当我选择一个项目（ul、li）时， 我需要动态更新视图组件，但无法实现

如何修改代码

不要使用（控制器）“返回视图”方法

（部分代码） （chtml）

控制器

public String TestChane1()
{
    ViewBag.NowPay = "Card1";
    var Result = ViewBag.NowPay;
    return Result;
}

---

感谢您的回答

第一个解决方案

如果不想再次转到服务器，则必须在单独的div中呈现

每个

大小写，并使用

javascript

查看代码cshtml

<style>
.d-none, .hidden { display: none; }
</style>

<div>
    <ul class="nav nav-tabs">
        <li role="tab"> <a href="#" onclick=change('Card1');>1</a></li>
        <li role="tab"> <a href="#" onclick=change('Card2');>2</a></li>
    </ul>
</div>


<div role="tabpanel" class="tab-pane active">
    @{
        string item = ViewBag.NowPay;
    }

    <div id="Card1" class="cards @(item == "Card1" ? "" : "hidden d-none")">
        @await Component.InvokeAsync("DownloadConfig1", new { reconciliationConfig = Model });
    </div>

    <div id="Card2" class="cards @(item == "Card2" ? "" : "hidden d-none")">
        @await Component.InvokeAsync("DownloadConfig2", new { reconciliationConfig = Model });
    </div>
</div>

<script>
    function change(name) {
        $('.cards').addClass('hidden d-none'); // hide all cards
        $('#'+ name).removeClass('hidden d-none'); // show only one
    }
</script>

.d-none、.hidden{display:none；}




@{
字符串项=ViewBag.NowPay；
}
@wait Component.InvokeAsync（“DownloadConfig1”，new{reconciliationConfig=Model}）；
@wait Component.InvokeAsync（“DownloadConfig2”，new{reconciliationConfig=Model}）；
功能更改（名称）{
$（'.cards'）.addClass（'hidded-none'）；//隐藏所有卡
$（'#'+name）.removeClass（'hidded-none'）；//只显示一个
}

当前未成功 cshtml

.d-none、.hidden{display:none；}




@wait Component.InvokeAsync（“DownloadConfig1”，new{reconciliationConfig=Model}）；
@wait Component.InvokeAsync（“DownloadConfig2”，new{reconciliationConfig=Model}）；
函数changeCard1（）{
$（'Card1'）.removeClass（'d-none'）；//仅显示一个
$（'Card2'）.addClass（'d-none'）；
}
函数changeCard2（）{
$（'Card1'）.addClass（'d-none'）；//仅显示一个
$（'Card2'）.removeClass（'d-none'）；//仅显示一个
}

Switch语句将不会在客户端重新编译，在服务器端编译后必须返回部分视图。可以使用“$（'#（div's id）））.html（（code））；”方法？是的，但首先在服务器端呈现

Switch

，只返回

string

”.html（）似乎失败了，我尝试了下面的答案“查看组件”的内容是一种形式，这似乎更适合下面的答案没有使用“查看包”的答案？QAQ

ViewBag.NowPay

用于在页面加载后显示默认显示的Div，您可以将其删除并等待用户单击我更新了下面的代码，但未成功显示

changeCard2

未定义“功能”，未成功显示

选择器

错误，请在

$（#Card1'）

和

$（#Card2'）

对不起，非常感谢。它可以成功运行。

public String TestChane1()
{
    ViewBag.NowPay = "Card1";
    var Result = ViewBag.NowPay;
    return Result;
}

<style>
.d-none, .hidden { display: none; }
</style>

<div>
    <ul class="nav nav-tabs">
        <li role="tab"> <a href="#" onclick=change('Card1');>1</a></li>
        <li role="tab"> <a href="#" onclick=change('Card2');>2</a></li>
    </ul>
</div>


<div role="tabpanel" class="tab-pane active">
    @{
        string item = ViewBag.NowPay;
    }

    <div id="Card1" class="cards @(item == "Card1" ? "" : "hidden d-none")">
        @await Component.InvokeAsync("DownloadConfig1", new { reconciliationConfig = Model });
    </div>

    <div id="Card2" class="cards @(item == "Card2" ? "" : "hidden d-none")">
        @await Component.InvokeAsync("DownloadConfig2", new { reconciliationConfig = Model });
    </div>
</div>

<script>
    function change(name) {
        $('.cards').addClass('hidden d-none'); // hide all cards
        $('#'+ name).removeClass('hidden d-none'); // show only one
    }
</script>

<style>
.d-none, .hidden { display: none; }
</style>

<div>
    <ul class="nav nav-tabs">
         <li role="tab"> <a href="#" onclick=changeCard1();>1</a></li>
         <li role="tab"> <a href="#" onclick=changeCard2();>2</a></li>
    </ul>
</div>

<div role="tabpanel" class="tab-pane active">
    <div id="Card1" class="d-none">
        @await Component.InvokeAsync("DownloadConfig1", new { reconciliationConfig = Model });
    </div>

    <div id="Card2" class="d-none">
        @await Component.InvokeAsync("DownloadConfig2", new { reconciliationConfig = Model });
    </div>
</div>

<script>
function changeCard1() {
      $('Card1').removeClass('d-none');  // show only one
      $('Card2').addClass('d-none');
                       }

function changeCard2() {
      $('Card1').addClass('d-none');  // show only one
      $('Card2').removeClass('d-none');  // show only one
                       }
</script>