从WebGrid删除行两次命中控制器(清除参数数据)MVC,JSON

时间:2016-05-30 12:19:14

标签: javascript jquery json asp.net-mvc-5 webgrid

我经历了不少帖子,经过了测试和测试,没有任何工作,或者我完全错过了一些东西,但我有这种感觉我的情况与其他任何帖子都没有关系。我对MVC比较陌生,不知道这个问题的原因是什么。

问题:我正在删除WebGrid中的项目。我有一个确认框,如果单击是,则删除该项目,但随后控制器被击中两次,清除我传递的参数以显示警报(此参数用于显示新的成功并编辑并在出错时失败。但是,当第二次触发Index ActionResult时,该项目正在被删除,但没有成功警报,因为参数值正在丢失。

我做错了什么?

控制器:

public ActionResult Index(PipelineDetails model, int id, string Result)
    {
        if (!ModelState.IsValid)
        {
            return View(model);
        }

        //PipelineViewModel PL = new PipelineViewModel();
        PipelineDetails PL = new PipelineDetails();
        ProjectManager PM = new ProjectManager();

        PL.fkiProjectID = id;

        PipeList = PM.GetPipelineList(id);
        PL.PipelineListmodel = PipeList;

        foreach (var item in PipeList)
        {
            PL.fkiProjectID = item.fkiProjectID;
            PL.pkiPipeline = item.pkiPipeline;

            if (Result == null)
            {
                PL.Result = "";
            }
            else
            {
                PL.Result = Result;
            }
        }

        return View(PL);
    }

public ActionResult Delete_PipelineInfo(PipelineDetails_Delete model)
    {
        string Result = "";
        ProjectManager PM = new ProjectManager();

        int ProjectID = model.fkiProjectID;
        //Update model to DB
        Result = PM.DeletePipeLineSingle(model.fkiProjectID, model.pkiPipeline);

        return RedirectToAction("Index", "Pipeline", new { id = ProjectID, result = Result });
    }

视图中的JSON:

$(function () {
            $('.edit-mode').hide();
            $('.delete-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").val();

                var PipelineDetails =
                {
                    "pkiPipeline": PLID,
                    "fkiProjectID": PLProjectID
                };
                if (confirm('Are you sure you want to delete this Pipeline item?')) {
                    $.ajax({
                        url: '/Pipeline/Delete_PipelineInfo',
                        data: JSON.stringify(PipelineDetails),
                        type: 'POST',
                        contentType: 'application/json; charset=utf-8',
                        success: function (data) {
                            window.location.href = "/Pipeline/Index/" + PLProjectID;
                        }

                    })
                }
            });
        });

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("", format: @<text>
                <input type="hidden" class="fkiProjectID" value="@item.fkiProjectID" />
                <div class="container" style="width:120px">
                    <div class="btn-group-xs">
                        <button data-loading-text="Loading..." class="edit-user display-mode btn btn-default2" autocomplete="off">Edit</button>
                        <button class="delete-user display-mode btn btn-default2">Delete</button>
                    </div>
                </div>
        </text>, style: "col3Width", canSort: false)
       ))
</div>

1 个答案:

答案 0 :(得分:0)

我终于开始工作了。我已经发布了以下代码,以防将来帮助其他人。这可能不是“正确的”方式,因为我对这一切仍然是新手,但这对我有用 - 所以我希望它能帮助别人!

干杯!

控制器:

public JsonResult Delete_PipelineInfo(PipelineDetails model)
    {
        String DeleteResult = String.Empty;
        String result = String.Empty;

        PipelineDetails PL = new PipelineDetails();
        ProjectManager PM = new ProjectManager();

        PL.fkiProjectID = model.fkiProjectID;

        PipeList = PM.GetPipelineList(model.fkiProjectID);
        PL.PipelineListmodel = PipeList;

        PipelineDetails PD = PipeList.Find(p => p.pkiPipeline == model.pkiPipeline && p.fkiProjectID == model.fkiProjectID);
        if (PD != null)
        {
            PipeList.Remove(PD);
            result = "1";
            DeleteResult = PM.DeletePipeLineSingle(model.fkiProjectID, model.pkiPipeline);
        }
        else
            result = "0";

        return Json(result, JsonRequestBehavior.AllowGet);
    }

JSON:

$('.delete-user').on('click', function () {
                if (confirm("Are you sure to delete this Pipeline item?")) {
                    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").val();
                    var PLResult = "Delete Success";

                    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,
                        "Result" : PLResult
                    };


                    $.ajax({

                        url: '/Pipeline/Delete_PipelineInfo/',
                        data: JSON.stringify(PipelineDetails),
                        type: 'POST',
                        contentType: 'application/json; charset=utf-8',
                        success: function (result) {
                            isSuccess = result;
                        },
                        error: function (result) {
                            isSuccess = result;
                        }
                    }).done(function () {
                        if (isSuccess == "1") {           // Successfully Deleted
                            //alert("Successfully Deleted");
                            //location.reload();      // refresh the page
                            window.location.href = "/Pipeline/Index/" + PLProjectID + "?result=" + PLResult;
                        }
                        else {                      // Data Error
                            alert("Error. Please, check the data");
                        }

                    });
                }
            });

切换警报+ WebGrid:

@model AirFlo_Size_Programme.Models.PipelineDetails

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

@switch (Model.Result)
{
case "Success":
    <div class="alert alert-success" id="pipelinesuccess">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        <strong>Saved!</strong> Pipeline added successfully.
    </div>
    break;
    case "False":@*This means that no result has been passed so no Action is required*@
case "":
case null:
break;
case "Delete Success":
<div class="alert alert-success" id="pipelineDeleteSuccess">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <strong>Deleted!</strong> Pipeline deleted successfully.
</div>
    break;
    case "Edit Success":
    <div class="alert alert-success" id="pipelineDeleteSuccess">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        <strong>Saved!</strong> Pipeline Edited successfully.
    </div>
    break;
default:
    <div class="alert alert-danger" id="pipelinefailed">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        <strong>Failed!</strong> The following error occurred : @Model.Result
    </div>
    break;
}

<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("", format: @<text>
                <input type="hidden" class="fkiProjectID" value="@item.fkiProjectID" />
                <div class="container" style="width:120px">
                    <div class="btn-group-xs">
                        <button data-loading-text="Loading..." class="edit-user display-mode btn btn-default2" autocomplete="off">Edit</button>
                        <button class="delete-user display-mode btn btn-default2">Delete</button>
                    </div>
                </div>
        </text>, style: "col3Width", canSort: false)
       ))
</div>