Ajax GET 带通知

Question

我一直在寻找示例，但我一定是使用了错误的搜索词组，因为我一直没有找到。

我有一个显示在局部视图中的 "list"，并且正在使用以下代码生成一个 Ajax 操作 link：

    <td>
    @Ajax.ActionLink(
    "Add", "AddClient", new { id = consignee.nId, mailingListId = consignee.MailingListId },
        new AjaxOptions
        {
            HttpMethod = "GET",
            LoadingElementId = "loading2",
            LoadingElementDuration = 750
        })
   </td>

此调用有效，但我希望在屏幕顶部显示一条通知，上面写着 "Record Added"。

当前样式将所有信息向下移动，看起来很奇怪。

<body>
   <div id="loading2" style="display:none">
     <div class="alert alert-success">
        <strong>Added!</strong>
     </div>
   </div>

我想要一段文字只在屏幕顶部弹出，在现有的徽标上方，而不是向下移动任何当前 HTML。

如果有人能提供帮助，我将不胜感激， TIA

Answer 1

您可以在通知 div 中添加 css class 并将其定位为绝对位置并指定 top 位置。您最初可以隐藏它（与另一个 css class）并在您想要显示通知时更新可见性。

<div id="loading2" class="alwaysTop hidden">
     <div class="alert alert-success">
        <strong>Added!</strong>
     </div>
</div>

而 css 将是

.alwaysTop
{
  position : absolute;
  top:0px;
  right:0px;
}
.hidden
{
  display:none;
}

这会将您的 div 添加到页面的右上角。每当您想显示通知消息时，请删除 hiddenClass。

$("#loading2").removeClass("hidden");

Here 是工作示例。

如果你不想做更多自定义的东西，写 HTML 标记（没有 Ajax.ActioLink 方法）并自己控制 ajax 功能总是好的。

<td>
    @Html.ActionLink("Add", "AddClient","Client", 
    new {id = consignee.nId, mailingListId = consignee.MailingListId },
                                                new {@id="addLink"})

和javascript来处理这个link

的点击事件

$(function(){
  $("#addLink").click(function(e){
    e.preventDefault();
    $.get($(this).attr("href"),function(res){
       if(res.status==="success")
       {
         $("#loading2").removeClass("hidden");
       }
    });
  });
});

假设您在 ClientController

中有一个名为 AddClient 的操作方法

public ActionResult AddClient(int id, int mailingListId)
{
  // do something 
  return Json(new { status="success"}, JsonRequestBehavior.AllowGet);
}

Answer 2

如果您不想重新发明通知的轮子，您可以使用 jquery 通知插件。查看 Notify.js

Ajax GET 带通知

Ajax GET with notification

asp.net-mvc

asp.net-ajax