在 Editable WebGrid MVC 中保存时将 Id 从模型传递到 JSON 查询

Question

我是 MVC 的新手，所以如果我使用的术语不正确，请纠正我。

我有一个可编辑且完美保存的 WebGrid，但我想从模型传递一个 iD，而不必在 WebGrid 上显示此 ID。在这种情况下，它是 fkiProjectID。这是我的代码：

控制器中的动作：

    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：

@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>
}

重申一下我想要的，fkiProjectID 是模型的一部分，我可以将它传递到我的 JSON 查询的唯一方法是将它添加到 WebGrid，但我没有这样做想。我希望它被传递到我的 JSON，它通过我的模型发送到我的控制器而不被添加到 WebGrid。

在此先感谢您的帮助。

Answer 1

将 fkiProjectID 添加到操作列作为隐藏输入（并删除它的列）：

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

然后在保存用户操作中，更改 jQuery 获取值的位置：

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

在 Editable WebGrid MVC 中保存时将 Id 从模型传递到 JSON 查询

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

json

webgrid

asp.net-mvc-5