I have a WebGrid with an Edit button. When clicking the Edit button I want the modal to popup with the data in it. I have created the partialView and the bootstrap Modal. The Modal DOES work, I have tested it, but when I add in the success function, then the modal doesnt work :
$.ajax({
url: '/Pipeline/Edit_GetPipelineInfo/',
data: JSON.stringify(PipelineDetails),
type: 'POST',
contentType: 'application/json; charset=utf-8',
success: function (data) {
var m = $('#EditModal');
m.find('.modal-body').html(data);
m.modal('show');
}
});
Below is my Bootstrap Modal:
<div class="modal fade" id="EditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add New Pipeline Details</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Below is the whole JSON query :
$(function () {
$('.edit-mode').hide();
$('.edit-user').on('click', function () {
var tr = $(this).parents('tr:first');
var PLID = tr.find("#pkiPipeline").html();
var PLAccumulated_Length = tr.find("#lblAccumulated_Length").val();
var PLElevation = tr.find("#lblElevation").val();
var PLPipe_Outside_Diameter = tr.find("#lblPipe_Outside_Diameter").val();
var PLWall_Thickness = tr.find("#lblWall_Thickness").val();
var PLControl_Point_Description = tr.find("#lblControl_Point_Description").val();
var PLControl_Point_Size = tr.find("#lblControl_Point_Size").val();
var PLProjectID = tr.find(".fkiProjectID").val();
var PipelineDetails =
{
"pkiPipeline": PLID,
"Accumulated_Length": PLAccumulated_Length,
"Elevation": PLElevation,
"Pipe_Outside_Diameter": PLPipe_Outside_Diameter,
"Wall_Thickness": PLWall_Thickness,
"Control_Point_Description": PLControl_Point_Description,
"Control_Point_Size": PLControl_Point_Size,
"fkiProjectID": PLProjectID
};
$.ajax({
url: '/Pipeline/Edit_GetPipelineInfo/',
data: JSON.stringify(PipelineDetails),
type: 'POST',
contentType: 'application/json; charset=utf-8',
success: function (data) {
var m = $('#EditModal');
m.find('.modal-body').html(data);
m.modal('show');
}
});
});
});
Just in case this is needed as well, below is my WebGrid:
<div id="gridContent" style="font-family: Arial; padding: 20px; overflow:auto;height:380px" class="col-md-12">
@grid.GetHtml(tableStyle: "webgrid-table",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
mode: WebGridPagerModes.All,
columns:
grid.Columns(
grid.Column("pkiPipeline", "Node Nr.", format: @<text> <span class="display-mode">@item.pkiPipeline </span> <label id="pkiPipeline" class="edit-mode">@item.pkiPipeline</label> </text>, style: "col1Width"),
grid.Column("Accumulated_Length", "Accumulated Length", format: @<text> <span class="display-mode"> <label id="lblAccumulated_Length">@item.Accumulated_Length</label> </span> <input type="text" id="Accumulated_Length" value="@item.Accumulated_Length" class="edit-mode" /></text>, style: "col2Width"),
grid.Column("Elevation", "Elevation", format: @<text> <span class="display-mode"> <label id="lblElevation">@item.Elevation</label> </span> <input type="text" id="Elevation" value="@item.Elevation" class="edit-mode" /> </text>, style: "col2Width"),
grid.Column("Pipe_Outside_Diameter", "Pipe Outside Diameter", format: @<text> <span class="display-mode"> <label id="lblPipe_Outside_Diameter">@item.Pipe_Outside_Diameter</label> </span> <input type="text" id="Pipe_Outside_Diameter" value="@item.Pipe_Outside_Diameter" class="edit-mode" /> </text>, style: "col2Width"),
grid.Column("Wall_Thickness", "Wall Thickness", format: @<text> <span class="display-mode"> <label id="lblWall_Thickness">@item.Wall_Thickness</label> </span> <input type="text" id="Wall_Thickness" value="@item.Wall_Thickness" class="edit-mode" /> </text>, style: "col2Width"),
grid.Column("Control_Point_Description", "Control Point Description", format: @<text> <span class="display-mode"> <label id="lblControl_Point_Description">@item.Control_Point_Description</label> </span> <input type="text" id="Control_Point_Description" value="@item.Control_Point_Description" class="edit-mode" /> </text>, style: "col2Width"),
grid.Column("Control_Point_Size", "Control Point Size", format: @<text> <span class="display-mode"> <label id="lblControl_Point_Size">@item.Control_Point_Size</label> </span> <input type="text" id="Control_Point_Size" value="@item.Control_Point_Size" class="edit-mode" /> </text>, style: "col2Width"),
grid.Column("Action", format: @<text>
<input type="hidden" class="fkiProjectID" value="@item.fkiProjectID" />
<button class="edit-user display-mode">Edit</button>
<button class="save-user edit-mode">Save</button>
<button class="cancel-user edit-mode">Cancel</button>
</text>, style: "col3Width", canSort: false)
))
</div>
So again, the modal does popup when I remove the "success" in the $ajax section, but I need that to pass through the Model to my Controller(Or as far as I have seen/understand). Is there something to do with the "success" that it does not work ?
So I figured out my problem - should have been obvious! The one thing I didnt post here which I thought was not the problem, was actually the problem : The ActionResult! The ActionResult was expecting 2 integer parameters, when I was in fact passing the Model to the ActionResult.
To show the code to explain, below code is wrong :
public ActionResult Edit_GetPipelineInfo(int ProjectID, int PipelineID)
{
PipelineDetails PLD = new PipelineDetails();
ProjectManager PM = new ProjectManager();
PLD.PipelineListmodel = PM.GetPipelineInfo(ProjectID, PipelineID);
return PartialView("_partialEdit", PLD);
}
The below code was CORRECT:
public ActionResult Edit_GetPipelineInfo(PipelineDetails model)
{
PipelineDetails PLD = new PipelineDetails();
ProjectManager PM = new ProjectManager();
PLD.PipelineListmodel = PM.GetPipelineInfo(model.fkiProjectID, model.pkiPipeline);
return PartialView("_partialEdit", PLD);
}
Silly mistake, but these things happen...