asp.net-ajax - AJAX - 如何将值传递回服务器-6ren

asp.net-ajax - AJAX - 如何将值传递回服务器

转载作者：行者123 更新时间：2023-12-04 18:55:06

第一次在 .NET 中使用 UpdatePanels。

我有一个带有指向 FormView 控件上的事件的触发器的更新面板。 UpdatePanel 拥有一个 ListView，其中包含来自单独数据库的相关数据。

当 UpdatePanel 刷新时，它需要来自 FormView 控件的值，以便在服务器上它可以使用它们来查询数据库。

对于我的生活，我无法弄清楚如何获得这些值(value)观。我触发的事件有它们，但我希望更新面板异步刷新。如何将值传递给面板上的加载事件？

谷歌搜索了这个令人作呕的广告，似乎无法在这里找到答案。链接或解释将非常有帮助..

杰夫

最佳答案

创建一个 javascript 函数来收集表单数据，然后将该数据发送到 ASHX 处理程序。 ASHX 处理程序将做一些工作，并可以回复一个响应。

这是我制作的一个示例，它调用数据库以使用 AJAX 调用填充网格。有更好的 AJAX 库(原型(prototype)、ExtJS 等)，但这是原始交易。 (我知道这可以被重构为更干净，但你可以很好地理解这个想法)

像这样工作...

用户在搜索框中输入文本，

用户点击搜索按钮，

JavaScript 获取表单数据，

javascript 对 ASHX 进行 ajax 调用，

ASHX 收到请求，

ASHX 查询数据库，

ASHX 将响应解析为 JSON/Javascript 数组，

ASHX 发送响应，

Javascript 收到响应，

javascript Eval() 对对象的响应，

javascript 迭代对象属性并填充网格

html 将如下所示...

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" src="AjaxHelper.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtSearchValue" runat="server"></asp:TextBox>
        <input id="btnSearch" type="button" value="Search by partial full name" onclick="doSearch()"/>

        <igtbl:ultrawebgrid id="uwgUsers" runat="server" 
//infragistics grid crap
            </igtbl:ultrawebgrid>--%>
    </div>
    </form>
</body>
</html>

单击时触发的脚本将如下所示...

//this is tied to the button click. It takes care of input cleanup and calling the AJAX method
function doSearch(){
    var eleVal; 
    var eleBtn;
    eleVal = document.getElementById('txtSearchValue').value;
    eleBtn = document.getElementById('btnSearch');
    eleVal = trim(eleVal);
    if (eleVal.length > 0) {
        eleBtn.value = 'Searching...';
        eleBtn.disabled = true;
        refreshGridData(eleVal);
    }
    else {
        alert("Please enter a value to search with. Unabated searches are not permitted.");
    }
}

//This is the function that will go out and get the data and call load the Grid on AJAX call 
//return.
function refreshGridData(searchString){

    if (searchString =='undefined'){
        searchString = "";
    }

    var xhr; 
    var gridData;
    var url;

    url = "DefaultHandler.ashx?partialUserFullName=" + escape(searchString);
    xhr = GetXMLHttpRequestObject();

    xhr.onreadystatechange = function() {
        if (xhr.readystate==4) {
            gridData = eval(xhr.responseText);
            if (gridData.length > 0) {
                //clear and fill the grid
                clearAndPopulateGrid(gridData);
            }
            else {
                //display appropriate message
            }
        } //if (xhr.readystate==4) {
    } //xhr.onreadystatechange = function() {

    xhr.open("GET", url, true);
    xhr.send(null);
}

//this does the grid clearing and population, and enables the search button when complete.
function clearAndPopulateGrid(jsonObject) {

    var grid = igtbl_getGridById('uwgUsers');
    var eleBtn;
    eleBtn = document.getElementById('btnSearch');

    //clear the rows
    for (x = grid.Rows.length; x >= 0; x--) {
        grid.Rows.remove(x, false);
    }

    //add the new ones
    for (x = 0; x < jsonObject.length; x++) {
        var newRow = igtbl_addNew(grid.Id, 0, false, false);
        //the cells should not be referenced by index value, so a name lookup should be implemented
        newRow.getCell(0).setValue(jsonObject[x][1]); 
        newRow.getCell(1).setValue(jsonObject[x][2]);
        newRow.getCell(2).setValue(jsonObject[x][3]);
    }

    grid = null;

    eleBtn.disabled = false;
    eleBtn.value = "Search by partial full name";
}


// this function will return the XMLHttpRequest Object for the current browser
function GetXMLHttpRequestObject() {

    var XHR; //the object to return
    var ua = navigator.userAgent.toLowerCase(); //gets the useragent text
    try
    {
        //determine the browser type
        if (!window.ActiveXObject)
        { //Non IE Browsers
            XHR = new XMLHttpRequest(); 
        }
        else 
        {
            if (ua.indexOf('msie 5') == -1)
            { //IE 5.x
                XHR = new ActiveXObject("Msxml2.XMLHTTP");
            }
            else
            { //IE 6.x and up  
                XHR = new ActiveXObject("Microsoft.XMLHTTP");   
            }
        } //end if (!window.ActiveXObject)

        if (XHR == null)
        {
            throw "Unable to instantiate the XMLHTTPRequest object.";
        }
    }
    catch (e)
    {
        alert("This browser does not appear to support AJAX functionality. error: " + e.name
              + " description: " + e.message);
    }
    return XHR;
} //end function GetXMLHttpRequestObject()

function trim(stringToTrim){
    return stringToTrim.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}

ashx 处理程序看起来像这样....

Imports System.Web
Imports System.Web.Services
Imports System.Data
Imports System.Data.SqlClient

Public Class DefaultHandler
    Implements System.Web.IHttpHandler

    Private Const CONN_STRING As String = "Data Source=;Initial Catalog=;User ID=;Password=;"

    Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest

        context.Response.ContentType = "text/plain"
        context.Response.Expires = -1

        Dim strPartialUserName As String
        Dim strReturnValue As String = String.Empty

        If context.Request.QueryString("partialUserFullName") Is Nothing = False Then
            strPartialUserName = context.Request.QueryString("partialUserFullName").ToString()

            If String.IsNullOrEmpty(strPartialUserName) = False Then
                strReturnValue = SearchAndReturnJSResult(strPartialUserName)
            End If
        End If

        context.Response.Write(strReturnValue)

    End Sub


    Private Function SearchAndReturnJSResult(ByVal partialUserName As String) As String

        Dim strReturnValue As New StringBuilder()
        Dim conn As SqlConnection
        Dim strSQL As New StringBuilder()
        Dim objParam As SqlParameter
        Dim da As SqlDataAdapter
        Dim ds As New DataSet()
        Dim dr As DataRow

        'define sql
        strSQL.Append(" SELECT ")
        strSQL.Append("     [id] ")
        strSQL.Append("     ,([first_name] + ' ' + [last_name]) ")
        strSQL.Append("     ,[email] ")
        strSQL.Append(" FROM [person] (NOLOCK) ")
        strSQL.Append(" WHERE [last_name] LIKE @lastName")

        'clean up the partial user name for use in a like search
        If partialUserName.EndsWith("%", StringComparison.InvariantCultureIgnoreCase) = False Then
            partialUserName = partialUserName & "%"
        End If

        If partialUserName.StartsWith("%", StringComparison.InvariantCultureIgnoreCase) = False Then
            partialUserName = partialUserName.Insert(0, "%")
        End If

        'create the oledb parameter... parameterized queries perform far better on repeatable
        'operations
        objParam = New SqlParameter("@lastName", SqlDbType.VarChar, 100)
        objParam.Value = partialUserName

        conn = New SqlConnection(CONN_STRING)
        da = New SqlDataAdapter(strSQL.ToString(), conn)
        da.SelectCommand.Parameters.Add(objParam)

        Try 'to get a dataset. 
            da.Fill(ds)
        Catch sqlex As SqlException
            'Throw an appropriate exception if you can add details that will help understand the problem.
            Throw New DataException("Unable to retrieve the results from the user search.", sqlex)
        Finally
            If conn.State = ConnectionState.Open Then
                conn.Close()
            End If
            conn.Dispose()
            da.Dispose()
        End Try

        'make sure we have a return value
        If ds Is Nothing OrElse ds.Tables(0) Is Nothing OrElse ds.Tables(0).Rows.Count <= 0 Then
            Return String.Empty
        End If

        'This converts the table into JS array. 
        strReturnValue.Append("[")

        For Each dr In ds.Tables(0).Rows
            strReturnValue.Append("['" & CStr(dr("username")) & "','" & CStr(dr("userfullname")) & "','" & CStr(dr("useremail")) & "'],")
        Next

        strReturnValue.Remove(strReturnValue.Length - 1, 1)
        strReturnValue.Append("]")

        'de-allocate what can be deallocated. Setting to Nothing for smaller types may
        'incur performance hit because of a forced allocation to nothing before they are deallocated
        'by garbage collection.
        ds.Dispose()
        strSQL.Length = 0

        Return strReturnValue.ToString()

    End Function


    ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property

End Class

关于asp.net-ajax - AJAX - 如何将值传递回服务器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/85500/

文章推荐： math - 如何在平截头体上剪切线段？

ajax - Comet, Ajax Push, Reverse Ajax
有人有 Comet 应用程序 .net 的任何样本吗？我需要一个示例如何在服务器中保持客户端的连接？最佳答案这里也有一些不错的: http://www.frozenmountain.com/we
ajax - Yii2:ajax 提交表单上的 ajax 表单验证
我想知道是否有 Yii2 专家可以帮助我了解如何最好地使用 ajax 表单与 Yii ajax 验证相结合。我想我可以在不带您阅读我所有代码的情况下解释这个问题。我正在处理一个促销代码输入表单，用户
ajax - Ajax 和 Jquery-Ajax 之间的区别
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。要求提供代码的问题必须表现出对所解决问题的最低限度的了解。包括尝试的解决方案、为什么它们不起作用以及预期结果
ajax - f :ajax and a4j:ajax? 和有什么区别吗
f:ajax 和 a4j:ajax 标记之间有什么显着差异吗？我知道 Richfaces 4 中的 a4j:ajax 基于 native f:ajax JSF2 标记，添加了一些 f:ajax 中未
ajax - 在 $.ajax() 中将数组传递给 ajax 请求
我已经尝试过这样但无法获取数组列表。它返回“null” var data=[]; data[0] = '1'; data[1] = '2'; $.ajax({
ajax - jQuery.ajax 和 $.ajax 是一样的吗？
在教程中可以看到 jQuery.ajax 和 $.ajax 喜欢这里 http://www.thekludge.com/form-auto-save-with-jquery-serialize/ jQ
ajax - Ajax 会降低性能吗？
过度使用 AJAX 会影响性能吗？在大型 Web 应用程序的上下文中，您如何处理 AJAX 请求以控制异步请求？最佳答案过度使用任何东西都会降低性能；在必要时使用 AJAX 将提高性能，特别是如果
ajax - 使用 Ext.Ajax.request 的跨域 Ajax
似乎我无法使用 Ext.Ajax.request 进行跨域 ajax 调用。看起来 ScriptTag: True 没有任何效果。这是我的代码: {
ajax - AJAX 调用后的渲染问题
我正在使用 Bottle 微框架(但我怀疑我的问题来自它) 首先，如果我定义了一个从/test_redirect 到/x 的简单重定向，它会起作用。所以 Bottle redirect() 在简单的情
ajax - Ajax 库的比较
任何人都可以指出各种 AJAX 库的统一比较吗？我已经阅读了大约十几种不同的书，我即将开始一个项目，但我对自己是否已经探索了可能性的空间没有信心。请注意，我不是在要求“我认为 XXX 很棒”——我正
ajax - 哪些情况下不应使用 AJAX？
似乎使用 AJAX 的站点和应用程序正在迅速增长。使用 AJAX 的主要原因之一可能是增强用户体验。我担心的是，仅仅因为项目可以使用 AJAX，并不意味着它应该。可能是为了 UX，AJAX 向站点/
ajax - ajax 页面的永久链接最佳实践
假设我有一个可以通过 Javascript 自定义的“报告”页面。假设我有可以更改的 start_date、end_date 和类型(“简单”或“完整”)。现在我希望地址栏始终包含当前(自定义) V
ajax - 我是否正确理解了 Ajax？
我一直在阅读 Ajax 并且希望从 stackoverflow 社区看到我是否正确理解所有内容。因此，正常的客户端服务器交互是用户在 url 中拉出 Web 浏览器类型，并将 HTTP 请求发送到服
ajax - AJAX 可以提交基本身份验证的凭据吗？
这可能有点牵强，但让我们假设我们需要它以这种方式工作: 我在服务器的 web 根目录中有一个 index.html 文件。该文件中的 javascript 需要向/secure/ajax.php 发出
ajax - AJAX 检查用户名功能的安全性
关闭。这个问题是opinion-based .它目前不接受答案。想改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 去年关闭。 Improve this
ajax - Ajax 发布后重定向
我希望ajax post成功进入主页。由于某种原因，我一直做错事。知道我应该做什么来解决这个问题吗？ window.APP_ROOT_URL = ""; Ajax $.ajax({ url: '#{a
ajax - Jquery 在第一个 ajax 函数调用完全完成后继续另一个 ajax 函数
我在 2 个不同的函数中有 2 个 ajax 调用。我想用.click来调用这2个函数。 func1 将数据插入数据库，然后 func2 检索数据，所以我的问题是如何等到 func1 完全完成然后只执
ajax - AJAX 请求时禁用按钮
我试图在单击按钮后禁用该按钮。我尝试过: $("#ajaxStart").click(function() { $("#ajaxStart").attr("disabled", true);
ajax - RAILS 6 Ajax 事件和 Ajax Spinner
我试图在每个 Ajax 请求上显示加载动画/微调器我的 application.js $(document).on("turbolinks:load", function() { window.
ajax - ajax settimeout刷新div
我正在显示使用jQplot监视数据的图形。为了刷新保存该图的div，我每5秒调用一次ajax调用(请参见下面的JavaScript摘录)。在服务器上，PHP脚本从数据库中检索数据。成功后，将在5

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

asp.net-ajax - AJAX - 如何将值传递回服务器