How do I prevent __DoPostBack refreshing an ASPX page?

Question

I have a JS function in an ASPX page that performs a __doPostBack to a vb.net code behind. The problem is that it is forcing the page to refresh. How can I prevent this? My code below...

JS:

__doPostBack('', 'test');

VB.NET:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If IsPostBack Then
        Select Case Request.Form("__EVENTARGUMENT")
            Case "test"
                RadMediaPlayer1.Source = url
        End Select
End Sub

Thanks!

Answer 1

There is one easy way, and then one hard way.

The first issue? asp.net web pages are in fact designed to nearly ALWAYS have and endure post-backs.

This quite much means that any button, any combo box, or just about anything on that page to run some code behind WILL cause a page post-back.

And thankfully due to automatic "view state" management, most controls, and even a grid view, or even a combo box selection will correctly maintain its values for you (its view state).

So, if you don't want the whole page to post back and refresh?

Then you can drop in a plain Jane asp.net button, and say whatever it is you want to "only update", then try using what is called an update panel.

Try a quick test page like this:

<form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>
</form>

And our code behind like this:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

End Sub

Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

    TextBox1.Text = Date.Now

    System.Threading.Thread.Sleep(700)

End Sub

Now, I put in a 3/4 of second delay - just to help you see the effects of this (you don't want that delay sleep() in your actual code.

OK, now run the above page, click on the button. You see the traditional post-back, you see the browser "spinner"/wait occur, and then the text box is updated.

Now, let’s use what is called an update panel - and I am going to suggest you try one.

You can even dump/drop the JavaScript you have now.

So, you have to drop into the page a script manager, and then move your content inside of he update panel. It will now look like this:

<form id="form1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>

                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <br />
                <asp:Button ID="Button1" runat="server" Text="Button" />

            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</form>

Give above a try - note how the page don't post-back any more? How cool is that!

So, add update panel, content template. And move your button, and the adMediaPlayer1 into that panel.

You don't even need to adopt any JavaScript here. Drop in a plain Jane button, and just have normal code behind for that button. Say like this:

Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

    RadMediaPlayer1.Source = "some real url goes here"

End Sub

A few things:

While this looks, feels and appears to NOT do a post back and the .net system will wire this up for you automatic - VERY much like a ajax call?

Don't put too much inside of those update panels.

And keep in mind, while this does not seem to do a post back? In fact, this results in what we call a "partial" post back. The page load event even will fire.

Note that code behind CAN ONLY now modify controls inside of that update panel. Other controls on the page are off limits. (Unless you move them into that update panel also).

But, dump your JavaScript button or code for the post back. Just move in the media control and your button to inside of that up date panel. Give this a try - you not see a post back - you not see the browser "spinner"/wait run at all.

This feature is great - but it is not a cure-all.

The next way to do this?

Is you can setup what is called a ajax call. This can call code behind, but keep in mind the code behind can't update controls on the page (due to no post-back). If you don't do a post-back, then code behind can't touch controls on the page.

This would suggest that you have a client-side button - click on it, it runs JavaScript, calls some code behind, code behind returns a result, and then in JavaScript you stuff/change the URL of the given control. Since you changing that URL in pure JavaScript at this point? You probably don't even need to write or call code behind anyway.

but, try the update panel - they are very useful. But, keep in mind behind, the .net system is doing a bit of fakery to achieve this goal, and what a partial page post- back does occur.

Edit: pass value from JavaScript and click button

So, as noted, if you have a post back, you get page refresh! - that's what the command does and means!! So, you can't say I don’t want to post back and not refresh the page, and then do a post back!

However, as noted, your JavaScript code is "obviously" a much larger example, and you sharing of JUST the __DoPostBack() in JavaScript is as you noted a larger set of code and routines here.

However, I still suggest you use an update panel.

You can keep 99% of your JavaScript code now, and just remove the _dopost back.

Move your case statement code to a button. (Yes, a button click code stub).

What we THEN do is this:

The JavaScript code can figure out and do whatever it needs. Obviously, we reach a point in which a VALUE of some type has to be passed to the server. And then what we will do is then use JavaScript code to CLICK the button - the ONE inside of the update panel. This will and should prevent a page refresh. And we pass the value by using a asp.net hidden field control (you could even use a hidden text box - but it doesn’t matter - hidden field is probably better).

So, the pattern, and code will look like this:

We drop a button, hidden field, and that other video or whatever control is the page - all inside the update panel.

Then your JavaScript code? It runs, gets the final value. We shove that value into a hidden field control, and then use JavaScript to click the button - also inside of that panel.

Thus, you move your on-load code + case statement to the button click code.

Like this:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load


End Sub

Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

    ' get value passed from js

    Dim strMyValue As String = Me.HiddenField1.Value

    Debug.Print(strMyValue)

    Select Case strMyValue
        Case "test"

        Case "zoo"

        Case "my fun test"

    End Select


End Sub

And the markup is this:

    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>

                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <br />
                <asp:Button ID="Button1" runat="server" Text="Button" ClientIDMode="Static" />
                <br />
                <asp:HiddenField ID="HiddenField1" runat="server" ClientIDMode="Static" />

            </ContentTemplate>
        </asp:UpdatePanel>


                <asp:Button ID="Button2" runat="server" Text="js post back" 
                    OnClientClick="mypost();return false;"
                    
                    />
                <script>
                    function mypost() {

                        // set value to pass to button click
                        $('#HiddenField1').val("my fun test")
                        $('#Button1').click()
                    }


                </script>
    </div>

So, in place of your doPostback, you set the hidden field, and then with JavaScript click the button. (Once you get this working, then hide the button with style="display:none").

Of course, you probably have a bunch of post backs in your code.

So, make a JavaScript function called MyPostBack, say like this:

                   function MyPostBack(sValue) {

                        // set value to pass to button click
                        $('#HiddenField1').val(sValue)
                        $('#Button1').click()
                    }

Now, you can replace all your _DoPostBack('', 'test') with MyPostBack('test').

So, in the update panel, put the hidden field, the button, and that other control. And your JavaScript code will now "click" that button in the panel.

Note that the JavaScript code above does assume you using jQuery. However, you can code in pure JavaScript, and not necessary use jQuery short hand as I did above.