locked
How open confirm modal bootstrap in another bootstrap modal RRS feed

  • Question

  • User799396372 posted

    good day

    in my application asp.net mvc, i want to create expense row in database, for that i have create a partial view CreateOrUpdate that's located in bootstrap modal. before a form submitting, I want to open an other modal bootstrap for confirmation to insert or update expense row, but only if a condition that's: if expense amount is greater than 6000, otherwise the form is submitted directly without confirmation

    How do that successfuly? i can't open confirmation modal with condition in Ajax.Beginform

    there's my Controller code:

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult _CreateOrUpdate(Expense expense, string modalButton, string sortBy, string match, int? page, int pageSize = 5)
    {
                bool warningMessagesExist=expense > 6000;
                
                ViewBag.WarningMessage = string.Empty;
                
                try
                {
                    if (ModelState.IsValid)
                    {
    
                        if (depense.Id <= 0)
                            uniteOfWorkBll.ExpenseBLL.Insert(depense,out warningMessagesExist);
    
                        else
                            uniteOfWorkBll.ExpenseBLL.Update(depense, out warningMessagesExist);
    
                        if (modalButton == "Save" && warningMessagesExist)
                        {
                            ViewBag.WarningMessagesExist = warningMessagesExist;
                            this.WarningDepense = warningMessages;
                            var message = "les informations de facture sont manquants, voulez vous continuer?";
                            ViewBag.WarningMessage = message;
                        }
                        var model = GetPagedListInitialzed(ewpense.InvoiceId,match, sortBy, page, 5);
                        return PartialView("_AllExpensesByInvoice", model);
                       
                        
                    }
                    else
                    {
                       
                        ViewBag.GeneralAccountId= new SelectList(uniteOfWorkBll.AllGeneralAccounts(), "Id", "Label", expense.GeneralAccountId);
                        ViewBag.AnalAccountId = new SelectList(uniteOfWorkBll.AnalAccountBLL .GetAll(), "Id", "Designation", expese.AnalAccountId );
                        ViewBag.WarningMessagesExist = warningMessagesExist;
                        return PartialView(expense);
    
    
                    }
                }
    
                catch (BusinessLayerException e)
                {                
                    return new HttpStatusCodeResult(HttpStatusCode.InternalServerError, e.Message);
                }
    
                catch (Exception e)
                {                
                    return new HttpStatusCodeResult(HttpStatusCode.InternalServerError, "Erreur d'insertion");
                }
            }

    my CreateuOrUpdate View

    model BusinessEntities.Expense
    
     @using (Ajax.BeginForm("_CreateOrUpdate", "Expenses", null,
             new AjaxOptions
             {
                 HttpMethod = "Post",
                 //UpdateTargetId =ViewBag.WarningMessagesExist != null && (bool)ViewBag.WarningMessagesExist ? "ConfirmDiv" : "ListDepenses",
                 InsertionMode = InsertionMode.Replace,
                 OnBegin = "modalConfirm" ,
                 OnSuccess ="success('#creerModifierDepense')",
                 OnFailure = "showError",                               
                 
             }
                    , new { id = "formCUDepense", @class = "form-horizontal" }))
     {
         
        
                       
                 @*//une partie de bootstrap modal pour que la formulaire va etre contenu dans modal bootstrap*@
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title"><strong>Dépense DRA</strong> </h4>
                 </div>
                
                    
                <div class="modal-body">
                    
                    @Html.ValidationSummary(true)
                    @Html.AntiForgeryToken()
                    @Html.HiddenFor(model => model.Id)
                    Html.Hidden("IsAmountGreaterThan", ViewBag.WarningMessagesExist )
                      <div class="form-group">
                          @Html.LabelFor(model => model.Debit, new { @class = "label-control col-xs-3" })
    
                          <div class="col-xs-9">
                             <div class="input-group">
                                 @Html.TextBoxFor(model => model.Amount, new { @class = "debit form-control" })
                                 <span class="input-group-addon">DA</span>
                                 </div>
                                    @Html.ValidationMessageFor(model => model.Debit, "", new { @class = "text-danger" })
                                 </div>
    
                         </div>
    @*the rest of partial view*@
    Saturday, May 9, 2020 7:04 PM

All replies

  • User1686398519 posted

    Hi,  Beginner32

    First,when you use AjaxOptions to trigger a modal, you must have the file "jquery.unobtrusive-ajax.js".

    Second,when there are multiple modals on the page, you need to specify which one needs to be closed, because all will be closed by default.

    More details, you could refer to below code:

    Index

    <div id="showmodal" class="modal fade" tabindex="-1" role="dialog" data-url='@Url.Action("CreateOrUpdate")'>
    
        <div class="modal-dialog" role="document">
    
            <div class="modal-content">
    
            </div>
    
        </div>
    
    </div>
    
    <button id='open'>open modal</button>
    
    @section scripts{
    
        <script>
    
            $(document).ready(function () {
    
                $('#open').click(function () {
    
                    var url = $('#showmodal').data('url');
    
                    $.get(url, function (data) {
    
                        $('.modal-content').html(data);
    
                        $('#showmodal').modal('show');
    
                    });
    
                });
    
            });
    
        </script>
    
    }

    _CreateOrUpdate

    @using (Ajax.BeginForm("_CreateOrUpdate", "Home", null,
    
             new AjaxOptions
    
             {
    
                 HttpMethod = "Post",
    
     //UpdateTargetId =ViewBag.WarningMessagesExist != null && (bool)ViewBag.WarningMessagesExist ? "ConfirmDiv" : "ListDepenses",
    
     InsertionMode = InsertionMode.Replace,
    
                 OnBegin = "modalConfirm",
    
                 OnSuccess = "success('#creerModifierDepense')",
    
                 OnFailure = "showError",
    
             }, new { id = "formCUDepense", @class = "form-horizontal" }))
    
    {
    
        @*//une partie de bootstrap modal pour que la formulaire va etre contenu dans modal bootstrap*@
    
        <div class="modal-header">
    
            <button class="close" data-dismiss="modal">&times;</button>
    
            <h4 class="modal-title"><strong>Dépense DRA</strong> </h4>
    
        </div>
    
        <div class="modal-body">
    
                @*your code*@
    
            <div class="form-group">
    
                @*your code*@
    
            </div>
    
        </div>
    
        <div class="modal-footer">
    
            <button data-number="1" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    
            <button type="submit" class="btn btn-primary">Save changes</button>
    
        </div>
    
        @*the rest of partial view*@
    
    }
    
    <div id="confirmmodal" class="modal fade" tabindex="-1" role="dialog">
    
        <div class="modal-dialog" role="document">
    
            <div class="modal-content">
    
                <div class="modal-header">
    
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    
                    <h4 class="modal-title">Modal title</h4>
    
                </div>
    
                <div class="modal-body">
    
                    this id Confirm modal
    
                </div>
    
                <div class="modal-footer">
    
                    <button id="2" type="button" class="btn btn-default" onclick=" $('#confirmmodal').modal('hide')">Close</button>
    
                    <button type="button" class="btn btn-primary">Save changes</button>
    
                </div>
    
            </div><!-- /.modal-content -->
    
        </div><!-- /.modal-dialog -->
    
    </div><!-- /.modal -->
    
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    
    <script>
    
        function modalConfirm() {
    
            $('#confirmmodal').modal('show');
    
        }
    
    </script>
    
    

    Here is the result.

    Best Regards,

    YihuiSun

    Monday, May 11, 2020 10:38 AM
  • User799396372 posted

    thank you but is not working that's my Views

    model BusinessEntities.Expense
    
     @using (Ajax.BeginForm("_CreateOrUpdate", "Expenses", null,
             new AjaxOptions
             {
                 HttpMethod = "Post",
                 //UpdateTargetId =ViewBag.WarningMessagesExist != null && (bool)ViewBag.WarningMessagesExist ? "ConfirmDiv" : "ListDepenses",
                 InsertionMode = InsertionMode.Replace,
                 OnSuccess ="modalConfirm('#creerModifierDepense')",
                 OnFailure = "showError",                               
                 
             }
                    , new { id = "formCUDepense", @class = "form-horizontal" }))
     {
         
        
                       
                 @*//une partie de bootstrap modal pour que la formulaire va etre contenu dans modal bootstrap*@
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title"><strong>Dépense DRA</strong> </h4>
                 </div>
                
                    
                <div class="modal-body">
                    
                    @Html.ValidationSummary(true)
                    @Html.AntiForgeryToken()
                    @Html.HiddenFor(model => model.Id)
                    Html.Hidden("IsAmountGreaterThan", ViewBag.WarningMessagesExist )
                      <div class="form-group">
                          @Html.LabelFor(model => model.Debit, new { @class = "label-control col-xs-3" })
    
                          <div class="col-xs-9">
                             <div class="input-group">
                                 @Html.TextBoxFor(model => model.Amount, new { @class = "debit form-control" })
                                 <span class="input-group-addon">DA</span>
                                 </div>
                                    @Html.ValidationMessageFor(model => model.Debit, "", new { @class = "text-danger" })
                                 </div>
    
                         </div>
    
    <div>
    @Html.Partial("_CreateUpdateDepenseAfterConfirm", Model)
    </div>
    
    @*the rest of partial view*@

    @Scripts.Render("~/bundles/ajax")

    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript">
    var warningExist = $('#divDetail input#isWarningExist').val();
    if (warningExist == 'True') {
    $('#confirmModal').modal('show');
    }
    else {
    success(element);
    }

    _CreateUpdateDepenseAfterConfirm view

    @model BusinessEntities.Expense
    @using (Ajax.BeginForm("_CreateUpdateExpenseAfterConfirm",new AjaxOptions
    {
        HttpMethod = "Post",
        //UpdateTargetId =ViewBag.WarningMessagesExist != null && (bool)ViewBag.WarningMessagesExist ? "ConfirmDiv" : "ListDepenses",
        InsertionMode = InsertionMode.Replace,
        //OnBegin = "modalConfirm();",
        OnSuccess = "success('#creerModifierDepense')",
        OnFailure = "showError",
    
    }))
    { 
    
    @*zone de messages de Confirmation*@
    <div id="ConfirmDiv">
        @Html.Partial("_Confirmation")
    
    </div>
    }

    functions success jquery

    function success(element) {
         $(element).modal('hide');
         $('.modal-backdrop').remove();
         $('body').css('overflow', 'auto');
    
    }

    what's the error in my code? can you help me please ?

    Saturday, May 16, 2020 3:16 AM
  • User1686398519 posted

    Hi,  Beginner32

    • I want to confirm with you what "#divDetail input # isWarningExist" is, I didn't see it in the code you gave. 
    • You need to check if there is a modal with id "confirmModal" in the page code.You can see the code I gave earlier.
    • How to combine modal and partial views:
      • First of all, you need to reference the related files of bootstrap.
      • Second, you need to use the following code on the page before calling the partial view:
    <div id="confirmmodal" class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
      
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
      • Next, use the following code on the partial view you called.
    <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Modal title</h4>
          </div>
          <div class="modal-body">
            <p>One fine body&hellip;</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
    </div>
    • If you have solved the above problems, I think you need to check the two points I mentioned earlier.

    Remarks: 

    1. For more information on modal usage, please refer to this link1.
    2. For more information on partial view usage, please refer to the two links: link2,link3.

    Best Regards,

    YihuiSun

    Thursday, May 28, 2020 2:34 AM