Question

我一直在寻找一个例子，但我必须使用错误的搜索词，因为我还没找到。

我有一个＆＃34;列表＆＃34;在部分视图中显示，并使用以下代码生成Ajax Action链接：

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

此通话有效，但我想在屏幕顶部显示一条通知，其中显示＆＃34;已添加记录＆＃34;。

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

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

我想在屏幕顶部弹出一段文字，在那里的徽标上方，而不是移动任何当前的HTML。

如果有人可以提供帮助我真的很感激ti， TIA

Answer 1

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

<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来处理此链接的点击事件

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

假设您在AddClient

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

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

Answer 2

如果您不想重新发送通知，可以使用jquery插件进行通知。查看Notify.js

Ajax GET通知

2 个答案: