How to show partial view as dialog using bootstrap

First we need to have Bootstrap Javascript & CSS files which can be downloaded from nuget easily.

We need a DIV in parent view. So I have added DIV & button to call dialog in my view Index.cshtml which is in “Views/Home” folder
Bellow is HTML

<button class="btn-bootstrap-dialog"> Bootstrap Dialog Click Me </button>

<div class="modal fade" id="bootstrapDialog" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true" data-url='@Url.Action("BootstrapDialog", "Home")'></div>

Here in div we can see that I have added data-url which will have url of actionresult which will return partialview.

So we need to have Action, So have created Action method in my HomeController.cs

public ActionResult BootstrapDialog()
{
   return PartialView();
}

We also need to create partial view. Here we need to use bootstrap css classes for creating this dialog.
Bellow is HTML for partial view

<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" id="myModal-label">Bootstrap Dialog</h4>

        </div>

        <div class="modal-body">

            This is my body. Here everything will come

        </div>

        <div class="modal-footer">

            <button class="btn btn-primary" id="btnOK" onclick="">OK</button>

            <button class="btn btn-default" data-dismiss="modal" id="btnCancel">Cancel</button>

        </div>

    </div>

</div>

Bellow is jquery which needs to be added in parent view.

        <script>

            $(document).ready(function () {

                $('.btn-bootstrap-dialog').click(function () {
                    var url = $('#bootstrapDialog').data('url');

                    $.get(url, function (data) {
                        $('#bootstrapDialog').html(data);

                        $('#bootstrapDialog').modal('show');
                    });
                });
            });
<script>