CODEWITHSUNDEEP
c#jqueryhtmlasp.net-mvctwitter-bootstrap
AlexGH
AlexGH

Reputation: 2817

How to put Partial View inside Bootstrap Modal?

I want to put a Partial View inside a Bootstrap Modal,

This is the JQuery code I'm using:

function CreateEmployeeModal()
{
    var url = $("#btnCreateEmployeeModal").data("mine");    
    $.ajax({
        type: 'get',
        url: url
    }).success(function (result) {            
        $(".modal-body").html(result)
        $("#MyModal").modal('show')
    }).error(function () {
        alert("didn't work");
    })
}

And this is the Modal code inside the _Layout file:

<div class="modal fade" id="myModal" role="dialog">
                <div class="modal-dialog">

                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Modal Header</h4>
                        </div>
                        <div class="modal-body" id="divModalBody">
                            <p>Some text in the modal.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

I'm firing the modal using this button from the Index page, I've created the data-mine attribute to save the url to the Action Method that is returning the PartialView:

 <input type="button" class="aslink modal-link" data-toggle="modal" 
                   data-target="#myModal" id="btnCreateEmployeeModal" value="Open Modal" data-mine="@Url.Action("CreateUsingModal")">

This is the controller action method I have to return the Partial View:

   public PartialViewResult CreateUsingModal()
        {
            return PartialView();
        }

The operation is having success in ajax, but the modal doesn't show...

Upvotes: 1

Views: 9032

Answers (2)

AlexGH
AlexGH

Reputation: 2817

I had an error..., I should use a lowercase instead of a uppercase for the id of the modal... The correct way is: $("#myModal").modal('show')

Upvotes: 1

Jason
Jason

Reputation: 647

I'll assume your GET endpoint (your method) is returning raw HTML. A better way of doing this would be for your method to return your data in JSON format and then use that data to populate your modal window:

function CreateEmployeeModal()
{
    var url = $("#btnCreateEmployeeModal").data("mine");    
    $.ajax({
       type: 'get',
       url: url
    }).success(function (result) {
        console.log(result); //better than alert

        $("#textboxCorrespondingToValue").val(result.valueCorrespondingToTextbox);

        $("#MyModal").modal('show');
}).error(function () {
    alert("didn't work");
})
}

This way, if you even need to change the html you don't have to change anything in your server side code

Upvotes: 0

Related Questions