Parameter from codebehind to jquery [ Master Page]

Question

Hi All,

I am creating Menu in the master page using JQuery. i am passing the id of the link to jquery using $.ajax({});

Problem:

Getting failed: Showing error message in AjaxFailed(result) function.

Code:html[JQuery]

$.ajax({
             type: "POST",
            url: "Master.Master.cs/UserStatus",
            contentType: "application/json; charset=utf-8",
            data: "{}",
            dataType: "json",
            success: AjaxSucceeded,
            error: AjaxFailed
        });

function AjaxSucceeded(result) {

        if (result.d.length != 0) {
            for (var i = 0; i < result.d.length; i++) {
                $(result.d[i]).hide();
            }
        }
    }

    function AjaxFailed(result) {
        alert("Error");
    }  

c# Code:Codebehind

private static List<string> xx;
[WebMethod]
    public static List<string> UserStatus()
    {
        return xx;
    }
protected void Page_Load(object sender, EventArgs e)
    {
        xx = new List<string> {"#ll1", "#ll2" };

    }

Answer 1

If you've not done so you will need to add the [ScriptService] attribute to your webmethod as this

Indicates that a Web service can be invoked from script

See ScriptServiceAttribute

Answer 2

What the webmethod attribute does is to say that this method should respond to a certain url (a little bit like routing in asp.net mvc). As I don't use webforms I don't really know what logic it uses when it decides what url the method should respond to. But my guess is that the url should be something like "Master.cs/UserStatus" (not sure about the .cs extension). And that is of course a relative url, so you can try something like this: <%=ResolveUrl("~/Master.cs/UserStatus")%> (if the masterpage is in your root folder). Then your example should be something like this:

$.ajax({
        type: "POST",
        url: '<%=ResolveUrl("~/Master.cs/UserStatus")%>',
        contentType: "application/json; charset=utf-8",
        data: "{}",
        dataType: "json",
        success: AjaxSucceeded,
        error: AjaxFailed
    });

Update

The .cs extension is probably wrong. But I don't think you should have that in a master page anyway. You should probably have it in a web service or in a .ashx handler or something if you want to use ajax. But with you last comment it seems that you don't need to use ajax (and if you don't need that, you shouldn't). The problem in the code you wrote in the comment is probably that the id is wrong (remember that you need the client id in javascript).

But I would probably do it something like this:

<script type="text/javascript">
    var statuses = [];
    <%foreach(var status in UserStatus()) {%>
        statuses.push(<%=status%>);
    <%}%>
</script>

This will render this javascript in the browser:

<script type="text/javascript">
    var statuses = [];

        statuses.push("#ll1");
        statuses.push("#ll2");

</script>

Then you will have your statuses in the statuses array.

Answer 3

I think that the problem is that you try to post to the .cs file. The extension .cs is not served by ISS due to security reasons. So even though your method lifes in the code behind file, you have to post to the .aspx file. ASP.NET will do the rest for your. So try:

$.ajax({
         type: "POST",
        url: "/Master.Master.aspx/UserStatus",
        contentType: "application/json; charset=utf-8",
        data: "{}",
        dataType: "json",
        success: AjaxSucceeded,
        error: AjaxFailed
    });

function AjaxSucceeded(result) {

    if (result.d.length != 0) {
        for (var i = 0; i < result.d.length; i++) {
            $(result.d[i]).hide();
        }
    }
}

function AjaxFailed(result) {
    alert("Error");
}

Answer 4

Like Andre and Mattias mentioned, the .cs extension is not served, so you would have to use a .aspx extension to get to the WebMethod.

The problem I see in your example is that you are placing the method in the MasterPage (which would have a .master extension) which is also not served, so you can't call the web method from it.

A workaround you could use is to define it in a class that inherits from Page, and have all of your pages inherit from that class. Since its a public method, it will be public on all of your pages and therefore available. Basicly, a base page for your project's pages. In that case you would only need to use your current page's address to make the call. This is only usefull if it's something you will use on every page, like a menu.

A second workaround you can use is to define the WebMethod in a .asmx Webservice placed in the project. It would work like calling the WebMthod on a page, only you would have to use the .asmx Webservice's address instead of the page's to make the call.