views:

56

answers:

3

Hey,

I have this asp.net code in my page :

<div id="prx">ABC</div>

And I want to change the value "ABC" to something when for example the user type a value in TextBox.

How can I do that using Ajax ?

Thanks

+3  A: 

Check out the ASP.NET AJAX UpdatePanel control. It lets you change text on a page and "AJAX-ifies" anything inside it, instead of doing a full postback. Here is a good tutorial on it.

Ryan Hayes
I do not recommend using Update Panels. They are easy to use, until you want more control of what you're doing, then they're a pain...much like the rest of webforms. Get comfortable with using jQuery's ajax features. Not only is jQuery faster and cleaner, but it also will transfer to other frameworks if you ever use something other than ASP.NET.
Doug R
@Doug Yes, that's a good point. They are also very resource intensive and are error prone if used more than simple things. The UpdatePanel is still a better choice in some situations, especially if you are a .NET shop and have no intention of changing, or are using the other MS AJAX Control Toolkit controls. Then it makes sense. But yes, if you aren't updating from the server, then just use JavaScript itself. UpdatePanel is only to prevent full page postbacks when you need to hit the server.
Ryan Hayes
Thanks you so much
dotNET
+4  A: 

You don't need AJAX to do this. You can simply use Javascript to update the content of the DIV tag with the contents of the INPUT widget. See How to set the value of a form element using Javascript.

Now if you'd like to update the TextBox with something from the server without reloading the page, then that's AJAX. I'd use jQuery.ajax() function over UpdatePanels though. Here's a jQuery AJAX Tutorial.

kervin
+2  A: 

May be using javascript?)

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript">
        function setDivContent() {
            var textInput = document.getElementById('text1');
            var divPrx = document.getElementById('prx');
            divPrx.innerHTML = textInput.value;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="prx">ABC</div>
        <br />
        <input type="text" id="text1" />
        <button onclick="javascript:setDivContent(); return false;">Set</button>
    </div>
    </form>
</body>
</html>
abespalov