Question

我已在部分视图中将div格式化为div并且我的删除按钮位于主视图中。现在我想要一个功能，当我单击删除按钮时，我的webgrid应该只刷新整个页面（主视图）

**我想在mvc

中仅刷新使用jquery包含webgrid的部分View

我的部分查看代码如下：

WebGrid grid = new WebGrid(source: Model, rowsPerPage: 10, canPage: true, defaultSort: "Station");

    //WebGrid grid = new WebGrid(source: Model, rowsPerPage: 10, canPage: true, defaultSort: "Station", ajaxUpdateContainerId: "grid1");

    string Message = "";

    if (@ViewBag.NoData != null)
    {
        Message = ViewBag.NoData.ToString();
    }

    <div id="UserMainDiv">
            @if (Model.Count() > 0)
            {
                <div id="grid1" class="row container" style="width:84%;margin-left:8%;">

                    <div class="col-md-12" style="width:100%;color:black;margin-top:10px;padding-left:0px;padding-right:0px;">
                        @grid.GetHtml(




          htmlAttributes: new { id = "grid" },
    tableStyle: "webgrid",
    headerStyle: "webgrid-header",
    footerStyle: "webgrid-footer",
    alternatingRowStyle: "webgrid-alternating-row",
    selectedRowStyle: "webgrid-selected-row",
    rowStyle: "webgrid-row-style",
          //mode: WebGridPagerModes.All,
          //firstText: "",
          //lastText: ">>",
          //previousText: "<",
          //nextText: ">",



          columns: grid.Columns
                      (
              //Here I am going to add checkbox column
              //Here I am going to add checkbox column
              grid.Column(format: @<text> <input type="checkbox" value="@item.ID" name="ids" /> </text>, header: "{checkall}"),
            //grid.Column("ID"),
                @*grid.Column("Name",format: @<text>@Html.ActionLink((string)item.Name, "AddEdit", "gridchk", new { id = item.id })</text>),*@
            grid.Column("Station", format: @<text>@Html.ActionLink((string)item.Station, "EditEmployee", "Manage", new { id = item.ID }, new { @class = "modal1" })</text>),
           grid.Column("FlightNo", "Flight No", format: @<text>@Html.ActionLink((string)item.FlightNo, "EditEmployee", "Manage", new { id = item.ID }, new { @class = "modal1" })</text>),
    grid.Column("FlightDate", "Flight Date", format: @<text>@Html.ActionLink((string)item.FlightDate.ToString("MM/dd/yy"), "EditEmployee", "Manage", new { id = item.ID }, new { @class = "modal1" })</text>),
    //grid.Column("FlightDate", "Flight Date", format: (item) => item.FlightDate != null ? item.FlightDate.ToString("MM/dd/yy") : "NULL"),
    grid.Column("PaxNo", "Pax No", format: @<text>@Html.ActionLink((string)item.PaxNo != null ? (string)item.PaxNo : "NULL", "EditEmployee", "Manage", new { id = item.ID }, new { @class = "modal1" })</text>),
    //grid.Column("PaxNo", "Pax No", format: (item) => item.PaxNo != null ? item.PaxNo : "NULL"),
    grid.Column("PaxNoOwnward", "PaxNo Onward", format: @<text>@Html.ActionLink((string)item.PaxNoOwnward != null ? (string)item.PaxNoOwnward : "NULL", "EditEmployee", "Manage", new { id = item.ID }, new { @class = "modal1" })</text>),
    //grid.Column("PaxNoOwnward", "PaxNo Onward", format: (item) => item.PaxNoOwnward != null ? item.PaxNoOwnward : "NULL"),
    grid.Column("TextMsg", format: @<text>@Html.ActionLink((string)item.TextMsg, "EditEmployee", "Manage", new { id = item.ID }, new { @class = "modal1" })</text>)



                                                                  )
                                                                                                                                     )
                        </div>
                    </div>
            }

                        @*</div>*@


                        else
                        {
            <div style="width:80%;margin-left:10%;">
                <div class="row container">
                    <div class="col-md-12" style="width:100%;color:black;margin-top:10px;text-align:center;">

                        @Html.Label("", Message, new { id = "lblMessage" })

                    </div>
                </div>
            </div>


            }
            </div>

我的主页面视图，其中我声明了删除按钮按钮代码。

我正在使用Jquery

  $('#btnDelete').click(function (e) {
            var command = $('#btnDelete').val();
            var myArray = [];
            $("#gridtable tbody tr td:nth-child(1)").find('input[type="checkbox"]:checked').each(function () {
                myArray.push(($(this).val()));
            });

            e.preventDefault();

            var url = '@Url.Action("DeleteUser", "CreateUser")';
            $.ajax({

                url: url,
                type: 'GET',
                data: { ids: myArray },
                dataType: 'html',

                success: function (data) {
                   // $("#demoaArea").html(data);
                    location.reload();
                    // window.location.href = url;
                },

                error: function (XMLHttpRequest, textStatus, errorThrown) {

                    //alert('error; ' + eval(error));
                    alert("Status: " + textStatus); alert("Error: " + errorThrown);
                    //alert('Error!');
                }

            });

        });

我的删除控制器代码：

public Actionresult DeleteStudent(int ids)
    {
        // delete the record from ID and return true else false

    }

Answer 1

在你的ajax调用成功中，不要重新加载，而是使用下面的。

$('#UserMainDiv').html(data)

并在您的控制器中返回partialview而不是整个视图。

public Actionresult DeleteStudent(int ids)
{
    // delete the record from ID and return true else false

   return PartialView("PartialViewName",model);

}

如何通过单击在MVC的局部视图中声明的删除按钮来删除webgrid中的多个记录

1 个答案: