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。所以我想在那里缺少一小部分代码。另外，我如何fadeOut仅将我当前删除的记录改为所有列表。

 <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
    });
});

最后，更改操作方法以返回表示成功的<{1}}或其他

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等。

Answer 2

部分重新加载div

$("#listTelNumbers").load(location.href + " #dl-horizontal");

或重新加载整个页面，无需刷新

$(document.body).load(location.href);

为了完整参考，我在这里找到了一个演示Partially load a div without refreshing page in javascript and php.

Answer 3

您可以使用jQuery查找标记为删除的<dt>元素并将其淡出（或将其从DOM中完全删除）：

  $.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) {
        var dtCollection = $("dt");

        for (var i = 0; i < dtCollection.length; i++) {
            var text = $(dtCollection[i]).text();
            text = text.trim();

            if (text == phone) {
                $(dtCollection[i]).parent().fadeOut('slow');
                //$(dtCollection[i]).parent().remove();
            }
        }
    },
    async: true,
    processData: false
});

如何在MVC中的AJAX请求后刷新div？

3 个答案: