how to replace table data using webgrid with Json response in ajax using JQuery

Question

i try to create table in mvc with webgrid, when i click remove button, data in table will change with data from Json Response in ajax jquery. i try to show json response in table but u can't. i try using $.each and still not working for me. i try to followingthis answer but still not work for me.. can some one tell me and help me, how to show data from json result in jquery and change data in my webgrid table??

this my code

my webgrid

@grid.GetHtml(
    tableStyle: "grid",
    headerStyle: "head",
    alternatingRowStyle: "alt",
    firstText: "<< First",
    previousText: "< Prev",
    nextText: "Next >",
    lastText: "Last >>",
    mode: WebGridPagerModes.All,
    columns: grid.Columns(
    grid.Column("HotelID", "HotelID", @<text><label id="hotelIDMap
        ">@item.HotelID</label></text>),
        grid.Column("RKI Hotel", "Hotel", @<text>
                        <div style='width: auto; margin-right: 25px;'>
                            <div style="width: 65px; float: left;">Hotel Name </div>
                            : @item.HotelName
                            <br />
                            <div style="width: 65px; float: left;">Address </div>
                            : @item.Address
                            <br />
                            <div style="width: 65px; float: left;">Phone </div>
                            : @item.Telephone
                            <br />
                            <div style="width: 65px; float: left;">Fax </div>
                            : @item.Fax
                        </div></text>),
grid.Column("Mapping Hotel", "Mapping Hotel", format: (item) =>
{
    string tmp = "<div style='text-align: left;color: grey;height:auto;" +
                "width: auto;padding: 10px; overflow: auto; overflow-x:hidden;'>";
    var sub = new WebGrid(Model.SearchResult.Where(r => r.SearchFromHotel == item.HotelName), canSort: false);
    tmp += sub.GetHtml(
        tableStyle: "Subgrid",
        rowStyle: *"Subrow-" + @item.HotelID*,    (i want to change this row)
        headerStyle: "Subhead",
        alternatingRowStyle: "alt",
        columns: sub.Columns(
        sub.Column("HotelID", "HotelID", format: (subitem) =>
            {
                string temp3 = "<div class='idHOtel-" + subitem.HotelID.ToString() + "'style='text-align: left;color: grey;height:auto;" +
                    "width: auto; overflow: auto; overflow-x:hidden;'>";

                temp3 = temp3 + item.HotelID.ToString();
                temp3 += "</div>";
                return new HtmlString(temp3);
            }
        ),
        sub.Column("HotelName", "Hotel", format: (subitem) =>
        {
            string tmp2 = "<div style='text-align: left;color: grey;height:auto;" +
                "width: 175px; padding-right: 1em; overflow: auto; overflow-x:hidden;'>";
            tmp2 = tmp2 + "Hotel Name : ";
            foreach (var test in subitem.HotelName)
            {
                tmp2 += test;
            }
            tmp2 = tmp2 + "<br />";
            tmp2 = tmp2 + "Alamat : ";
            foreach (var address in subitem.Address)
            {
                tmp2 += address;
            }
            tmp2 = tmp2 + "<br />";
            tmp2 = tmp2 + "Phone Number : ";
            foreach (var Telephone in subitem.Telephone)
            {
                tmp2 += Telephone;
            }
            tmp2 = tmp2 + "<br />";
            tmp2 = tmp2 + "Fax Number : ";
            foreach (var Fax in subitem.Fax)
            {
                tmp2 += Fax;
            }
            tmp2 += "</div>";

            return new HtmlString(tmp2);
        }),
        sub.Column("Action", "Action", format: (subitem) =>
        {
            string tmp3 = "<div style='text-align: left;color: grey;height:auto;" +
                "width: auto; overflow: auto; overflow-x:hidden;'>";

            tmp3 = tmp3 + "<input id='" + subitem.HotelID + "' class='Mapping-Save' type='button' value='Select' />";
            tmp3 = tmp3 + " ";
            tmp3 = tmp3 + "<input id='" + subitem.HotelID + "' class='Mapping-Remove' type='button' value='Remove' />";
            return new HtmlString(tmp3);
        })
        ));
    tmp += "</div>";
    return new HtmlString(tmp);
})
    )
    )

and this my jquery code

$('.Mapping-Remove').on("click", function () {
            var tr = $(this).parents('tr:first');
            tr.find('.Mapping-Remove, .Mapping-Save').toggle();

            var HotelID = $('.idHOtel-' + $(this).attr('id')).text();

            $.ajax({
                url: '@Url.Action("RemoveMappingHotel", "Mapping")',
                type: "Post",
                data: {
                    HotelID: HotelID
                },
                dataType: 'json',
                success: function () {
                    alert("Success Remove Data");

                    $.ajax({
                        url: '@Url.Action("HotelForMapping", "Json")',
                        type: "Post",
                        data: {
                            HotelID: HotelID
                        },
                        dataType: 'json',
                        success: function (data) {
           //                 $('.Subrow-' + HotelID).replaceWith('<tr><td>3</td><td>4</td><td style="width:100px;"><input type="button" value="Remove" /></td><tr>' + ""
           //+ '<tr><td>3</td><td>4</td><td style="width:100px;"><input type="button" value="Remove" /></td><tr>' + ""
           //+ '<tr><td>3</td><td>4</td><td style="width:100px;"><input type="button" value="Remove" /></td><tr>');
                        }
                    });
                },
                error: function (data) {
                    alert("Error Mapping Data");
                    tr.find('.Mapping-Remove, .Mapping-Save').toggle();
                }
            });
        });

please, i need help.. thanks...

Answer 1

Try this after success: function (data) {

$('#NAME OF YOUR Grid content').html(LISTVALUES FROM CONTROLER);