Question

我有一个带有按钮的Ajax表单，我希望按钮在客户端等待来自服务器的响应时具有“加载”文本...这就是我现在拥有的：

<div id="updateButton">
    @using (Ajax.BeginForm("Donate", "Home", new AjaxOptions() { UpdateTargetId = "updateButton" ,InsertionMode = InsertionMode.Replace, }))
    {
        <input type='hidden' name='receiverID' value=@Model>
        <button type="submit" data-loading-text="Loading..." class="btn btn-primary" >Loading state </button>
    }
</div>

但它不起作用。

包括bootstrap.js，jquery.js和jquery-unobtrusive-ajax.js ......

Answer 1

如果您想使用Ajax.BeginForm选项更改按钮加载状态，请参阅以下内容：

<script>
    function onBegin() {
        $("#mybtn").hide();
    }

    function onComplete() {
        $("#mybtn").show();
    }
</script>
@using (Ajax.BeginForm("Donate", "Home", new AjaxOptions() { UpdateTargetId = "updateButton", InsertionMode = InsertionMode.Replace, LoadingElementId = "resultLoadingDiv", OnBegin = "onBegin", OnComplete = "onComplete" }))
{
    <input type='hidden' name='receiverID' value=@Model>
    <input type="submit" id="mybtn" value="OK" />
    <button type="button" id="resultLoadingDiv" style="border: slategray 1px solid; display: none;margin: auto;">
           Loading...
    </button>
}

如果您只想使用bootstrap，请参阅以下内容：

   <div id="updateButton">
        @using (Ajax.BeginForm("Donate", "Home", new AjaxOptions() { UpdateTargetId = "updateButton" ,InsertionMode = InsertionMode.Replace, }))
        {
            <input type='hidden' name='receiverID' value=@Model>
            <button type="submit" data-loading-text="Loading..." class="btn btn-primary" >Loading state </button>
        }
    </div>
    <script>
        $('.btn').click(function () {
                var btn = $(this)
                btn.button('loading')
                    setTimeout(function() {
                        btn.button('reset')
                    }, 3000);
                });
     </script>

Bootstrap按钮在MVC中加载状态和Ajax助手

1 个答案: