使用 AJAX 在 ASP.NET 上更改内容答案

【问题标题】：Changing content on ASP.NET using AJAX使用 AJAX 在 ASP.NET 上更改内容
【发布时间】：2011-02-26 09:55:36
【问题描述】：

我的页面中有这个 asp.net 代码：

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

当用户在 TextBox 中输入值时，我想将值“ABC”更改为某个值。

如何使用Ajax 做到这一点？

谢谢

【问题讨论】：

标签： asp.net ajax html textbox

【解决方案1】：

您不需要 AJAX 来执行此操作。您可以简单地使用 Javascript 来使用 INPUT 小部件的内容来更新 DIV 标记的内容。见How to set the value of a form element using Javascript。

现在，如果您想在不重新加载页面的情况下使用来自服务器的内容更新 TextBox，那么 这就是 AJAX。我会在 UpdatePanels 上使用 jQuery.ajax() 函数。这是一个 jQuery AJAX Tutorial。

【讨论】：

【解决方案2】：

可能正在使用 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>

【讨论】：

【解决方案3】：

查看 ASP.NET AJAX UpdatePanel 控件。它允许您更改页面上的文本并“AJAX 化”其中的任何内容，而不是进行完整的回发。 Here 是一个很好的教程。

【讨论】：

我不推荐使用更新面板。它们很容易使用，直到你想要更多地控制你正在做的事情，然后它们是一种痛苦……就像其他的网络表单一样。熟悉使用 jQuery 的 ajax 功能。 jQuery 不仅更快、更干净，而且如果你使用过 ASP.NET 以外的东西，它也会转移到其他框架。
@Doug 是的，这是一个很好的观点。它们也非常耗费资源，如果使用的不仅仅是简单的东西，也容易出错。在某些情况下，UpdatePanel 仍然是更好的选择，特别是如果您是 .NET 商店并且不打算更改，或者正在使用其他 MS AJAX 控件工具包控件。那么它是有道理的。但是，是的，如果您不从服务器更新，那么只需使用 JavaScript 本身。 UpdatePanel 仅用于在您需要访问服务器时防止整页回发。

【解决方案4】：

我知道这是个老问题.. 但它可能对某人有所帮助对此的 JQUERY 将是：

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

【讨论】：