ASP.NET 核心 MVC 按钮可见性

Question

Hiding multiple buttons I previously added to table cells. Is it possible to sequentially make it visible with a single button control? How can I do this with c#?

There are educational contents such as layout, html, css on the web but I could not find anything related to what I wanted to do. How can I solve this problem?

Answer 1

If you want to do it with c#,when click add button,you need to pass the data you want to pass the amount you want to show to action.Here is a demo:

View(TestTable.cshtml):

<table>
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
        </tr>
    </thead>
    <tbody>
        @if (Model.Amount > 0)
        {
            var count = 0;
            @for (var i = 0; i < Model.Amount / 5 + 1; i++)
            {
                <tr>
                    @for (var j = 0; j < 5; j++)
                    {
                        count++;
                        if (count <=Model.Amount&&count<=Model.Buttons.Count)
                        {
                            <th><button>@Model.Buttons[5 * i + j]</button></th>
                        }
                        else
                        {
                            break;
                        }

                    }
                </tr>
            }
        }

    </tbody>
</table>
<form method="post">
    <input hidden name="Amount" value="@Model.Amount">
    <input hidden name="Add" value="1">
    <button>Add</button>
</form>

Action:

public IActionResult TestTable(TableModel t)
        {
            List<string> l = new List<string> { "b0", "b1", "b2", "b3", "b4", "b5" };
            
            TableModel table = new TableModel { Buttons = l ,Amount=0,Add=0};
            if (t.Add == 1 && t.Amount >= 0) {
                table.Amount = ++t.Amount;
            }
                return View(table);
        }

Model:

public class TableModel {
        public List<string> Buttons { get; set; }
        public int Amount { get; set; }
        public int Add { get; set; }
    }

result: