javascript - MVC中AJAX请求后如何刷新div？

Question

我不知道使用AJAX后如何刷新数据。这是我已经拥有的:

前端:

@model TFU.Model.DB_USER

    <div id="listTelNumbers">
        @foreach (var item in Model.DB_USER_PHONES)
        {
            <dl class="dl-horizontal">
                <dt>
                    @item.PHONE
                </dt>
                <dd>
                    <button id="removeButton" class="btn btn-default" onclick="sendRequestToRemove('@item.USER_ID', '@item.PHONE')">Usuń</button>
                </dd>
            </dl>
        }
    </div>

脚本 - fadeOut 工作正常，但我不知道应该做什么fadeIn。所以我猜那里缺少一小部分代码。另外，我如何才能淡出仅当前删除的记录而不是所有列表。

 <script>
        function sendRequestToRemove(id, phone) {
            var data = {
                "USER_ID": id,
                "PHONE": phone
            }


            $.ajax({
                url: '/User/RemoveTelNumber',
                data: JSON.stringify(data),
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                error: function (err) {
                    alert('Error: ' + err.statusText);
                },
                success: function (result) {
                    $('#listTelNumbers').fadeOut(800, function () {
                        form.html('#listTelNumbers').fadeIn().delay(2000);
                    });
                },
                async: true,
                processData: false
            });
        }      
    </script>

后端:

public bool RemoveTelNumber(DB_USER_PHONES model)
{
    var user = db.DB_USER_PHONES.First(x => x.USER_ID == model.USER_ID && x.PHONE == model.PHONE);
    db.DB_USER_PHONES.Remove(user);
    db.SaveChanges();
    return true;
}

Answer 1

首先，由于重复的 id 属性，您的循环会生成重复的无效 html。而且您不应该用行为污染您的标记 - 使用 Unobtrusive JavaScript 。更改 html 以删除 id 属性，添加 class 名称用于选择，并添加 data-* 属性用于要发布的值

@foreach (var item in Model.DB_USER_PHONES)
{
    <dl class="dl-horizontal">
        <dt>@item.PHONE</dt>
        <dd><button class="btn btn-default delete" data-id="@item.USER_ID" data-phone="@item.PHONE">Usuń</button></dd>
    </dl>
}

然后将脚本更改为

var url = '@Url.Action("RemoveTelNumber", "User")'; // always use Url.Action()
$('.delete').click(function() {
    var container = $(this).closest('dl');
    var data = { user_Id: $(this).data('id'), phone: $(this).data('phone') };
    $.post(url, data, function(response) {
        if (response) {
            // fadeout, then remove
            container.fadeOut(800, function() { $(this).remove(); })
        } else {
            // Oops - display an error message?
        }
    }).fail(function() {
        // Oops
    });
});

最后，更改操作方法以返回指示成功或其他情况的 JsonResult

[HttpPost]
public JsonResult RemoveTelNumber(DB_USER_PHONES model)
{
    var user = db.DB_USER_PHONES.First(x => x.USER_ID == model.USER_ID && x.PHONE == model.PHONE);
    db.DB_USER_PHONES.Remove(user);
    db.SaveChanges();
    return Json(true);
    // or if something went wrong, return Json(null);
}

我还建议您重命名类和属性，以遵循传统的命名实践 - UserPhone，而不是 DB_USER_PHONES、UserId，而不是 USER_ID 等