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

Question

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.

Bootstrap tabs expose several events which you can hook to as required: http://getbootstrap.com/javascript/#tabs-events. Also note that you're missing a `` in your HTML — Rory McCrossan, Nov 07 '16 at 12:46
you are calling a javascript method in you JS code. How it will hit to the Server side code? Clint side code and Server side code both are different. — Samir, Nov 07 '16 at 12:46
Create a method with name `function LoadImages(){}`, In this method you need to write the Jquery `ajax` call. — Samir, Nov 07 '16 at 12:49
@mybirthname I need to call c# method here. How do I do that? — Dheeraj Kumar, Nov 07 '16 at 13:13
@Samir, in Javascript, how to make call to server side method? — Dheeraj Kumar, Nov 07 '16 at 13:15
@DKR then you need to create a WebMethod see this thread http://stackoverflow.com/questions/6928533/calling-a-webmethod-with-jquery-in-asp-net-webforms also this http://www.aspsnippets.com/Articles/Calling-ASPNet-WebMethod-using-jQuery-AJAX.aspx — Rajshekar Reddy, Nov 07 '16 at 13:15
and would it work if I define WebMethod in .cs file instead of .aspx file? — Dheeraj Kumar, Nov 07 '16 at 13:18
As i mention in my comment, you need to call JS method, in side that method you need to call an ajax call. Directly from js you can't call any server side code. @DKR — Samir, Nov 07 '16 at 13:19
@Samir, Can you post some reference on how do I make ajax call? — Dheeraj Kumar, Nov 07 '16 at 13:21
http://stackoverflow.com/questions/9436534/ajax-tutorial-for-post-and-get or https://www.sitepoint.com/use-jquerys-ajax-function/. ther are lots of online tutorials are there, you can refer any one to understand properly. — Samir, Nov 07 '16 at 13:26
@Samir, I have changed the function using ajax. still its not working. Can you please suggest. thanks — Dheeraj Kumar, Nov 07 '16 at 13:37
@DKR you have to write the WebMethod in cs file itself .. and from there you can make DB call as usual. — Rajshekar Reddy, Nov 07 '16 at 13:45

RonyLoud · Accepted Answer · 2016-11-07T14:15:15.493

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

Please check that you should have Jquery.js file in header section. It's a simply a ajax call on the click of that particular div — RonyLoud, Nov 07 '16 at 13:44
I have jquery-3.1.1.js in header. I am getting alert(1) on tab click, but whatever is at server side is not executing. — Dheeraj Kumar, Nov 07 '16 at 13:47
I am using the technique provided [here](http://www.codeproject.com/Articles/831445/How-to-call-Server-side-function-with-JavaScript) — RonyLoud, Nov 07 '16 at 13:52
Please check my updated answer its working fine at my end. May it helps! — RonyLoud, Nov 07 '16 at 14:16

score 0 · Answer 2 · answered Sep 24 '21 at 17:34

An approach I took was to make it an html server control (runat="server") and activate the tab without using 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>

changed href to data-target because onserverclick() uses href. You can see this in the inspector once it's rendered.
I placed clientidmode="static" so the id is exactly as stated and doesn't get a parent naming container aggregated to it. You could remove this and use onclick="showTab('#<%=linkdivrecentQ.ClientID%>');" instead.

The showTab() activates the data-target specified in the <a>.

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

I will also add I am using an update panel inside the tab panel <div> to keep the active tab from changing to default due to postback. If you don't want to use an update panel you could make the call to showTab() in the code behind instead of the onclick() on control.

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

2 Answers2