(ASP. NET Core) Как обновить компонент представления при просмотре

Question

Когда я выбираю элемент (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) {

        }

    })
}

Контроллер

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

Спасибо за ответ

Answer 1

Не в настоящее время успешно cs html

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

Answer 2

Первое решение

Если вы не хотите снова go на сервер, вы должны отобразить each case в отдельном 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>