locked
Confirmation message in modal after clicking button RRS feed

  • Question

  • User1554758465 posted

    Hello, I'm developing Asp.Net Core MVC web Application where i want to show a popup modal as a confirmation message. I need this to be RTL.

    Here is my simple view of Blogs containing records where I want to show the popup once the user clicks on "Delete" button on each row. All what i need is that popup modal and if the user clicks yes the code will continue work as it is, so i don't want to rewrite deletion code in JavaScript part of this confirmation dialogue . If user clicks no do not do anything.

    @model TestApplication.Models.ViewModels.BlogListViewModel
    
    
    @{ ViewData["Title"] = "Index"; }
    <div class="border">
        <div class="row">
            <div class="col-6">
                <h2>Blogs</h2>
            </div>
        </div>
        <br />
        <a class="btn btn-primary" asp-area="" asp-controller="Blog" asp-action="Create">Add Blog</a>
        <div>
    
            <div>
                @if (Model.BlogList.Count() > 0)
                {
    <table class="table table-striped">
        <tr class="table-secondary">
            <th>
                @Html.DisplayNameFor(m => m.BlogList.First().Title)
            </th>
            <th>
                @Html.DisplayNameFor(m => m.BlogList.First().Date)
            </th>
            <th>
                @Html.DisplayNameFor(m => m.BlogList.First().PublishDate)
            </th>
            <th>
                @Html.DisplayNameFor(m => m.BlogList.First().Status)
            </th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        @foreach (var item in Model.BlogList)
        {
    <tr>
        <td>
            @Html.DisplayFor(m => item.Title)
        </td>
        <td>
            @Html.DisplayFor(m => item.Date)
        </td>
        <td>
            @Html.DisplayFor(m => item.PublishDate)
        </td>
        <td>
            @Html.DisplayFor(m => item.Status)
        </td>
    
        <td>
            <a asp-area="" asp-controller="Blog" asp-action="Edit" asp-route-id="@item.Id" class="btn btn-primary">Edit</a>
        </td>
        <td>
            <a asp-area="" asp-controller="Blog" asp-action="Details" asp-route-id="@item.Id" class="btn btn-primary">Details</a>
        </td>
        <td>
            <form method="post" asp-action="Delete" asp-route-id="@item.Id">
                <button type="submit" class="btn btn-danger">Delete</button>
            </form>
    
        </td>
    
    </tr>
    }
    </table>
             }
                else
                {
    <p>No Blogs Exists...</p>}
            </div>
        </div>
        <hr />
    </div>

    I know it may be seems very simple but i have tried a lot and none seems my perfect solution. one of these solution is the popular one "Return confirm" where i can't customize my buttons. Since i have many actions "Publish, Save, Delete .. etc" in the application where i want to apply some customization on them.

    Tuesday, September 22, 2020 4:21 PM

Answers

  • User1312693872 posted

    Hi,ShahadAlshuhail

    ShahadAlshuhail

    so i don't want to rewrite deletion code in JavaScript part of this confirmation dialogue . If user clicks no do not do anything.

    Use a modal can do this without overwrite the deletion code, you can refer to my demo, mind the type should be 'button':

    View:

    ...
    <td>
                                    <a asp-area="" asp-controller="Blog" asp-action="Edit" asp-route-id="@item.Id" class="btn btn-primary">Edit</a>
                                </td>
                                <td>
                                    <a asp-area="" asp-controller="Blog" asp-action="Details" asp-route-id="@item.Id" class="btn btn-primary">Details</a>
                                </td>
                                <td>
                                    <form method="post" asp-action="Delete" asp-route-id="@item.Id">
                                        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#confirm-delete">Delete</button>
                                        <div class="modal" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h2 class="modal-title">Delete</h2>
                                                    </div>
                                                    <div class="modal-body">
                                                        <p>Are you sure you want to delete?</p>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="submit" class="btn btn-success">Yes,Delete</button>
                                                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </td>
    ...

    And if you want to put the modal in center, use this css

    .modal {
        width: 300px;
        height: 300px;
        ;
        left: 50%;
        top: 50%;
        margin-left: -150px;
        margin-top: -150px;
    }
    

    Result:

    Best Regards,

    Jerry Cai

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 23, 2020 2:37 AM

All replies

  • User-474980206 posted

    what's wrong with the simple:

              <button type="submit" class="btn btn-danger" onclick="return confirm('Do Delete?')">Delete</button>
     

    Tuesday, September 22, 2020 4:36 PM
  • User1554758465 posted

    Customization, I want it to be in centered modal with my own style. And the buttons in static Arabic options.

    Tuesday, September 22, 2020 5:24 PM
  • User1312693872 posted

    Hi,ShahadAlshuhail

    ShahadAlshuhail

    so i don't want to rewrite deletion code in JavaScript part of this confirmation dialogue . If user clicks no do not do anything.

    Use a modal can do this without overwrite the deletion code, you can refer to my demo, mind the type should be 'button':

    View:

    ...
    <td>
                                    <a asp-area="" asp-controller="Blog" asp-action="Edit" asp-route-id="@item.Id" class="btn btn-primary">Edit</a>
                                </td>
                                <td>
                                    <a asp-area="" asp-controller="Blog" asp-action="Details" asp-route-id="@item.Id" class="btn btn-primary">Details</a>
                                </td>
                                <td>
                                    <form method="post" asp-action="Delete" asp-route-id="@item.Id">
                                        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#confirm-delete">Delete</button>
                                        <div class="modal" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h2 class="modal-title">Delete</h2>
                                                    </div>
                                                    <div class="modal-body">
                                                        <p>Are you sure you want to delete?</p>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="submit" class="btn btn-success">Yes,Delete</button>
                                                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </td>
    ...

    And if you want to put the modal in center, use this css

    .modal {
        width: 300px;
        height: 300px;
        ;
        left: 50%;
        top: 50%;
        margin-left: -150px;
        margin-top: -150px;
    }
    

    Result:

    Best Regards,

    Jerry Cai

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 23, 2020 2:37 AM
  • User-474980206 posted

    Then you need to pick a JavaScript popup/modal library. Unlike the confirm, they are async (a window loop is required just to display them). So the button click will display the modal and cancel any post back. Then the ok buttons onclick handler of the modal should do the form submit. You will need to store the form in a variable, so the ok button handler knows which form to submit. 

    hint: you could write a modal component that returns a promise on show, and have the ok buttons resolve, and the close without ok, reject.

    Wednesday, September 23, 2020 2:46 AM