Я буду регулярно использовать Ajax для загрузки такого содержимого из веб-сервиса или pagemethod (который на самом деле вебсервис ...) , когда значок расширения (+) нажата служба вызывается, данные возвращаются (как JSON), а затем применяются к шаблону, который был загружен внутри скрытого div, когда страница была загружена и вставлена в div, который был переключен на видимый в событии click ...
Если это соответствует вашим потребностям, отлично; Если нет, будьте более конкретными, что вы пытаетесь выполнить.
[Edit: пример кода по запросу]
<div>
<asp:Repeater ID="CategoryRepeater" runat="server">
<HeaderTemplate><div id="CategorySpace"></HeaderTemplate>
<ItemTemplate>
<div id="CategoryHeaderRow_<%# Eval("CATEGORY_NM").ToString().Replace(" ","_").Strip("(,),-,/") %>" class="CategoryHeader">
<input type="hidden" id="CategoryID" runat="server" value='<%# Eval("CATEGORY_ID") %>' />
<!-- THIS IS THE EXPANSION ICON -->
<input type="button" id="expandCategory_<%# Eval("CATEGORY_NM").ToString() %>" class="CategoryExpandButton" value="+" onclick="expandCategory(this,'<%# ((CRMS.PageBase)this.Page).UserId %>','<%# Eval("CATEGORY_ID") %>');" isloaded="<%#(string)Eval("LOAD_ON_DEMAND_CD")=="N"?"Y":"N" %>" />
<span id="CategoryCount_<%# Eval("CATEGORY_NM").ToString().Replace(" ","_").Strip("(,),-,/") %>" class="CategoryLabel" style="width:50px;"><%# Eval("Count_Qy")%></span>
<span id="CategoryName" class="CategoryLabel"><%# Eval("CATEGORY_NM") %></span>
<img id="InfoIcon_<%# Eval("CATEGORY_NM") %>" src="images/InfoIcon.png" alt="<%# Eval("CATEGORY_INFO_TX") %>" class="CategoryInfo" />
</div>
<div id="categoryItems_<%# Eval("CATEGORY_NM").ToString().Replace(" ","_").Strip("(,),-,/") %>" class="hidden itemsContainer " style="width:990px;overflow:scroll;">
<div id="categoryItems" runat="server">
</div>
</div>
</ItemTemplate>
<FooterTemplate></div></FooterTemplate>
</asp:Repeater>
</div>
Клика событие расширение Icon пожары этого JavaScript:
/*
Expands the ToDo Categories and initiates ajax call for
lazy loading ToDo Items when needed
*/
function expandCategory(sender, UserID, CategoryID) {
window.status = "";
var senderID = "#" + sender.id;
var action = $(senderID).val();
$(senderID).val($(senderID).val() == "+" ? "-" : "+");
var CategoryItemsID = "#" + sender.id.replace("expandCategory", "categoryItems");
$(CategoryItemsID).toggleClass("hidden");
if (action == "+"
&& sender.isloaded == "N") {
//Find any controls with a pq_Value attribute and
//use those values with the selected category id
//to load items.
var params = $('[pq_Value]');
var inputParameters = "";
for (x = 0; x < params.length; x++) {
inputParameters += "{" + params[x].p_Name + "|" + params[x].p_Type + "|" + $(params[x]).attr("pq_Value") + "}";
}
PageMethods.LoadCategoryItems(UserID, CategoryID, inputParameters, 0, RecieveCategoryData, RecieveCategoryError);
//Set Is Loaded to (Y)es
sender.isloaded = "Y";
}
}
При вызове PageMethods.LoadCategoryItems... это должно быть типичным Аякс вызов для отправки назад содержимое в другую функцию JavaScript:
function RecieveCategoryData(msg) {
var msgs = msg.split('||');
if (msgs.length == 7) {
var category_name = msgs[0].replace(/ /g, "_");
//strip undesirable characters from the name: (,),-,/
category_name = category_name.replace(/\(/g, "").replace(/\)/g, "").replace(/\-/g, "").replace(/\//g, "");
var UserID = msgs[1];
var jsonData = jQuery.parseJSON(msgs[6]);
var container = $("#categoryItems_" + category_name);
var categoryCountLabel = $("[id*=CategoryCount_" + category_name + "]")[0]
var categoryCount = categoryCountLabel.innerText;
if (parseInt(msgs[4]) < 52) {
var header = $("#" + category_name + "_Header").html();
$(container).html(header);
}
//var ItemContainer = $("#" + category_name + "_Items");
var templateText;
var x = 0;
var y = 0;
var fieldName;
var fieldToken;
var jsonValue;
for (i = 0; i < jsonData.length; i++) {
templateText = document.getElementById(category_name + "_Template").innerHTML;
//templateText = $("#" + category_name + "_Template").html();
templateText = templateText.replace("[{ACTIVE_USER_ID}]", UserID);
templateText = templateText.replace("[{numDataRow}]", i % 2 == 0 ? "evenDataRow" : "oddDataRow");
//templateText = templateText.replace("[target]","'" + targetString + "'");
x = templateText.indexOf('[{');
while (x < templateText.length && x > -1) {
y = templateText.indexOf('}]', x + 2);
fieldToken = templateText.substring(x, y + 2);
fieldName = fieldToken.replace('[{', '').replace('}]', '').toUpperCase();
jsonValue = jsonData[i][fieldName];
if (fieldName == "REMARK_TX" && jsonValue != null) {
jsonValue = jsonValue.substring(0, jsonValue.length <= 35 ? jsonValue.length : 35);
}
if (jsonValue != null &&
jsonValue.toString().indexOf("\Date") > -1
) {
if (fieldName != "UPDATED_DT") {
jsonValue = new Date(parseInt(jsonValue.substr(6))).format("MM/dd/yyyy");
} else {
jsonValue = new Date(parseInt(jsonValue.substr(6))).format("MM/dd/yyyy h:mm:ss tt");
}
} else if (jsonValue == null) {
jsonValue = "";
}
//identify if the value is blank and it is being inserted
//into a hyperlink (determined by the ");" following the
//replacement token.
//If so, insert the "disabled='true'" attribute to the string.
if (jsonValue == ""
&& templateText.substring(y + 2, y + 4) == ");") {
var strDisable = " disabled='true'";
var split = y + 5;
var beginning = templateText.substring(0, split);
var ending = templateText.substring(split);
templateText = beginning + strDisable + ending;
}
templateText = templateText.replace(fieldToken, jsonValue);
x = templateText.indexOf('[{');
}
//$("#" + category_name + "_Items").append(templateText);
$(container).append(templateText);
}
if (parseInt(msgs[4]) < parseInt(msgs[5])) { //if there are more records remaining to get...
PageMethods.LoadCategoryItems(msgs[1], msgs[2], msgs[3], msgs[4], RecieveCategoryData, RecieveCategoryError);
}
if (getParameterByName("showCount")) {
if (parseInt(msgs[4]) < parseInt(msgs[5])) {
window.status = "Loading " + msgs[4] + " of " + msgs[5] + ".";
} else if (parseInt(msgs[4]) == parseInt(msgs[5])) {
window.status = "Load Complete: " + msgs[5] + " records.";
} else { //if (parseInt(categoryCount) != parseInt(msgs[4]
window.status = "expecting records: " + categoryCount + " showing records: " + parseInt(msgs[4]);
}
}
//format currency cells to $x,xxx.cc
//var test = $(".jq_currFormat");
$(".jq_currFormat").each(function() {
var num = $(this).text();
if (num.indexOf("]") == -1) {
num = num.toString().replace(/\$|\,/g, '');
if (isNaN(num)) num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num * 100 + 0.50000000001);
cents = num % 100;
num = Math.floor(num/100).toString();
if (cents < 10) cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length - (1 + i))/3); i++)
num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3));
$(this).text((((sign) ? '' : '-') + '$' + num + '.' + cents));
$(this).removeClass("jq_currFormat");
}
});
}
}
T его функция будет идентифицировать и скопировать шаблон для категории отображаемых данных и найти и заменить токены данных фактическими значениями из JSON.
Итак, вы хотите иметь кнопку, которая получает контент через AJAX, а затем загружает его в div и показывает div? –
Да, но, если возможно, его та же страница, которая получит данные. Я факт, мой div находится на usercontrol, поэтому я хочу поместить его на страницу, и когда я покажу div, управляющая загрузка (и показ) контента. – forX