(ASP.NET Core) 如何在视图上更新视图组件

Question

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

如何修改代码？

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

(部分代码) (chtml)

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


<div role="tabpanel" class="tab-pane active">
    @{
        string item = ViewBag.NowPay;
        switch (item)
        {
            case "Card1":
                @await Component.InvokeAsync("DownloadConfig1", new { reconciliationConfig = Model });
                break;
            case "Card2":
                @await Component.InvokeAsync("DownloadConfig2", new { reconciliationConfig = Model });
                break;
            default:
                break;
        }
    }
</div>

（脚本）

function change1() {

    $.ajax({
        type: 'POST',
        url: '/ReconciliationConfig/TestChane1',
        success: function (data) {

        }

    })
}

Controller

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

谢谢解答

Answer 1

第一个解决方案

如果您不想再次将 go 发送到服务器，则必须在单独的 div 中呈现each案例并使用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>

Answer 2

当前不成功的cshtml

<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>