Question

我的asp.net mvc razor视图中有以下内容： -

<div id="link">
@Ajax.ActionLink("Sync With IT360 >>", "Sync","TechnologyAudit", 
    new AjaxOptions {
 InsertionMode = InsertionMode.Replace,
 UpdateTargetId = "result"  ,
 LoadingElementId = "progress",
 HttpMethod="POST",
 OnBegin="disablelink",
 OnSuccess="enablelink"
}
)
   </div> 
    <p><img src="~/Content/Ajax-loader-bar.gif" class="loadingimage" id="progress" /></p>
<div id="result"></div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
    function disablelink() {
        $("link").attr("disabled", "disabled");
    };
    function enablelink() {
        $("link").removeAttr("disabled");
    };
</script>
}

我试图在点击它时禁用Ajax.Actinolink（以避免不必要的重复请求），然后在调用完成后重新启用它。以上是行不通的，链接不会被禁用？有人可以建议吗？感谢

Answer 1

ActionLink实际上只是一个锚元素。锚元素不支持禁用属性按钮。

然而，您可以做的是暂时删除锚元素的href，然后在请求完成后重新添加它。

试试这个：

首先，通过使用包含htmlAttributes参数的ActionLink重载确保您的ActionLink具有id。

@Ajax.ActionLink("Sync With IT360 >>", "Sync","TechnologyAudit",
    new AjaxOptions {
      InsertionMode = InsertionMode.Replace,
      UpdateTargetId = "result"  ,
      LoadingElementId = "progress",
      HttpMethod="POST",
      OnBegin="disablelink",
      OnSuccess="enablelink"
    }, new {@id = "ActionLinkId"}
)

将您的Javascript更新为以下内容：

<script type="text/javascript">

    var ref = "";

    function disablelink()
    {
        ref = $("#ActionLinkId").attr('href');
        $("#ActionLinkId").attr('href', 'javascript:;')
    };
    function enablelink() {
         $("#ActionLinkId").attr('href', ref)
    };
</script>

除此之外，您还可以在使用CSS加载内容时阻止鼠标光标对此链接作出反应。通过使用类似于此的CSS类：

.disabled {
    pointer-events: none;
    cursor: default;
}

然后，您可以在两个Javascript函数中的链接中添加和删除此类。

Answer 2

隐藏链接，显示加载图片。完成后，显示链接。

@Ajax.ActionLink("Sync With IT360 >>", "Sync","TechnologyAudit", 
    new AjaxOptions {
      OnBegin = "$(this).hide()",
      OnComplete = "$(this).show()",
      LoadingElementId = "imgLoading"
 })

Answer 3

对于初学者，您必须在ID前面加#：$("#link")

但我不确定您是否可以禁用这样的div。您可以做的是创建第二个标记，例如<span>。

<span id="linktext">Sync With IT360 >></span>

隐藏它

#linktext { display: none; }

然后根据状态显示和隐藏两个

<script type="text/javascript">
    function disablelink() {
        $("#link").hide();
        $("#linktext").show();
    };
    function enablelink() {
        $("#link").show();
        $("#linktext").hide();
    };
</script>

如何启用和禁用Ajax.Actionlink

3 个答案: