techencoder » JavaScript http://techencoder.com Technical ideas in a human readable format Wed, 01 Feb 2012 17:19:30 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 http://creativecommons.org/licenses/by/3.0/us/ Getting DataTables to work with ASP.Net MVC http://techencoder.com/index.php/2009/12/getting-datatables-to-work-with-asp-net-mvc/ http://techencoder.com/index.php/2009/12/getting-datatables-to-work-with-asp-net-mvc/#comments Thu, 03 Dec 2009 07:13:12 +0000 r.claypool http://techencoder.com/?p=1041 Want to get jQuery DataTables to work in an ASP.Net MVC project ???

Here is a demo project in C# that should get you started.  If I find the time, I’ll post details on how this was put together (but I think most developers will benefit more from running and stepping through the source code anyway).

Hope this helps someone.  Happy Programming!

]]> http://techencoder.com/index.php/2009/12/getting-datatables-to-work-with-asp-net-mvc/feed/ 0 How to run JavaScript prior to System.Web.UI.Timer OnTick http://techencoder.com/index.php/2009/01/javascript-and-timer-ontick/ http://techencoder.com/index.php/2009/01/javascript-and-timer-ontick/#comments Wed, 21 Jan 2009 07:07:34 +0000 r.claypool http://techencoder.com/?p=156 The short answer: you can’t … or at least not easily, but there is a better way.

Let’s say you have a page that needs to post back every x minutes. In my case, I needed to implement an auto-save feature that the client requested. Saving the data would happen server side so I just used a Timer to initiate regular post backs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<%@ Page Language="C#" %>
<script runat="server">
    protected void Timer1_OnTick(object sender, EventArgs e)
    {
        Response.Write("Last Postback: " + DateTime.Now.ToString());
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="sm" runat="server" />
        <asp:Timer ID="Timer1" runat="server" 
                OnTick="Timer1_OnTick" Interval="4000" />
    </form>
</body>
</html>

The problem surfaced when they also wanted a client-side prompt to allow or cancel the auto post back. System.Web.UI.Timer does not have any client side events exposed, so I searched the web and asked our friends over at StackOverflow what they would do.

The only response to my post confirmed that the Timer is a bad fit for this situation. I could hack it, but there must be a better way.

Square Peg in a Round Hole

Square Peg in a Round Hole

Instead of using a Timer to initiate post backs, I switched to a combination of setTimeout() and __doPostBack(). It’s pure html and JavaScript goodness!

In this example, I added an update panel to demonstrate how __doPostBack() can also be used to create a partial post back (leaving some parts of the page unchanged after the auto post back). That is not necessary, but if you are posting back to the server automatically, an AJAX experience will probably be better for the user.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

<%@ Page Language="C#" %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Page.IsPostBack)
        {
            string time = DateTime.Now.ToString();
            this.insidePanelLabel.Text = "Last Postback: " + time;
            this.outsidePanelLabel.Text = "blah blah"; // Does not show up after partial post back.
        }
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" language="javascript">
        window.onload = function() {
            // start the auto postback timer.
            setPostbackTimer(8);
        }
        function setPostbackTimer(seconds) {
            window.setTimeout("conditionalPostback()", seconds * 1000);
        }
        function canContinue() {
            return confirm('The page is requesting new data.  Ok or Cancel?');
        }
        function conditionalPostback() {
            if (canContinue()) {
                // User permits the postback. 
                // Do it.
                __doPostBack('UpdatePanel1', '');
            }
            else {
                // User denied the postback. 
                // Reset the timer (they will be prompted again).
                setPostbackTimer(8);
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="sm" runat="server" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="insidePanelLabel" runat="server" 
                    Text="This text will change during auto postbacks."/>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        <asp:Label ID="outsidePanelLabel" runat="server" 
            Text="This text will not change during auto postbacks."/>
    </form>
</body>
</html>

Have you ever tried to make Microsoft controls fit into a situation only to find that plain html and JavaScript are a better fit?

The WebForms model often leads me to over rely on controls and I forget that plain html and JavaScript solutions are available too. Using controls is fine, but think twice if you have to hack them to get what you want. There is probably a better way.

Happy coding.

]]> http://techencoder.com/index.php/2009/01/javascript-and-timer-ontick/feed/ 2