How to call web method of master page?

Question

Jquery/Javascript: Want to invoke updateNotification() Fuction after notification_count_span fade out and return false. web method is in master page.

<script type="text/javascript" >
    $(document).ready(function () {
        $("#notificationLink").click(function () {
            $("#notificationContainer").fadeToggle(300);
            $("#notification_count_span").fadeOut("slow");
            return false;
            // updateNotification()
        });

        //Document Click
        $(document).click(function () {
            $("#notificationContainer").hide();
        });
    });
    function updateNotification() {
        $.ajax({
            type: "POST",
            url: "SiteMaster.master/UpdateNotification",
            data: '{nForId: "' + $("#<%=sessionUnameHf.ClientID%>")[0].value + '" }',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                //alert(msg.d)
                //do nothing
            }
        });
    }
</script>

HTML Html code in master page.

 <asp:Label ID="notification_count_lbl" runat="server" Text=""></asp:Label></span>
            <asp:LinkButton ID="notificationLink" runat="server">Notifications</asp:LinkButton>
<!--<a href="#" id="notificationLink1" runat="server" onclick="updateNotification()">Notifications</a>-->
<div id="notificationContainer">
<div id="notificationTitle">Notifications</div>
<div id="notificationsBody" class="Repeater">
    <asp:Repeater ID="Repeater1" runat="server" EnableViewState="true" onitemcommand="view">        
<ItemTemplate > 
    <p>
<tr>
<td><asp:Label ID="Label1" runat="server" CssClass="trHeader" Text='<%#Eval("NotificationTitle")%>'/></td>
    </tr></p><p><br />
<tr class="trMessage">
<td>
    <asp:LinkButton ID="nDescLbl" runat="server" CommandName="viewCase" Text='<%#Eval("NotificationDescription")%>' CssClass="trMessage"></asp:LinkButton>
    <asp:Label ID="Label2" runat="server" Text='<%#Eval("NotificationID")%>'></asp:Label>
    <asp:HiddenField ID="nIdHf" runat="server" Value='<%#Eval("NotificationID")%>'/>
</td>
    </tr></p><p><br />
<tr class="trFooter">
<td>
    <asp:Label ID="Label3" runat="server" CssClass="trFooter" Text='<%#Eval("NotificationDate")%>'/></td>
    </tr></p>
    <br />
    <hr style="color:darkgray;"/>
    </ItemTemplate>
    </asp:Repeater>
</div>
<div id="notificationFooter"><a href="Home.aspx" style="color:#006699;">See All</a></div>
</div>

WebMethod webmethod in master page.

[System.Web.Services.WebMethod]
public static string UpdateNotification(string nForId)
{
    string returnValue = string.Empty;
    try
    {
        using (SqlConnection connection = ConnectionManager.GetDatabaseConnection())
        {
            SqlCommand cmd = new SqlCommand("UpdateNotification", connection);
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@nForId", nForId);
            returnValue = cmd.ExecuteScalar().ToString();
            connection.Close();
        }
    }
    catch
    {
        returnValue = "error";
    }
    return returnValue;
}

Answer 1

It is not possible due to MasterPages being a server side resource that will not be served by IIS, which is being referenced in your $.ajax call.

If you require that multiple content pages be able to access a WebMethod, move your code to a Web Service (ASMX) instead.

// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService]
public class SiteService: System.Web.Services.WebService
{
    [WebMethod]
    public static string UpdateNotification(string nForId)
    {
        string returnValue = string.Empty;
        try
        {
            using (SqlConnection connection = ConnectionManager.GetDatabaseConnection())
            {
                SqlCommand cmd = new SqlCommand("UpdateNotification", connection);
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.AddWithValue("@nForId", nForId);
                returnValue = cmd.ExecuteScalar().ToString();
                connection.Close();
            }
        }
        catch
        {
            returnValue = "error";
        }
        return returnValue;
    }
}

$.ajax({
    type: "POST",
    url: "SiteService.asmx/UpdateNotification",
    ...

If the only purpose of #notificationLink is to invoke javascript, then you can get rid of the server control.

<a id="notificationLink">Notifications</a>

$("#notificationLink").click(function (e) {
    e.preventDefault();
    $("#notificationContainer").fadeToggle(300);
    $("#notification_count_span").fadeOut("slow");
    updateNotification();
});

Read more: event.preventDefault()