0

I am very new to ASP.Net Core and web-app development, this is my first project. I am trying to use a dropdown button that posts back onlick what button is pressed. Whatever is pressed is the action user want to do and I will update the displayed messages and labels in the webapp. Particularly I want to display a message with the action user chose using TempData, when the submit button is clicked. But the the message only shows up every other time. Meaning it only shows up the 2nd, 4th, 6th.. time I press the submit button. Here is the C# part of the code:

public class AdminModel : PageModel
    {   

        [TempData]
        public string Action { get; set; } = "";
        [TempData]
        public string DisplayMessage { get; set; } = "";
        public string DropDownMessage = "Actions";
        public string ChangeValueLabel = "Set Point to";
        public string CurrentPoint = "No User Selected";
        public void OnGet()
        {

        }
        public IActionResult OnPost()
        {
            // Call ProcessSwipe here with student id from card reader
            return Page();
        }
        public IActionResult OnPostSubmit()
        {
            // Call ProcessSwipe here with student id from card reader

            DisplayMessage = $"Action done with {Action}";
            return Page();
        }
        public IActionResult OnPostCheckBalance()
        {
            DropDownMessage = "Check Point Balances";

            ChangeValueLabel = "No Input Needed";

            CurrentPoint = "99";

            Action = "CheckBalance";

            return Page();
        }
        public IActionResult OnPostIncreasePoint()
        {
            DropDownMessage = "Increase/Award Points";

            ChangeValueLabel = "Increase Point By";

            Action = "IncreasePoint";

            return Page();
        }
        public IActionResult OnPostDecreasePoint()
        {
            DropDownMessage = "Decrease/Redeem Points";

            ChangeValueLabel = "Decrease Point by";

            Action = "DecreasePoint";

            return Page();
        }
        public IActionResult OnPostSetPoint()
        {
            DropDownMessage = "Set Point Balances";

            ChangeValueLabel = "Set Point to";

            Action = "SetPoint";

            return Page();
        }
        public IActionResult OnPostDeleteAccount()
        {
            DropDownMessage = "Delete Account";

            ChangeValueLabel = "No Input Needed";

            Action = "DeleteAccount";

            return Page();
        }
    }

The HTML/Bootstrap part

<!-- Content section -->
<!-- $('#datebox').val($(this).html());-->
    <div class="container-fluid">
        <h1>Welcome to Learning Factory Admin Page</h1>

        @{
            if (TempData.Peek("DisplayMessage") != null)
            {
                <h3>Message: @TempData.Peek("DisplayMessage")</h3>
            }
        }

        <div class="form-row text-left">
            <div class="col">
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownActionMenu"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span id="selected">@Model.DropDownMessage</span>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownActionMenu" role="menu">
                        <li>
                            <form asp-page-handler="CheckBalance" method="post">
                                <button class="btn btn-secondary" style="width:200px;" id="1" value="Check Point Balances">Check Point Balances</button>
                            </form>
                        </li>
                        <li>
                            <form asp-page-handler="IncreasePoint" method="post">
                                <button class="btn btn-secondary" style="width:200px;" id="2" value="Increase/Award Points">Increase/Award Points</button>
                            </form>
                        </li>
                        <li>
                            <form asp-page-handler="DecreasePoint" method="post">
                                <button class="btn btn-secondary" style="width:200px;" id="3" value="Decrease/Redeem Points">Decrease/Redeem Points</button>
                            </form>
                        </li>
                        <li>
                            <form asp-page-handler="SetPoint" method="post">
                                <button class="btn btn-secondary" style="width:200px;" id="4" value="Set Point Balance">Set Point Balance</button>
                            </form>
                        </li>
                        <li>
                            <form asp-page-handler="DeleteAccount" method="post">
                                <button class="btn btn-secondary" style="width:200px;" id="5" value="Delete Account">Delete Account</button>
                            </form>
                        </li>
                    </ul>
                </div>
                <form asp-page-handler="Submit" method="post">
                    <div class="row">
                        <label for="UIDSelect">Choose User Account to work on:</label>
                        <input id="UIDSelect" name="UIDSelect" type="text" placeholder="934191061" />
                        <label for="">Current Point total: @Model.CurrentPoint</label>
                    </div>
                    <div class="row">
                        <label for="ChangeValue">@Model.ChangeValueLabel:</label>
                        <input id="ChangeValue" name="ChangeValue" type="text" placeholder="Enter Value" />
                    </div>
                    <div class="row">
                        <button class="btn btn-primary" ID ="6" type="submit">Submit</button>
                        <button class="btn btn-primary" type="reset">Reset</button>
                    </div>
                </form>
            </div>
        </div>

    </div>

In the part of the code where I set DisplayMessage = $"Action done with {Action}";, the {Action} part of the message only appears every other click of the submit button, starting the second click. No message is shown on the first click.
The Action done with part of the message appears every time, except the first click.

Any help is appreciated.

  • Your code is not completely provided. I don't know how to change and display the `Action ` field in the view? I suggest that you provide the code comprehensively so that we can reproduce your problem. – LouraQ Mar 31 '20 at 06:51
  • Thanks for commenting, I have included all the code. – Ethan Chen Mar 31 '20 at 13:06

1 Answers1

0

Don't need to use TempData.Peek to get it, just use Model to get and display it.

And I advice you do not add form tags to each button in dropdown-menu, you just need to add the asp-page-handler attribute to the button, then place the submit's form tag outside all buttons.

Change page code like this:

<!-- Content section -->
<!-- $('#datebox').val($(this).html());-->
    <div class="container-fluid">
        <h1>Welcome to Learning Factory Admin Page</h1>

        @{
            if (Model.DisplayMessage != null)
            {
                <h3>Message: @Model.DisplayMessage</h3>
            }
            @*if (TempData.Peek("DisplayMessage") != null)
            {
                <h3>Message: @TempData.Peek("DisplayMessage")</h3>
            }*@
        }
    <form asp-page-handler="Submit" method="post">
        <div class="form-row text-left">
            <div class="col">
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownActionMenu"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span id="selected">@Model.DropDownMessage</span>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownActionMenu" role="menu">
                        <li>
                            <button class="btn btn-secondary" style="width:200px;" id="1" value="Check Point Balances" asp-page-handler="CheckBalance">Check Point Balances</button>

                        </li>
                        <li>

                            <button class="btn btn-secondary" style="width:200px;" id="2" value="Increase/Award Points" asp-page-handler="IncreasePoint">Increase/Award Points</button>

                        </li>
                        <li>

                            <button class="btn btn-secondary" style="width:200px;" id="3" value="Decrease/Redeem Points" asp-page-handler="DecreasePoint">Decrease/Redeem Points</button>

                        </li>
                        <li>

                            <button class="btn btn-secondary" style="width:200px;" id="4" value="Set Point Balance" asp-page-handler="SetPoint">Set Point Balance</button>

                        </li>
                        <li>

                            <button class="btn btn-secondary" style="width:200px;" id="5" value="Delete Account" asp-page-handler="DeleteAccount">Delete Account</button>

                        </li>
                    </ul>
                </div>

                <div class="row">
                    <label for="UIDSelect">Choose User Account to work on:</label>
                    <input id="UIDSelect" name="UIDSelect" type="text" placeholder="934191061" />
                    <label for="">Current Point total: @Model.CurrentPoint</label>
                </div>
                <div class="row">
                    <label for="ChangeValue">@Model.ChangeValueLabel:</label>
                    <input id="ChangeValue" name="ChangeValue" type="text" placeholder="Enter Value" />
                </div>
                <div class="row">
                    <button class="btn btn-primary" ID="6" type="submit">Submit</button>
                    <button class="btn btn-primary" type="reset">Reset</button>
                </div>

            </div>
        </div>
    </form>

</div>

Here is the result:

enter image description here

LouraQ
  • 6,443
  • 2
  • 6
  • 16