MVC5 Classic
Create a Confirm Dialog

The wijdialog widget allows you to create Confirm windows to confirm events like file deletion or emptying the recycle bin. See the Dialog > Confirm Dialog sample of the Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/dialog/ModalConfirmation .

  1. Create an C1 ASP.NET MVC 5 Web Application.
  2. In the Solution Explorer, click Views | Shared folder and double-click  the _Layout.cshtml file to open it.
  3. In the Solution Explorer, click the Views | Home folder and double-click the Index.cshtml file to open it.
  4. Add the following markup to create a dialog window with buttons:
    <div>
            <input type="button" value="Show Confirm" onclick="$('#dialog-confirm').wijdialog('open')" />
            <div id="dialog-confirm" title="Empty recycle bin?">
                <p>
                    <span class="ui-icon ui-icon-alert"></span>These items will be permanently deleted
                    and cannot be recovered. Are you sure?</p>
            </div>
        </div>
    
  5. Insert the following script to initialize the widget:
    <script id="scriptInit" type="text/javascript">
            $(document).ready(function () {
                /$(":wijmo-wijdialog").wijdialog("destroy").remove();
                $("#dialog-confirm").wijdialog({
                    autoOpen: true,
                    resizable: false,
                    height: 180,
                    width: 400,
                    modal: true,
                    buttons: {
                        "Delete all items": function () {
                            $(this).wijdialog("close");
                        },
                        Cancel: function () {
                            $(this).wijdialog("close");
                        }
                    }
                });
            });
        </script>
    
  6. Run your application to see the Confirm Window. You can customize the text in the confirm dialog window by changing the text between the <p></p> tags. Your Confirm Dialog should resemble the following image:

 

 


Copyright (c) GrapeCity, inc. All rights reserved.

Product Support Forum |  Documentation Feedback