AxleWack AxleWack - 6 months ago 49
JSON Question

Passing Id from model to JSON query when saving in Editable WebGrid MVC

I am quite new to MVC, so please correct me if I am using an terminologies incorrectly.

I have a WebGrid that is editable and saves perfectly, but I want to pass through an iD from the Model instead of having to display this Id on the WebGrid. In this case its the fkiProjectID. Here is my Code :

Action in Controller :

public JsonResult ChangePipeline(PipelineDetails model)
{
ProjectManager PM = new ProjectManager();

//Update model to DB
PM.UpdatePipeline(model.pkiPipeline, model.fkiProjectID, model);

var redirectURL = new UrlHelper(Request.RequestContext).Action("Index", "Pipeline", new { id = model.fkiProjectID});

return Json(new { Url = redirectURL });
}


WebGrid in View:

@model AirFlo_Size_Programme.Models.PipelineViewModel

@{
ViewBag.Title = "Pipe Line";
Layout = "~/Views/Shared/_Layout_ProjectFlow.cshtml";
var grid = new WebGrid(Model.PipelineListmodel, canPage: true, rowsPerPage: 7);
}

<div id="gridContent" style="font-family: Arial; padding: 20px;" 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("fkiProjectID", "ProjectID", format: @<text> <span class="display-mode">@item.fkiProjectID </span> <label id="fkiProjectID" class="edit-mode">@item.fkiProjectID</label> </text>, style: "col1Width"),
grid.Column("Action", format: @<text>
<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>


JSON:

@section scripts
{
<script>

$(function () {
$('.edit-mode').hide();
$('.edit-user, .cancel-user').on('click', function () {
var tr = $(this).parents('tr:first');
tr.find('.edit-mode, .display-mode').toggle();
});

$('.save-user').on('click', function () {
var tr = $(this).parents('tr:first');
var PLID = tr.find("#pkiPipeline").html();
var PLAccumulated_Length = tr.find("#Accumulated_Length").val();
var PLElevation = tr.find("#Elevation").val();
var PLPipe_Outside_Diameter = tr.find("#Pipe_Outside_Diameter").val();
var PLWall_Thickness = tr.find("#Wall_Thickness").val();
var PLControl_Point_Description = tr.find("#Control_Point_Description").val();
var PLControl_Point_Size = tr.find("#Control_Point_Size").val();
var PLProjectID = tr.find("#fkiProjectID").html();

var PipelineViewModel =
{
"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/ChangePipeline/',
data: JSON.stringify(PipelineViewModel),
type: 'POST',
contentType: 'application/json; charset=utf-8',
success: function (data) {
tr.find('.edit-mode, .display-mode').toggle();
alert('Record updated Successfully!!');
window.location.href = data.Url;
}
});
return false;
});
$('.edit-user').on('click', function () {
var tr = $(this).parents('tr:first');
var PLID = tr.find("#pkiPipeline").html();
var PLAccumulated_Length = tr.find("#Accumulated_Length").val();
var PLElevation = tr.find("#Elevation").val();
var PLPipe_Outside_Diameter = tr.find("#Pipe_Outside_Diameter").val();
var PLWall_Thickness = tr.find("#Wall_Thickness").val();
var PLControl_Point_Description = tr.find("#Control_Point_Description").val();
var PLControl_Point_Size = tr.find("#Control_Point_Size").val();
var PLProjectID = tr.find("#pkiPipeline").html();

tr.find("#lblAccumulated_Length").text(PLAccumulated_Length);
tr.find("#lblElevation").text(PLElevation);
tr.find("#lblPipe_Outside_Diameter").text(PLPipe_Outside_Diameter);
tr.find("#lblWall_Thickness").text(PLWall_Thickness);
tr.find("#lblControl_Point_Description").text(PLControl_Point_Description);
tr.find("#lblControl_Point_Size").text(PLControl_Point_Size);
});
})
</script>
}


Just to reiterate what I want, the fkiProjectID is part of the Model and the only way I can get it to be passed through to my JSON query is by adding it to the WebGrid, which I dont want. I want it to be passed to my JSON that is sending through my model to my controller with out it being added to the WebGrid.

Thanks in advance for the help.

Answer

Add the fkiProjectID to the action column as a hidden input (and remove it's column):

<div id="gridContent" style="font-family: Arial; padding: 20px;" class="col-md-12">
    @grid.GetHtml(
    @*** options ***@,
    columns:
        grid.Columns(
         @*** other columns ***@
         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>

Then in the save user action, change where the jQuery is getting the value:

var PLProjectID = tr.find(".fkiProjectID").val();