# Wednesday, 02 December 2009

With a lot of ajax, sometimes too much, being used in modern web applications it usually means that also calculations or data is being kept on the client. That’s all great but sometimes one has to perform a postback to the server. When the browser unloads and all form data’s passed to the server the javascript variables that were living happily in the browser are lost. A possible solution is to use a hidden field to send it back and forth. Some source code explains this scenario better:

Markup:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="passjsdataviahiddenfield.aspx.cs" Inherits="betslap.passjsdataviahiddenfield" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {
        
            $('#<%= btnGo.ClientID %>').click(function () {
                var txtValue = 'Hello ' + $('#<%= txtInput.ClientID %>').val();
                $('#<%= hidden1.ClientID %>').val(txtValue);
            });
        });
     
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:HiddenField runat="server" ID="hidden1" />
        Fill in your name please: <asp:TextBox runat="server" ID="txtInput" />
        <br />
        <asp:Button runat="server" ID="btnGo" Text="Go!" OnClick="btnGo_Click" />
        <br />
        <asp:Literal ID="Literal1" runat="server"></asp:Literal>
    </div>
    </form>
</body>
</html>

Codebehind:

using System;

namespace betslap
{
    public partial class passjsdataviahiddenfield : System.Web.UI.Page
    {
        protected void btnGo_Click(object sender, EventArgs e)
        {
            Literal1.Text = hidden1.Value;
        }
    }
}

In the markup I make use of the new CDN (Content Delivery Network) from Microsoft. In the piece of javascript that follows a click event is wired and to the button control. The value of the textbox prefixed with the string Hello is put in a local variable txtValue. Then that variable’s used to fill up the hidden field value attribute. Once the button gets clicked this value passing to the hidden field gets processed and then the postback occurs. There we set in the Click eventhandler, on the server, the text of the literal control to the text of the hidden field, in which we passed our javascript variable. The page gets processed, html is rendered and sent back to the browser. Both the value of the hidden field and the text of the literal are the same right now. This demonstrates the working.

Something else that I touched is this syntax:

<%= btnGo.ClientID %>

Since ASP.NET generates the ids of the html that gets rendered it can be sometimes something else than you expect. Especially when using master pages and javascript a lot of people get surprised with the, in their eyes, unpredictable behavior as it also generates a lot of prefixes. ASP.NET exposes the ClientID property on server controls which provides us with the rendered id on the client. With this line we inject that ClientID directly into the code of javascript, which gets rendered to the browser and there the correct id is always available.

To learn more about Microsoft CDN take a look at this page: http://www.asp.net/ajaxlibrary/CDN.ashx.

Grz, Kris.

ASP.NET | CDN | jQuery
Wednesday, 02 December 2009 20:46:59 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  | 
# Monday, 30 November 2009

Microsoft’s investing in CDN for a lot of their ajax scripts and also jQuery, we already knew that for a while. Now they also added support for SSL so when you use your site with https it shouldn’t give an enduser the warning anymore about mixed content. The very well known “This page contains both secure and nonsecure items” message.

There’s a whole list available out there: http://www.asp.net/ajaxlibrary/cdn.ashx.

At first I didn’t see the dataservice.js scripts anymore, the ones that enable people to use ajax against ADO.NET Data Services, I mean WCF Data Services after the product got renamed, but they also got renamed to:

  • http://ajax.microsoft.com/ajax/beta/0911/MicrosoftAjaxAdoNet.debug.js
  • http://ajax.microsoft.com/ajax/beta/0911/MicrosoftAjaxAdoNet.js
  •  

    Besides the new CDN SSL feature there’s also a new Library available for Microsoft Ajax. Also quite a lot of new tutorials have been added for the new Ajax library.

    Grz, Kris.

    Ajax | CDN | Library | Links | Microsoft Ajax | SSL
    Monday, 30 November 2009 09:01:06 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  |