Call method from jQuery before PostBack

Question

I am trying to call a C# method from jQuery before the PostBack happens. I've seen some solutions involving Ajax, but I am trying to do this from a UserControl (ascx), so I am not sure that calling a [WebMethod] would work.

Here is the .ascx markup and .cs code for the button and event:

<asp:ImageButton ID="inBottomButton" CssClass="img" title="In Bottom" runat="server" ImageUrl="~/Widgets/QuoteModule/Resources/images/In-Bottom.png" OnClick="inBottomButton_Click" AlternateText="In Bottom"/>

protected void inBottomButton_Click(object sender, ImageClickEventArgs e)
    {
        QuoteRequest multiQuote = new QuoteRequest { WindPosition = WindPosistions.InBottom };
        QuoteResponse quote = ValidateMultiQuoteRequest(multiQuote);
        ProcessMultiQuoteRequest(quote);
    }

If somebody can help me figure out a way to call the click event from jQuery, I would appreciate it. I know I can prevent the PostBack using (return false;) or preventDefault(e);

And I also know that I can check (IsPostBack) on PageLoad but I am already doing that load data, and that would not help me in this situation.

A user will click the ImageButton (inBottomButton) and generate data that is submitted through the event.

Thanks in advance.

EDIT: Instead of downvoting, can I get a suggestion on how to improve this question?

Isn't there an `OnClientClick` event on the button control that is for JS function calls? — jwatts1980, Apr 28 '15 at 13:40
yes, but I think you're misunderstanding my question. I can call that event and prevent the postback, but I also need to get the inBottomButton_Click method executed. @jwatts1980 — terbubbs, Apr 28 '15 at 13:45
I also want to add that the button_Click method deals with custom Objects that I am not sure how to create instances of in jQuery — terbubbs, Apr 28 '15 at 13:46
On image button click, you want to use AJAX to execute a server side function, which passes data back to the page, then the page posts back to the server with some of that data? — jwatts1980, Apr 28 '15 at 13:52
@jwatts1980 I'm not sure if you read my question, but I've seen some solutions involving Ajax. HOWEVER, I am trying to do this through a UserControl (.ascx file) so I am not sure that method will work. On this solution: http://stackoverflow.com/questions/19701658/how-to-call-c-sharp-method-in-jquery they define a url and POST to it, but I don't think I can define a url because I will eventually use this control as a Widget in Sitefinity CMS — terbubbs, Apr 28 '15 at 13:59
In regards to the url, the eventual page url would be www.website.com/quote-module but "quote-module.aspx/METHOD_NAME" is not recognized in jQuery. I would assume this is because I do not have an actual .aspx page named "quote-module" in my project, because this is a widget. — terbubbs, Apr 28 '15 at 14:00
@jwatts1980 is what I am writing not making sense? should I clarify any details? I'd appreciate any help. thanks. — terbubbs, Apr 28 '15 at 14:29
I am not really clear on your needs. I have created frontend and backend controls and modules for Sitefinity, so I have a handle on how to do that. What I don't get is what exactly you are trying to accomplish. I did find this SO article. See if this helps: http://stackoverflow.com/questions/886903/calling-asp-net-server-side-method-via-jquery — jwatts1980, Apr 28 '15 at 14:44
Well that is what I'm trying to do, but I don't know if it's possible set ajax properties like URL if I do not have a static URL to assign it to. — terbubbs, Apr 28 '15 at 15:15
@jwatts1980 this is a widget that could go on any page so I don't think that ajax method works. on top of that, I've attempted to implement that but when I try to enter the url, in this case the page name is "quote-module.aspx", IntelliSense does not recognize that as a page name, because this is a Sitefinity Page (not an asp created page) — terbubbs, Apr 28 '15 at 15:17
@jwatts1980 also, you'll notice that there are custom classes like QuoteRequest and QuoteResponse. is it possible to create instances of those from jQuery? Even if that is possible, I do not think it is a good idea to do that. I'd rather have any server side processing done on server side, but again, I run into the issue of preventing a PostBack — terbubbs, Apr 28 '15 at 15:20

score 1 · Answer 1 · answered Apr 28 '15 at 19:02

1

but I am trying to do this from a UserControl (ascx), so I am not sure that calling a [WebMethod] would work.

No problem with the ImageButton in a UserControl but the WebMethod method will need to be in the parent .aspx

Use OnClientClick to call a JS func that calls the WebMethod. Do what you need to then determine if you want to allow the OnClick by returning true or false.

 OnClientClick="return JsFunctionThatCallsTheWebMethod();"

answered Apr 28 '15 at 19:02

Drytin

366
2
8

Okay that sounds nice, but this is a widget that will go in a Sitefinity CMS Page. I'm not sure I can put the WebMethod in the parent .aspx because I am not directly editing CodeBehind for the default aspx. The only CodeBehind I have access to is from the UserControl and the ControlDesigner (which is a Sitefinity Widget Designer ascx). – terbubbs Apr 28 '15 at 19:07
In the Title and Properties of Sitefinity you can specify your own code behind or write the method into the .master.cs – Jon R. Apr 28 '15 at 20:25

score 1 · Answer 2 · answered Apr 28 '15 at 19:17

1

hmm, do you have the ability to create a separate page that could hold the WebMethod and then call it from your JS?

 $.ajax({
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            type: 'POST',
            url: '/SomeOtherPage.aspx/YourWebMethod',
            data: { s: $('#element').val() },
            success: function (data) {                    
                return true;
            },
            error: function (d) {
                //alert(d.error);
                return false;
            }
        });

answered Apr 28 '15 at 19:17

Drytin

366
2
8

Well I'm not 100% positive that I cannot do that,. From what I know about working with Sitefinity CMS and making custom widgets out of UserControls, there is no .aspx page involved with its creation. – terbubbs Apr 28 '15 at 19:41
I've seen this solution in a bunch of SO questions, but I do not think this is applicable. thanks anyway. – terbubbs Apr 28 '15 at 19:42
after seeing some sitefinity solutions regarding this issue, i think your suggestion is actually correct. thank you. – terbubbs Apr 29 '15 at 14:10

score 1 · Accepted Answer · edited May 23 '17 at 12:29

1

You can use any standard ascx as a widget in sitefinity. The ASP.NET lifecycle still works as normal in sitefinity. If you you want to handle the click server side you would do it the same way as you would in a standard .NET website solution.

A webmethod or standard ServerSide click handlers will work fine in this situation. The WebMethod you might have to add a custom route for in the BootStrapper.

Here is a response i just wrote about adding a webapicontroller that would work way easier

Determining url for Ajax WebMethod (in Sitefinity)

edited May 23 '17 at 12:29

Community

1
1

answered Apr 28 '15 at 20:23

Jon R.

977
6
12

Okay, this is part of what I needed to know. Now I just have to figure out what the custom route will be. Thank you. – terbubbs Apr 28 '15 at 20:25

Call method from jQuery before PostBack

3 Answers3