locked
How do I pass referenced control values through javascript to pagemethods/webmethods? RRS feed

  • Question

  • This is my first time trying to use Pagemethods, I'm 9 straight hours into this and oh-so-close to doing what I need to do, which is pass the reference of a chart control into my webmethod.

    I have the general concept working - I can pass a string parameter and other simple things into the webmethod, but when I try to pass a reference to my chart control...i guess my syntax is wrong because it just skips over the pagemethods call.  Honestly, I don't know what I'm doing, because I haven't done a lot with javascript, either.

    Here's my pertinent code:

    scriptmanager (as you can see I was playing with webservices also):

        <asp:ScriptManager ID="Scriptmanager1" runat="server" EnablePageMethods="true">
            <Services>
                <asp:ServiceReference Path="~/SPV/spv.asmx" />
                <%--<asp:ServiceReference Path="https://assessment.jefferson.kyschools.us/DMA/SPV/spv.asmx" />--%>
            </Services>
        </asp:ScriptManager>

    Chart Control setup and the code calling the javascript function (I'm using bootstrap):

    <div runat="server" class="accordion-heading">
        <span class="caret"></span>
        <a id="aFA1SM1" runat="server" style="color: Black" class="accordion-toggle" data-toggle="collapse"
            data-parent="#accFA1SM1" href="#divFA1SM1" onclick="getData()">Increase <strong>achievement</strong> total by level as measured by the state assessments.
    </a>
    </div> 
    <div id="divFA1SM1" runat="server" class="accordion-body collapse out">
        <div id="divchFA1SM1" runat="server" class="accordion-inner">
            <asp:Chart ID="chFA1SM1" runat="server" DataMember="DefaultView"></asp:Chart>
        </div>
    </div>
    

    javascript:

    function getData() {
        ct = document.getElementById('<%= chFA1SM1.ClientID %>').value;
        PageMethods.getData(function (returnValue) {
            alert(returnValue.Name + ":" + returnValue.Value);
        });
    }
    

    My codebehind:

            [WebMethod]
            public static void getData(object chrt)
            {
                LoadGraphFA1SM1();
            }
    

    I've put alerts around the javascript and have a breakpoint on the function in my webmethod, that's how I know that strings and other parms work.  

    Any help would be so appreciated, I am banging my head right now.  If interested, I'll explain why I'm doing it this way, and if somebody has a better suggestion, please feel free  to share.  The reason I'm taking this route is because I am using bootstrap for its platform scalability.  The chart is in a bootstrap accordian and is initially hidden.  The anchor tag that calls the onclick event is what displays/opens the chart.  This whole report is for board members and will have a couple dozen charts.  The chart controls want to load when the page is loaded, and with so many charts, it's taking too long.  Ultimately, I just need to not have the charts load until the onClick event.  The obvious answer seemed to be to replace the anchor tab with a linkbutton, but from what I can tell, linkbuttons don't use the #href tag which the accordian needs, and also the data-toggle call is "disabling" the onclick event with a linkbutton.  I read somewhere that the fact that data-toggle is calling a javascript, that's why it won't call a codebehind function as well.  With linkbuttons not being an option, my next thought was to get javascript to call the codebehind, which I thought was something easy...9 hours later, here I am...

    Again, any help you can provide would be fantastic!!

    Sunday, January 26, 2014 1:17 AM

Answers

  • thanks for the feedback!  I'm sorry if I wasn't completely clear -- I was using breakpoints, that's how I discovered that I was successfully passing simple things such as strings and integers into my webmethods, but not references.

    Any way, I ended up going in a completely different direction and using Google charts.  They look good, and I found an incredibly helpful, step-by-step site that walked through implementing Google charts and populating them with data from a database, the link is below for anybody else that may find it useful:

    http://www.dotnetfox.com/articles/how-to-create-dynamic-google-chart-in-Asp-Net-using-C-Sharp-1031.aspx

    • Marked as answer by Angie Xu Friday, February 7, 2014 5:20 AM
    Wednesday, January 29, 2014 1:18 PM

All replies

  • Hi puffster

    > when I try to pass a reference to my chart control...i guess my syntax is wrong because it just skips over the pagemethods call.

    First you could have a try put breakpoint in your application, it will be helpful for you to troubleshoot.

    If you want to pass control values from javaScript to a C# WebMethod, generally we could follow these steps:

    • Add a Script Manager to the page
    • Add a new web service file to the project
    • Add the attribute [ScriptService] to the service class
    • Create a method that accepts and returns a string ie:
    • Add the attribute [ScriptMethod] to the method
    • On the aspx page with the script manager, add a Service reference to the asmx file
    • Call the server side method in javascript qualifying it with the full namespace.

    There are some discussion about passing control values from javaScript to a C# WebMethod here, I think it is good reference for us.

    How to pass control values from javaScript to a C# WebMethod

    Best regards

    Angie


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Monday, January 27, 2014 1:32 AM
  • thanks for the feedback!  I'm sorry if I wasn't completely clear -- I was using breakpoints, that's how I discovered that I was successfully passing simple things such as strings and integers into my webmethods, but not references.

    Any way, I ended up going in a completely different direction and using Google charts.  They look good, and I found an incredibly helpful, step-by-step site that walked through implementing Google charts and populating them with data from a database, the link is below for anybody else that may find it useful:

    http://www.dotnetfox.com/articles/how-to-create-dynamic-google-chart-in-Asp-Net-using-C-Sharp-1031.aspx

    • Marked as answer by Angie Xu Friday, February 7, 2014 5:20 AM
    Wednesday, January 29, 2014 1:18 PM
  • Hi puffster

    >Any way, I ended up going in a completely different direction and using Google charts.  They look good, and I found an incredibly helpful.

    Thanks for your feedback, this is really useful method to create dynamic Google chart in ASP.NET.

    Best regards

    Angie


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Friday, February 7, 2014 5:20 AM