c# - Accessing runat="server" control id in WebMethod

Question

html code is

<script type="text/jscript">
function ajaxcall() {
     $.ajax({
     type: "POST",
     url: "index.aspx/lvimgclick",
     contentType: "application/json; charset=utf-8",
     data: JSON.stringify({ value: "test" }),
     dataType: "json",      
    });
};
</script>

<img src='images/img1.jpg' onclick='return ajaxcall();' />  // calling script

<asp:LinkButton ID="lvlink1" OnClick="lvimg1_Click" CssClass="lv-under" runat="server"  >
<asp:Image ID="lvimg1" runat="server" ImageUrl="~/images/spacer.gif" />

<asp:LinkButton ID="lvlink2" OnClick="lvimg2_Click" CssClass="lv-under" runat="server"  >
<asp:Image ID="lvimg2" runat="server" ImageUrl="~/images/spacer.gif" />

<asp:LinkButton ID="lvlink3" OnClick="lvimg3_Click" CssClass="lv-under" runat="server"  >
<asp:Image ID="lvimg3" runat="server" ImageUrl="~/images/spacer.gif" />

<asp:LinkButton ID="lvlink4" OnClick="lvimg4_Click" CssClass="lv-under" runat="server"  >
<asp:Image ID="lvimg4" runat="server" ImageUrl="~/images/spacer.gif" />

.cs code

[WebMethod]
public static string lvimgclick()
{      
    return "hi";
}

protected void lvimg1_Click(object sender, EventArgs e)
{  

    lvlink1.CssClass = "lv-under";
    lvimg1.ImageUrl = "~/images/1.jpg";

    lvlink2.CssClass = "lv-under";
    lvimg2.ImageUrl = "~/images/spacer.gif";

    lvlink3.CssClass = "lv-under";
    lvimg3.ImageUrl = "~/images/spacer.gif";


    lvlink4.CssClass = "lv-under";
    lvimg4.ImageUrl = "~/images/spacer.gif";
}

What want is :

[WebMethod]
public static string lvimgclick()
{      
    lvimg1_Click(null, null);
    return "hi";
}

or

[WebMethod]
public static string lvimgclick()
{      
    lvlink1.CssClass = "lv-under";
    lvimg1.ImageUrl = "~/images/1.jpg";

    lvlink2.CssClass = "lv-under";
    lvimg2.ImageUrl = "~/images/spacer.gif";

    lvlink3.CssClass = "lv-under";
    lvimg3.ImageUrl = "~/images/spacer.gif";


    lvlink4.CssClass = "lv-under";
    lvimg4.ImageUrl = "~/images/spacer.gif";
    return "hi";
}

what shall have to do ? Also have to use lvimg1_Click(null, null); and lvlink1.CssClass = "lv-under1"; at many function which are not to be a webmethod

Answer 1

If you use jquery you could do like below

 $.ajax({
   type: "POST",
   url: "index.aspx/lvimgclick",
   contentType: "application/json; charset=utf-8",
   data: JSON.stringify({ value: "test" }),
   dataType: "json", 
   success:function(result){

     if(result.cssclass)
     {
       $('#<%= lvlink1.ClientID %>').addClass(result.cssclass);
     }
   }     
  });

In WebMethod

   public class CustomResult
    {
        public string output{ get; set; }
        public string cssclass{ get; set; }
    }

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static CustomResult lvimgclick()
{      
    var result=new CustomResult{output="hi", cssclass="lv-under1"}

    return result;

}

Note:

Sometimes you may need to access the data with d, which was added by framework. like result.d.cssclass

EDIT:

In case if you want to update multiple link buttons, have a common css class defined for it in aspx.

<asp:LinkButton ID="lnk1" runat="server" CssClass="menu" Text="Home" />
<asp:LinkButton ID="lnk2" runat="server" CssClass="menu" Text="AboutUs" />

Then in your ajax call's success callback use class selector and update.

  success:function(result){

     if(result.cssclass)
     {
       $('a.menu').addClass(result.cssclass);
     }
   }