javascript - 淡入 div 并执行服务器端方法

Question

我今天在 asp.net 上遇到了困难。我有一个按钮。当按下此按钮时，它应该淡入 div 并执行服务器端方法(获取数据)。我该怎么办？

我的按钮淡入淡出工作，但当我附加 onclick 或 onserverclick 事件时，它停止工作。我已经尝试过 asp:Button 和 input。

<input id="btnSelectSupplier" type="button" class="btn btn-primary btn-sm " value="Select Supplier" runat="server" onserverclick="btnSelectSupplier_Click" />

要淡入的 div..

<div id="divSelectSupplier" class="ui-widget-content">
        <div class="viewSupplierDetailsHeader">
            <h3>Select Supplier</h3>
            <button type="button" class="btn btn-danger btn-sm pull-right CloseViewSupplierDetails">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Close
            </button>
        </div>
        <div id="" class="text-center" runat="server">
            <h4>Please Wait..</h4>
        </div>
    </div>

JS 端:

$('#btnSelectSupplier').click(function () {
    var thisResource = $(this).position();
    var left = thisResource.left - 350;
    var top = thisResource.top - 50;
    $("#divSelectSupplier").css("left", left).css("top", top).fadeIn(600);
});

最后是背后的代码:

protected void btnSelectSupplier_Click(object sender, EventArgs e)
    {
        divSelectSupplierContainer.InnerHtml = "<h2>Done.</h2>";
    }

Answer 1

您应该使用 Jquery post 事件将数据发布到服务器，而不是使用服务器 onclick，然后在回调中您可以淡出 div

$('#btnSelectSupplier').click(function () {
    var thisResource = $(this).position();
    var left = thisResource.left - 350;
    var top = thisResource.top - 50;
    $("#divSelectSupplier").css("left", left).css("top", top).fadeIn(600);

    $.post("urlForPost", { //data to post },function(returnData){
       $("#divSelectSupplier").fadeOut(600);
    });
});