Question

我尝试使用webgrid在mvc中创建表，当我单击删除按钮时，表中的数据将随ajax jquery中的Json Response中的数据而变化。我试图在表中显示json响应，但你不能。我尝试使用$ .each但仍然没有为我工作。我尝试跟随this answer，但仍然不能为我工作..有人可以告诉我并帮助我，如何从json结果显示jquery中的数据并更改我的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);
})
    )
    )

这是我的jquery代码

$('.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();
                }
            });
        });

拜托，我需要帮助..谢谢......

Answer 1

在success: function (data) {

之后试试

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

如何使用带有JQuery的ajax中的json响应使用webgrid替换表数据

1 个答案: