AJAX-如何将价值传递回服务器
时间：2020-03-05 18:59:27 来源:igfitidea点击:
第一次使用.NET中的UpdatePanels。
我有一个updatepanel，其中的触发器指向FormView控件上的事件。 UpdatePanel包含一个ListView以及来自单独数据库的相关数据。
UpdatePanel刷新时，它需要FormView控件中的值，以便在服务器上可以使用它们查询数据库。
对于我来说一生，我不知道该如何获得这些价值。我从中触发的事件具有它们，但我希望updatepanel异步刷新。如何将值传递给面板上的load事件？
Google搜索了这个广告恶作剧，似乎无法在这里找到答案。链接或者解释将非常有帮助。
杰夫
解决方案
回答
尝试
- ...在请求和响应中查找。
- ...在Load()方法上设置一个断点，并在监视窗口或者即时窗口中查询Me或者this，以查看所需的值是否不在预期的位置？
- ...放入一个(对于每个ctl作为Me / This.Controls中的控件)，并检查每个被迭代的控件，看看我们是否甚至得到了期望的控件。
- ...它不在Sender或者EventArgs中吗？
尝试不要使用"更新"面板。...它们通常会造成超出其价值的麻烦。使用常规AJAX完成此操作可能更快，更省力。
回答
如果我们使用的是UpdatePanel，请确保两个控件都在面板内，并且可以正常使用。
回答
制作一个JavaScript函数，该函数将收集表单数据，然后将其发送到ASHX处理程序。 ASHX处理程序将完成一些工作，并且可以响应并回复。
这是我制作的一个示例，该示例使用AJAX调用来调用数据库以填充网格。有更好的库可以进行AJAX(原型，ExtJS等)，但这是原始的工作。 (我知道可以将其重构为更简洁的方法，但是我们可以很好地理解这个想法)
像这样工作...
- 用户在搜索框中输入文字，
- 用户点击搜索按钮，
- JavaScript获取表单数据，
- javascript使ajax调用ASHX，
- 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
