Monday, February 22, 2016

Creating Bootstrap Modal Confirmation Window (ASP.NET MVC RAZOR and Java Script)

HTML

Lets assume we have DELETE button (link) on UI:



<a onclick="return desinto.core.openYesNoModal('@Url.Action("DeleteAdvertiserCampaingById", "AdvertiserProfile", new {Id = @campaign.Id})', 'You are about deleting this Campaing, Are You Sure?')" href="#">Delete</a>      

Once user clicked on this button we gonna show modal confirmation window (bootstrap) and we have this window like injected Partial View on the same (for example) HTML:


@Html.Partial("YesNoPromtModal")

Partial's HTML:

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Confirmation</h4>
            </div>
            <div class="modal-body">
                <p id="promptDescription"></p>              
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="cancelBtn">Close</button>
                <a href="" class="btn btn-primary" id="saveChangesBtn">Save Changes</a>
            </div>
        </div>
    </div>
</div>



and finally Java Script for handling close and save changes buttons:

var desinto = {} || desinto;
desinto.core = {} || desinto.core;

(function (ns) {

    ns.openYesNoModal = function (linkForYes, description) {
        $('#saveChangesBtn').attr('href', linkForYes);
        $('#promptDescription').append(description);
        $('#myModal').modal('show');

        $('#cancelBtn').click(function () {
            $('#promptDescription').html('');
            $('#saveChangesBtn').removeAttr("href");    
        });    
    }  
   
})(desinto.core);