Я немного поработал и попробовал несколько решений с разных постов, но не могу заставить их работать. Основная идея заключается в следующем: я настраиваю существующий usercontrol, который выводит динамически генерируемые данные в одну таблицу столбцов строк. Затем он имеет ссылку "edit", которая выполняет обратную передачу и восстанавливает таблицу с редактируемыми полями. Я нашел некоторый jQuery, который я использую, чтобы преобразовать таблицу в таблицу из 2 строк, разбитую на несколько столбцов (намного проще, чем пытаться перестроить создание/разметку данных в С#). Когда страница загружается в первый раз, она работает отлично. Однако, когда я нажимаю кнопку "edit", он корректно выполняет обратную передачу, но jQuery не запускается. Я попробовал несколько конфигураций безрезультатно. Вот jQuery:
private void RegisterScripts()
{
StringBuilder sbScript = new StringBuilder();
sbScript.Append("\tvar tables = $('table[id*=\"tblAttribute\"]');\n");
sbScript.Append("\tfor (var i = 0; i < tables.length; i++) {\n");
sbScript.Append("\t\tvar newTable = document.createElement('table');\n");
sbScript.Append("\t\tvar columns = 2;\n");
sbScript.Append("\t\tfor(var c = 0; c < columns; c++) {\n");
sbScript.Append("\t\t\tnewTable.insertRow(c);\n");
sbScript.Append("\t\t\tfor(var r = 1; r < tables[i].rows.length ; r++) {\n");
sbScript.Append("\t\t\t\tnewTable.rows[c].insertCell(r-1);\n");
sbScript.Append("\t\t\t\tnewTable.rows[c].cells[r-1].innerHTML = tables[i].rows[r].cells[c].innerHTML;\n");
sbScript.Append("\t\t\t\tnewTable.rows[c].cells[r-1].className = tables[i].rows[r].cells[c].className;\n");
sbScript.Append("\t\t\t\ttables[i].rows[r].style.display = 'none';\n");
sbScript.Append("\t\t\t}\n");
sbScript.Append("\t\t}\n");
sbScript.Append("\t\tnewTable.className = tables[i].className;\n");
sbScript.Append("\t\ttables[i].parentNode.appendChild(newTable);\n");
sbScript.Append("\t}\n");
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "RowsToColumnsScript", sbScript.ToString(), true);
}
Вот вызов в цикле Page_Load:
protected void Page_Load(object sender, EventArgs e)
{
RegisterScripts();
// Other Stuff //
}
Я также попытался заменить RegisterClientScriptBlock()
на RegisterStartupScript()
и получил те же результаты. Что мне не хватает?
EDIT 2: Вот сценарий, который добавляется на страницу клиента. Я скопировал прямо из источника страницы (минус моя аббревиатура):
<script type="text/javascript">
//<![CDATA[
var tables = $('table[id*="tblAttribute"]');
for (var i = 0; i < tables.length; i++) {
var newTable = document.createElement('table');
var columns = 2;
for(var c = 0; c < columns; c++) {
newTable.insertRow(c);
for(var r = 1; r < tables[i].rows.length ; r++) {
newTable.rows[c].insertCell(r-1);
newTable.rows[c].cells[r-1].innerHTML = tables[i].rows[r].cells[c].innerHTML;
newTable.rows[c].cells[r-1].className = tables[i].rows[r].cells[c].className;
tables[i].rows[r].style.display = 'none';
}
}
newTable.className = tables[i].className;
tables[i].parentNode.appendChild(newTable);
}
// Other js registered from other usercontrols
</script>
попробуйте обменивать ваши jquery-коды внутри готовой функции
$(function(){
// place your code here
});
,
<script type="text/javascript">
$(function(){
//<![CDATA[
var tables = $('table[id*="tblAttribute"]');
for (var i = 0; i < tables.length; i++) {
var newTable = document.createElement('table');
var columns = 2;
for(var c = 0; c < columns; c++) {
newTable.insertRow(c);
for(var r = 1; r < tables[i].rows.length ; r++) {
newTable.rows[c].insertCell(r-1);
newTable.rows[c].cells[r-1].innerHTML = tables[i].rows[r].cells[c].innerHTML;
newTable.rows[c].cells[r-1].className = tables[i].rows[r].cells[c].className;
tables[i].rows[r].style.display = 'none';
}
}
newTable.className = tables[i].className;
tables[i].parentNode.appendChild(newTable);
}
// Other js registered from other usercontrols
});
</script>
Ваш javascript ожидает, что ваши таблицы будут иметь идентификатор, содержащий (*=
) строку tblAttribute
. Похоже, что javascript, который создает новую редактируемую таблицу, не добавляет к ней атрибут id
. Итак, в то время как ваш код-код регистрирует скрипт и выполняется на каждом обратном вызове, вы его не видите, потому что ваша вновь редактируемая таблица не соответствует критериям $('table[id*="tblAttribute"]')
.
Вам нужно будет настроить идентификатор для вновь созданной таблицы, но я не могу гарантировать, что эта методология будет работать (в зависимости от того, как ваш пользовательский контроль создает различные таблицы, которые у вас уже есть на экране):
newTable.setAttribute("id", "tblAttribute" + i);
Очевидно, что id
должен быть уникальным, поэтому простое добавление вашего итератора к tblAttribute
может создавать конфликты, но это должно заставить вас tblAttribute
в правильном направлении.
РЕДАКТИРОВАТЬ
Увидев ваш обновленный комментарий, связанный с UpdatePanel
, вы можете найти этот ответ полезным: Регистрация скриптов с помощью UpdatePanel
Во-первых, почему бы вам не сделать что-то такое...
string script = @"var tables = $('table[id*=\'tblAttribute\']');
for (var i = 0; i < tables.length; i++) {
//rest of your script
";
Это упростит чтение и внесение изменений в ваш скрипт. Белое пространство будет уважаться. Поэтому вам не нужны символы \n и\t.
После этого просмотрите полученный HTML-код в своем браузере и убедитесь, что он правильно его разместил. Используйте инструменты отладки браузера для выполнения сценария и посмотрите, не возникли ли какие-либо ошибки.
Или просто вставьте скрипт на странице.aspx вместо добавления его из кода "За".
UpdatePanel
или нет?