AJAX - Hoe om waarde terug Slaag met bediener

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

  •  01-07-2019
  •  | 
  •  

Vra

Die eerste keer saam met UpdatePanels in NET.

Ek het 'n updatepanel met 'n sneller wys na 'n gebeurtenis op 'n FormView beheer. Die UpdatePanel het 'n script lys met verwante data vanaf 'n aparte databasis.

Wanneer die UpdatePanel bygewerk, wat dit nodig het waardes van die FormView beheer sodat op die bediener dit hulle kan gebruik om die databasis navraag.

Vir die lewe as my, ek kan nie uitvind hoe om daardie waardes te kry. Die geleentheid waarna ek verwek uit het hulle, maar ek wil die updatepanel om asynchroon verfris. Hoe kan ek slaag waardes om die las gebeurtenis op die paneel?

Googled hierdie ad nauseum en kan nie lyk om 'n antwoord hier te kry. 'N skakel of 'n verduideliking sal besonder nuttig wees ..

Jeff

Was dit nuttig?

Oplossing

'n JavaScript-funksie wat die stukke van vorm data sal versamel, en dan stuur die data na 'n ASHX hanteerder. die ASHX hanteerder sal 'n werk te doen, en kan antwoord met 'n antwoord.

Dit is 'n voorbeeld wat ek gemaak het dat 'n databasis oproepe na 'n rooster met behulp van AJAX oproepe te vul. Daar is beter biblioteke om dit te doen AJAX (prototipe, ExtJS, ens), maar dit is die raw deal. (I weet dit kan refactored om selfs skoner wees, maar jy kan die idee om goed genoeg te kry)

Werk soos hierdie ...

  • Gebruiker betree teks in die soekkassie,
  • gebruiker soek knoppie,
  • JavaScript kry vorm data,
  • javascript maak Ajax oproep om ASHX,
  • ASHX ontvang versoek,
  • ASHX navrae databasis,
  • ASHX ontleed die reaksie in into / Javascript skikking,
  • ASHX stuur reaksie,
  • Javascript ontvang reaksie,
  • JavaScript Eval () se reaksie op beswaar,
  • JavaScript iterate beswaar eienskappe en vul rooster

Die html sal lyk soos hierdie ... 

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

Die script dat brande op klik sal lyk soos hierdie ... 

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

En die ashx hanteerder so lyk .... 

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

Ander wenke

Probeer

  • ... soek in die Versoek en Reaksie.
  • ... opstel van 'n breekpunt op die metode op load () en navraag My of hierdie in die horlosie of onmiddellike venster om te sien of die waardes wat jy wil is dalk net nie waar jy is verwag hulle?
  • ... Sit 'n (Vir Elke SOL as beheer in Me / This.Controls) en inspekteer elke beheer wat herhaal en kyk of jy nog kry die kontroles wat jy verwag.
  • ... sy nie in Sender of EventArgs?

Probeer NIE met behulp Update panele .... Hulle kan dikwels veroorsaak meer probleme as wat hulle werd is. Dit kan vinniger en minder hoofpyn te gebruik gereelde AJAX om dit te doen nie.

As jy besig is met 'n UpdatePanel net seker te maak dat beide kontroles is binne-in die paneel en dit sal as hy wil werk.

Gelisensieer onder: CC-BY-SA met toeskrywing
Nie verbonde aan StackOverflow
scroll top