使用 jQuery Dialog Popup 的 ASP.NET Repeater：从 WebMethod 读取数据

• 下载 ASP.NETRepeaterWithPopup.zip

引言

本博客将引导您完成以下步骤：调用一个简单的 WebMethod 来获取在 Repeater 上显示的一条记录的详细信息，并在 jQuery Dialog Popup 上显示检索到的详细信息。

背景

这可以看作是文章系列的第二部分，我在其中处理 Repeaters 和 Dialogs。第一部分是 - 使用 jQuery Dialog Popup 的 ASP.NET Repeater。

步骤

首先，按照我上面提到的前一篇文章中描述的所有步骤来设计 Repeater 并将数据绑定到它。您也可以下载该项目并开始在其上进行编码。完成后，您将找到一个 jQuery 代码，该代码在 Image Button Click 上调用。在此事件中，我们尝试获取单击的行，并找到该行的所有值，以便我们可以在 jQuery Popup 上显示。

// ImageButton Click Event.
$('#tblEmployeeDetails .imgButton').click(function () {
	// Get the Current Row and its values.
	var currentRow = $(this).parents("tr");
	var empId = currentRow.find("span[id*='lblEmployeeId']").text();
	var empName = currentRow.find("span[id*='lblName']").text();
	var empLocation = currentRow.find("span[id*='lblLocation']").text();

	// Populate labels inside the dailog.
	$("#lblEmpId").text(empId);
	$("#lblEmpName").text(empName);
	$("#lblEmpLocation").text(empLocation);

	// Open the dialog.
	$("#popupdiv").dialog({
		title: "Details of <em>" + empName + "</em>",
		width: 430,
		height: 240,
		modal: true,
		buttons: {
			Close: function () {
				$(this).dialog('close');
			}
		}
	});

	return false;
});

下一步是什么？

现在，我们将删除上面突出显示的行，并尝试通过调用 WebMethod 从服务器获取这些值。我们还将获取有关员工的另一个额外信息，即“Biography”。

当一个方法被 [WebMethod] 属性修饰时，它实际上被公开为一个 XML Web 服务。阅读更多（关于如何在 jQuery 中处理 WebMethods）这里。

好的，让我们稍微修改一下我们的代码来调用我们的 WebMethod。

// ImageButton Click Event.
$('#tblEmployeeDetails .imgButton').click(function () {
	// Get the Current Row and its values.
	var currentRow = $(this).parents("tr");
	var empId = currentRow.find("span[id*='lblEmployeeId']").text();
        $("#lblEmpId").text(empId);

	$.ajax({
		url: 'RepeaterWithjQueryPopup.aspx/GetEmployeeDetails',
		data: '{ employeeId: ' + empId + '  }',
		type: 'POST',
		contentType: "application/json; charset=utf-8",
		dataType: 'json',
		success: function (result) {
			if (result.d.length > 0) {
				var employee = $.parseJSON(result.d);

				// Populate labels inside the dailog.
				$("#lblEmpName").text(employee.Name);
				$("#lblEmpLocation").text(employee.Location);
				$("#lblEmpBiography").text(employee.Biography);

				// Open the dialog.
				$("#popupdiv").dialog({
					title: "Details of <em>" + employee.Name + "</em>",
					width: 430,
					height: 270,
					modal: true,
					buttons: {
						Close: function () {
							$(this).dialog('close');
						}
					}
				});
			}
		},
		error: function (xhr) {
			alert('error');
		}
	});

	return false;
});

url: ‘RepeaterWithjQueryPopup.aspx/GetEmployeeDetails’

指示 WebMethod 的 URL，即“RepeaterWithjQueryPopup.aspx/GetEmployeeDetails”。这是 {页面名称/WebMethod名称} 格式。

data: ‘{ employeeId: ‘ + empId + ‘ }’

表示我们正在传递单击的行的员工 ID。这将帮助我们获取此特定员工的记录。

在成功方法中

当 WebMethod 以对象的形式返回结果时，我们解析它，然后我们只需读取属性并将其分配给弹出窗口内的标签。对于解析，我使用了 jQuery.parseJSON()，它将对象转换为 JSON 对象，以便我们可以非常容易地读取它。

var employee = $.parseJSON(result.d);

$("#lblEmpName").text(employee.Name);
$("#lblEmpLocation").text(employee.Location);
$("#lblEmpBiography").text(employee.Biography);

看看 WebMethod 代码

[WebMethod]
public static string GetEmployeeDetails(string employeeId)
{
	DataTable dtEmployees = GetAllEmployees();
	DataRow[] employeeRow = dtEmployees.Select("EmployeeId = " + employeeId);

	if (employeeRow.Length > 0)
	{
		var row = new Dictionary<string, string>
		{
			{"Name", employeeRow[0]["Name"].ToString()},
			{"Location", employeeRow[0]["Location"].ToString()},
			{"Biography", employeeRow[0]["Biography"].ToString()}
		};

		var serializer = new JavaScriptSerializer();

		return serializer.Serialize(row);
	}

	return string.Empty;
}

首先，我们获取所有员工，然后过滤掉 employeeId 所需的员工，该员工 ID 是从客户端 Ajax 调用传递过来的。然后，我们使用属性名称和值创建一个字典对象。在此之后，这只是使用 JavaScriptSerializer 对其进行序列化并将其发送回客户端以进行解析和操作的问题。

您的看法

随意下载该项目并在其之上进行操作。如果您有任何疑问，请在下面评论告诉我。让我们互动和编码!!! 如果您喜欢它，请在您的朋友之间分享。

CodeProject