问题描述:

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...

网友答案:

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

网友答案:

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')

相关阅读:
Top