mercredi 29 juin 2016

How to delete multiple records in a webgrid by clicking a delete button which is declared in a partial view in MVC

I have declared the webgrid inside a div in a partial view and my delete button is in Main View.Now I want a functionality in which when i click the delete button my webgrid should get refreshed only not whole page(Main View).

**I want to refresh only partial View which Contains webgrid using jquery in mvc

My partial View Code is as follows:

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>

And My Main page view where i have delete button button code declared.

With that I am using 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!');
                }

            });

        });

My Delete controller code:

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

    }

Aucun commentaire:

Enregistrer un commentaire