CODEWITHSUNDEEP
javascriptjqueryasp.net-core
JunJia Huang
JunJia Huang

Reputation: 119

(ASP.NET Core) How to update view component on view

When I select a item (ul,li), I need to update the view component dynamically,but cannot achieve.

How do I modify the code ?

Do not use (Controller)"return view" method

(Partial code) (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>

(script)

function change1() {

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

        }

    })
}

Controller

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

Thanks for answer

Upvotes: 1

Views: 1627

Answers (2)

JunJia Huang
JunJia Huang

Reputation: 119

Not currently successful 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>

Upvotes: 1

Abdelrahman Gobarah
Abdelrahman Gobarah

Reputation: 1589

First Solution

if you don't want to go again to server, you have to render each case in separate div and show/hide with javascript

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

Upvotes: 1

Related Questions