How to call webmethod from aspx.vb page in vb.net

See more:

VB

ASP.NET

jQuery

What I am trying to do, Is to call WebMethod from aspx.vb, Below is my WebMethod syntax which is in Default.aspx.vb

<System.Web.Services.WebMethod()> _
<ScriptMethod(UseHttpGet:=True, ResponseFormat:=ResponseFormat.Json)> _
Public Shared Function dat( _
ByVal Id As Integer) As List(Of items)
    Dim eve As New List(Of items)()
    eve = (From row In getItems(Id).Rows
           Select New items With {
                                .Name = row("Name").ToString(),
                                .Description = row("Description").ToString(),
                                .ItemPic_url = row("ItemPic_url").ToString()}).ToList()
    Return eve
End Function

Below is my jquery function from which I am calling web method:
Note: My Jquery function is placed in my master page and I am calling it from startup Default.aspx page.

function getItems() {
        $("#tbody").empty();
        var id = $("select")[0].value;
        $.ajax({
            url: "Default.aspx/dat",
            data: { Id: id },
            contentType: "Application/json; charset=utf-8",
            responseType: "json",
            method: "POST",
            success: function (response) {
                $("#tbody").empty();
                var rows = response.d;
                var count = response.d.length;
                var table = document.getElementById("tbody");
                var row;
                var cell;
                for (var i = 0; i < rows.length; i++) {
                    if (i % 4 == 0) {
                        row = table.insertRow();
                    }
                    cell = row.insertCell();  //simply insert the row
                    cell.innerHTML = "<td><ul><li style='text-align:center;'><img id='imgload' width='190px'; height='166px' src='../Images/CatalogImgs/" + rows[i].ItemPic_url + "' alt='No Image Found' /></li><li style='margin:4px 6px;font-weight: 600;font-family: Calibri;font-size: 16px;'>" + rows[i].Name + "</li><li style='margin:4px 6px;color: #808080;font-weight: 600;'><p>" + rows[i].Description + "</p></li></ul></td>";
                    if (document.getElementById("tbody").rows[0].cells.length > 0)
                    {
                        //alert(document.getElementById("tbody").rows[0].cells.length);
                        switch (rows.length) {
                            case 1:
                                $("#tbody > tr > td").css('padding-left', '18%');
                                break;
                            case 2:
                                $("#tbody > tr > td").css('padding-left', '12%');
                                break;
                            case 3:
                                $("#tbody > tr > td").css('padding-left', '6%');
                                break;
                            default:
                                $("#tbody > tr > td").css('padding-left', '1%');
                        }
                    }
                }
            },
            error: function (xhr) {
                alert(xhr.status);
            },
            Failure: function (response) {
                alert(response);
            }
        });
    }

Problem: I am not entering in my web method. By trying debugging from browser. I am getting error which is mention below:

Unknown web method dat.
 Parameter name: methodName
 at System.Web.Script.Services.WebServiceData.GetMethodData(String methodName)
 at System.Web.Handlers.ScriptModule.OnPostAcquireRequestState(Object sender, EventArgs eventArgs)
 at System.Web.HttpApplication.SyncEventExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute()
 at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)

What I have tried:

I am tried all above code which I mentioned.