javascriptc#jqueryasp.netbootstrap-tabs

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


I have created a tab in ASP.Net using Bootstrap.

<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>

I want to make a server call on click of tabs, but since it is in data-toggle mode, it can't fire anything on server side. I tried to make a call using 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>

For the code in server side:

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

But server code is not called. Thanks for your help.


Solution

  • Use this:

    <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 function for the GetCurrentString function in #linkdivrecentQ anchor:

       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);
    }
    

    here GetCurrentString is method in the server code

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