AJAX - Comment transmettre de la valeur au serveur

StackOverflow https://stackoverflow.com/questions/85500

  •  01-07-2019
  •  | 
  •  

Question

Première utilisation de UpdatePanels dans .NET.

J'ai un updatepanel avec un déclencheur qui pointe vers un événement sur un contrôle FormView. UpdatePanel contient un ListView avec les données connexes d'une base de données séparée.

Lorsque le UpdatePanel est actualisé, il a besoin des valeurs du contrôle FormView afin de pouvoir les utiliser sur le serveur pour interroger la base de données.

Pour la vie si moi, je ne peux pas comprendre comment obtenir ces valeurs. L'événement à partir duquel je déclenche les a, mais je souhaite que le panneau Update soit actualisé de manière asynchrone. Comment puis-je transmettre des valeurs à l'événement de chargement sur le panneau?

googlé cette annonce nausée et ne semble pas pouvoir obtenir une réponse ici. Un lien ou une explication serait extrêmement utile.

Jeff

Était-ce utile?

La solution

créer une fonction javascript qui va collecter les données de formulaire, puis les envoyer à un gestionnaire ASHX. le gestionnaire ASHX effectuera un travail et pourra répondre avec une réponse.

Ceci est un exemple que j'ai créé et qui appelle une base de données pour remplir une grille à l'aide d'appels AJAX. Il existe de meilleures bibliothèques pour effectuer AJAX (prototype, ExtJS, etc.), mais il s’agit là d’un problème fondamental. (Je sais que cela peut être refactored pour être encore plus propre, mais vous pouvez bien comprendre l'idée)

Fonctionne comme ça ...

  • L'utilisateur entre du texte dans le champ de recherche,
  • l'utilisateur clique sur le bouton de recherche,
  • JavaScript récupère les données de formulaire,
  • javascript fait un appel ajax à ASHX,
  • ASHX reçoit la demande,
  • base de données de requêtes ASHX,
  • ASHX analyse la réponse dans un tableau JSON / Javascript,
  • ASHX envoie une réponse,
  • Javascript reçoit une réponse,
  • réponse javascript de Eval () à object,
  • javascript itère les propriétés de l'objet et remplit la grille

Le code HTML ressemblera à ceci ... 

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

Le script qui se déclenche au clic ressemblera à ceci ... 

//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*$/, '');
}

Et le gestionnaire ashx ressemble à ceci .... 

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

Autres conseils

Essayez

  • ... en regardant dans la demande et Réponse.
  • ... définition d'un point d'arrêt sur la méthode Load () et interrogez-moi ou ceci dans la montre ou immédiate fenêtre pour voir si les valeurs que vous voulez sont peut-être tout simplement pas où vous êtes les attendre?
  • ... Mettez un (pour chaque ctl en tant que contrôle en moi / ce.controls) et inspectez chaque contrôle qui est itéré et voyez si vous obtenez même les contrôles que vous attendez.
  • ... ce n'est pas dans Sender ou EventArgs?

Essayez de NE PAS utiliser les panneaux de mise à jour .... Ils peuvent souvent causer plus de problèmes que ce qu’ils valent. Il peut être plus rapide et moins douloureux d’utiliser AJAX pour le faire.

Si vous utilisez un UpdatePanel, assurez-vous simplement que les deux contrôles sont à l'intérieur du panneau et cela fonctionnera comme vous le souhaitez.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top