Want to display a value of a loop outside of the loop as a heading in Razor pages

Question

I want to display @s.CARDNAME that is used in the for each loop inside the else statement outside the loop as a heading:

    <div><h4 style="text-align:center; margin-bottom:20px;">WELCOME <span id="UserName">@ViewData["0"]</span> </h4> </div>

Razor Page Code

<div class="container">
    <div><h4 style="text-align:center; margin-bottom:20px;">WELCOME <span id="UserName">@ViewData["0"]</span> </h4> </div>
    
    
    @if ((Convert.ToInt32(ViewData["hascard"])) == 2)
    {
        <h1>@ViewData["message"]</h1>
    }
    else
    {
        <div class="Debit-Card-Boxes">
            @foreach (var s in ViewData["card"] as IEnumerable<DebitCardListingResponeDTOCardInfo>)
            {

                
                <div class="Debit-Card">

                    <div class="credit-card">
                        <img class="Abl-Logo" src="~/images/ABL-Logo.webp" />
                        <div class="chip"><img src="~/images/chip-logo-black-and-white.png" alt="chip"></div>


                        <div class="numbers">@s.ACCOUNTNUMBER</div>
                        <div class="name-and-expiry">
                            <span>@s.CARDNAME</span>
                            <span>@s.CARDEXPIRYDATE</span>
                        </div>


                    </div>

                    <a class="activatebtn" href="#modal">Activate</a>

                    <div class="modal" id="modal" tabindex="1">
                        <a href="#" class="modal__overlay" aria-label="Close modal"></a>
                        <div class="modal__content">
                            <a href="#" class="modal__close" aria-label="Close modal">&times;</a>



                            <h1 id="genotpheading">OTP Generation</h1>



                            <table border="0" cellpadding="3" cellspacing="0">
                                <tr>
                                    <td>
                                        Pin:
                                    </td>
                                    <td>
                                        <input type="password" id="txtPin" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Confirm Pin:
                                    </td>
                                    <td>
                                        <input type="password" id="txtConfirmPin" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                    </td>
                                    <td>
                                        <input type="button" id="btnSubmit" value="Submit" />
                                    </td>
                                </tr>
                            </table>

                        </div>

                        
                    </div>

                </div>

            }
        </div>
    }

Answer 1

I suppose @s.CARDNAME is the same for all records, right? if that is not the case you will have to decide which cardname to use since there are many. Anyway if they are the same and you can't change your DTO to separate this property from an IEnumerable.

You can simply cast your viewdata item to IEnumrable and show the first(or last) item's cardname like

<h1>Your Card: @(((IEnumerable<DebitCardListingResponeDTOCardInfo>)ViewData["card"]).First().CARDNAME)</h1>

also, review this dotnetfiddle for a working example

P.S: You can also .Last() simply use any function of LINQ including ElementAt as you wish

Answer 2

Try to use the following code:

<div><h4 style="text-align:center; margin-bottom:20px;">WELCOME <span id="UserName">@(((List<Index3Model>) ViewData["card"])[0].CARDNAME)</span> </h4> </div>