仅当数据成功存储到数据库而不回发 asp.net mvc5 EF6 时，单击更改按钮答案

【问题标题】：Change Button on-click only if data is successfully stored to database without postback asp.net mvc5 EF6仅当数据成功存储到数据库而不回发 asp.net mvc5 EF6 时，单击更改按钮
【发布时间】：2016-01-29 05:34:40
【问题描述】：

我有一种情况，我必须将“发送请求”按钮更改为“请求发送”。我的表单中有“n”个这样的按钮，我需要为所有这些按钮更改按钮

仅当数据成功存储到数据库中而不重新加载表单时，该按钮才会更改。这就是我将数据存储到数据库的方式。

public ActionResult SendRequest(string RequestId)
{
        MyRequest request = new MyRequest();
        request.UserId = loggedInUserId;
        request.FutureFriendId = RequestId;
        request.Status = RequestStatus.Pending;
        db.MyRequests.Add(request);
        db.SaveChanges();
        return View();
}

稍后我可能想将“请求发送”按钮更改为“取消请求”以回滚操作。请给我一个相同的解决方案。谢谢！

【问题讨论】：

你试过什么？您需要使用 ajax 来保持在同一页面上。然后，您可以返回一个表明成功或其他结果的结果，并相应地更新 DOM。
您可以删除毫无意义的if(ModelState.IsValid) 行-您没有发回模型，因此IsValid 将始终正确。
对不起，如果我的问题不太清楚，我尝试使用 ajax，但有 n 个相同形式的“发送请求”按钮。认为使用 ajax 不是最好的方法，但我的想法可能是错误的。
Ajax 是您唯一的选择，如果您希望 无需重新加载表单

标签： c# jquery asp.net entity-framework asp.net-mvc-5

【解决方案1】：

我会从 ActionResult 返回一个布尔值。您的 JS (Jquery) 代码应如下所示：

$(btn).click(function(){
$(btn).attr("disabled", "disabled").val("Sending Request...");
$.ajax({
            url: '/yoururl',
            type: 'GET',
            data: { RequestId: '12345' },
            async: true,
            success: function(returnParameters) {
                $(btn).attr("disabled", "disabled").val("Request Sent");
            },
            error: function(jqXHR, textStatus, errorThrown) {
$(btn).removeAttr("disabled").val("Send Request"); // error, reset.
            }
        });
});

这将为按钮提供三种情况：

发送中
已发送
正常

我还将按钮设置为“禁用”以防止更多点击，以防它正在进行/请求已发送。

【讨论】：