如何在 asp.net 中的 bootstrap 选项卡上单击选项卡进行服务器调用

Question

我使用 Bootstrap 在 ASP.Net 中创建了一个选项卡。

<div>
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active">
            <a href="#divrecentQ" id="linkdivrecentQ" aria-controls="divrecentQ" role="tab" data-toggle="tab">
                Recent Questions
            </a>
        </li>
        <li role="presentation">
            <a href="#divpriorityQ" aria-controls="divpriorityQ" role="tab" data-toggle="tab">
                Priority Questions
            </a>
        </li>
    </ul>

    <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active" id="divrecentQ">
            ...Recent
            <div role="tabpanel" class="tab-pane fade" id="divpriorityQ">
                ..Priority.
            </div>
        </div>

我想通过单击选项卡调用服务器，但由于它处于 data-toggle 模式，它无法在服务器端触发任何内容。我尝试使用 jQuery.

拨打电话

<script>


    $("#linkdivrecentQ").click(function () {

        alert($(this).attr('id'));
        loadimages($(this));
        $.ajax({
            type: 'POST',
            url: '<%= ResolveUrl("~/amain.aspx/LoadImages") %>',
            data: '{ }',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (msg) {
                alert(msg.d)
            }
                    });
    });

</script>

对于服务器端的代码：

public static void LoadImages()
{
    log.Debug("LoadImages is called");
}

但是没有调用服务器代码。感谢您的帮助。

Answer 1

使用这个：

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<div> 
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#divrecentQ" id="linkdivrecentQ" onclick="GetCurrentString();" aria-controls="divrecentQ" role="tab" data-toggle="tab">Recent Questions</a></li>
                    <li role="presentation"><a href="#divpriorityQ" aria-controls="divpriorityQ" role="tab" data-toggle="tab">Priority Questions</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="divrecentQ">
                        ...Recent
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="divpriorityQ">..Priority.</div>

                </div>
            </div>

jquery #linkdivrecentQ 锚点中 GetCurrentString 函数的函数：

   function GetCurrentString() {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetCurrentString",
            data: '{name : "pandey" }',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            failure: function (response) {
                alert(response.d);
            }
        });
    }

function OnSuccess(response) {
    alert(response.d);
}

此处 GetCurrentString 是服务器代码中的方法

[System.Web.Services.WebMethod]
    public static string GetCurrentString(string name)
    {
        return "vishal "+name;
    }

Answer 2

我采用的一种方法是将其设为 html 服务器控件 (runat="server") 并使用 data-toggle="tab" 激活选项卡 而无需 。

     <a data-target="#divrecentQ" id="linkdivrecentQ" aria-controls="divrecentQ" 
        role="tab" runat="server" onserverclick="GetCurrentString" 
        onclick="showTab('#linkdivrecentQ');" clientidmode="static">
        Recent Questions
     </a>

将 href 更改为 data-target 因为 onserverclick() 使用 href。渲染后您可以在检查器中看到它。
我放置了 clientidmode="static" 所以 id 与声明的完全一样，并且没有将父命名容器聚合到它。您可以删除它并改用 onclick="showTab('#<%=linkdivrecentQ.ClientID%>');"。

showTab() 激活中指定的数据目标。

    function showTab(id) {
        $(id).tab('show');
    }

我还要补充一点，我正在选项卡面板

中使用更新面板，以防止活动选项卡因回发而更改为默认选项卡。如果您不想使用更新面板，您可以在后面的代码中调用 showTab() 而不是控件上的 onclick()。

如何在 asp.net 中的 bootstrap 选项卡上单击选项卡进行服务器调用

How to make a server call on tab click in bootstrap in asp.net

javascript

c#

asp.net

jquery

bootstrap-tabs