Bootstrap / ASP. NET Core 3.1: кнопка «Отправить» не обновляет страницу сразу, а только при каждом нажатии - PullRequest
0 голосов
/ 30 марта 2020

Я очень новичок в ASP. Net Разработка ядра и веб-приложений, это мой первый проект. Я пытаюсь использовать выпадающую кнопку, которая отправляет сообщение о том, какая кнопка нажата. Что бы ни нажималось, это действие, которое пользователь хочет выполнить, и я обновлю отображаемые сообщения и метки в веб-приложении. В частности, я хочу отобразить сообщение с действием, которое пользователь выбрал, используя TempData, когда нажата кнопка отправки. Но сообщение появляется только через раз. Это означает, что он появляется только во 2-й, 4-й, 6-й раз, когда я нажимаю кнопку подтверждения. Вот часть кода C#:

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();
        }
    }

Часть HTML / Bootstrap

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

В той части кода, где я установил DisplayMessage = $"Action done with {Action}";, {Action} часть сообщения появляется только при каждом нажатии кнопки отправки, начиная второй щелчок. При первом щелчке сообщение не отображается.
Часть сообщения Action done with появляется каждый раз, кроме первого щелчка.

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 01 апреля 2020

Не нужно использовать TempData.Peek, чтобы получить его , просто используйте Model, чтобы получить и отобразить его.

И я советую вам do not add form tags to each button in dropdown-menu, вам просто нужно чтобы добавить к кнопке атрибут asp-page-handler, затем поместите тег формы отправки вне всех кнопок.

Измените код страницы следующим образом:

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

Вот результат:

enter image description here

...