Changing content on ASP.NET using AJAX_问答_开发者

开发者 https://www.devze.com 2023-01-01 14:22 出处：网络

I have this asp.net co开发者_运维问答de 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.

I have this asp.net co开发者_运维问答de 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

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.

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">

<html xmlns="http://www.w3.org/1999/xhtml">
<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>

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.

I know this is old question.. but it might help someone JQUERY for this would be :

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
      $("#btn1").click(function(e){
        e.preventDefault();
        $("#prx").text($("#text1").val());
      });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="prx">ABC</div>
        <br />
        <input type="text" id="text1" />
        <button type="button" id="btn1">Set</button>
    </div>
    </form>
</body>
</html>