Почему ScriptManager.RegisterStartupScript пропускает один сценарий, но продолжает смежные сценарии - PullRequest
Новая
       13

Почему ScriptManager.RegisterStartupScript пропускает один сценарий, но продолжает смежные сценарии

0 голосов
/ 17 февраля 2020

Добрый день,

На самом деле это мой первый вопрос на сайте, я фактически создал аккаунт только для этой проблемы. Я много боролся с этим и не могу понять, в чем причина.

Я играю с динамическим созданием html элементов управления и заполняю их данными из SQL Базы данных.

В качестве тестового приложения я использовал концепцию проката видеомагазина, в котором есть сайт администратора для изменения (вставки, обновления, удаления) фильмов, получения отчетов и статистики о фильмах и т. Д.

Поэтому в качестве элемента управления для отображения фильмов я использую таблицу html со своей собственной таблицей стилей, с деталями Mov ie в строке заголовка и при нажатии на строку заголовка таблицы. расширяется, чтобы показать запас этого mov ie (поскольку mov ie может иметь несколько физических "дисков" в магазине, имеющих разные коды и статусы акций).

Таким образом, причина, по которой я пытаюсь создать таблицу динамически, так как количество фильмов и количество «дисков», которые могут иметь эти фильмы, могут изменяться. Я создал работающее «Подтверждение концепции», но проблема возникает на одиннадцатом мове ie, где строка заголовка (с указанием основного заголовка, дополнительного заголовка, ограничения по возрасту, основной категории, дополнительной категории и суммы аренды) отсутствует создан, но данные, которые отображаются при нажатии на заголовок и его развертывание, создаются, но добавляются к развернутым данным десятого mov ie.

Скрипты добавляются с использованием ScriptManager.RegisterStartupScript. Когда я проверяю скомпилированный код в браузере (инструмент проверки Chrome), все сценарии в диспетчере добавляются, за исключением заголовка одиннадцатого mov ie и первой строки данных.

Я использовал точки останова для проверки кода (событие OnPage_Load), и скрипт запускается, и это не проблема с параметром key ScriptManager.RegisterStartupScript, так как он создается с помощью al oop, и я убедился, что элементы управления создаются динамически У меня есть уникальные теги ID для вызова в самом скрипте и позже.

Я застрял на этой проблеме весь день и не могу понять, почему все строки и расширенные строки данных созданы и работает за исключением последней и ее первой строки данных.

Почему это происходит? Это проблема в сценарии? (Но почему все остальные строки создаются без проблем?)

Пока я считаю, что это проблема в коде программы, но все еще не могу понять, почему проблема возникает.

Вот код C# из кода 

namespace WebApplication4
{
    public partial class _Default : Page
    {
        private static String connectionString = @"Data Source=BOARDROOM-PC\SQLEXPRESS;Initial Catalog=Express_Video;Integrated Security=True";
        private static SqlConnection connection;
        private SqlDataAdapter da1 = null;
        private SqlDataAdapter da2 = null;
        private SqlCommand command1 = null;
        private SqlCommand command2 = null;
        private DataSet ds1 = null;
        private DataSet ds2 = null;

        protected void Page_Load(object sender, EventArgs e)
        {
            connection = new SqlConnection(connectionString);
            connection.Open();

            da1 = new SqlDataAdapter();
            da2 = new SqlDataAdapter();

            command1 = new SqlCommand("sp_EV_AllMoviesForStock", connection);
            command1.CommandType = CommandType.StoredProcedure;

            ds1 = new DataSet();

            da1.SelectCommand = command1;
            da1.Fill(ds1, "Movies");

            string MovieID;
            string MainTitle;
            string SecTitle;
            string Age_R;
            string Cat_M;
            string Cat_S;
            double Rent_Amount;

            string StockCode;
            string Status;
            string StatusInfo;
            string DateCreated;

            string script1;
            string script2;
            string key1;
            string key2;

            ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "text", "CreatePageConnector();", true);

            for (int Outer = 1; Outer <= ds1.Tables["Movies"].Rows.Count; Outer++)
            {

                MovieID     = ds1.Tables["Movies"].Rows[Outer - 1][0].ToString();
                MainTitle   = ds1.Tables["Movies"].Rows[Outer - 1][1].ToString();
                SecTitle    = ds1.Tables["Movies"].Rows[Outer - 1][2].ToString();
                Age_R       = ds1.Tables["Movies"].Rows[Outer - 1][3].ToString();
                Cat_M       = ds1.Tables["Movies"].Rows[Outer - 1][4].ToString();
                Cat_S       = ds1.Tables["Movies"].Rows[Outer - 1][5].ToString();
                Rent_Amount = Convert.ToDouble(ds1.Tables["Movies"].Rows[Outer - 1][6].ToString());

                script1 = "'" + Outer + "','" + MainTitle + "','" + SecTitle + "','" + Age_R + "','" + Cat_M + "','" + Cat_S + "','" + Rent_Amount + "'";
                key1 = "text" + Outer.ToString();            

                if (Outer % 2 == 0)
                {
                    ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), key1, "CreateTableRowEven(" + script1 + ");", true);
                }
                else
                {
                    ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), key1, "CreateTableRowOdd(" + script1 + ");", true);
                }

                command2 = new SqlCommand("sp_EV_StockByMovie", connection);
                command2.CommandType = CommandType.StoredProcedure;
                command2.Parameters.AddWithValue("@MovieID", MovieID);

                ds2 = new DataSet();

                da2.SelectCommand = command2;
                da2.Fill(ds2, "Stock");

                for (int Inner = 1; Inner <= ds2.Tables["Stock"].Rows.Count; Inner++)
                {
                    key2 = "text" + Outer.ToString() + Inner.ToString();

                    StockCode   = ds2.Tables["Stock"].Rows[Inner - 1][0].ToString();
                    Status      = ds2.Tables["Stock"].Rows[Inner - 1][1].ToString();
                    StatusInfo  = ds2.Tables["Stock"].Rows[Inner - 1][2].ToString();
                    DateCreated = ds2.Tables["Stock"].Rows[Inner - 1][3].ToString();

                    script2 = "'" + StockCode + "','" + Status + "','" + StatusInfo + "','" + DateCreated + "'";

                    ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), key2, "CreateInnerData('" + Outer + "','" + Inner + "'," + script2 + ");", true);
                }
            }
        }
    }
}

Вот страница html (.aspx файл) 

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication4._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

    <div class="container" id="containTable">
        <%--Table is Created Here--%>
    </div> 

</asp:Content>

Вот CreateTable. js

Примечание: функции «Нечетное» и «Четное» предназначены для изменения цвета строки (я чувствую, что это сделано, поэтому повторяется и не нужно, но на данный момент достаточно хорошо, как подтверждение концепции) 

function CreatePageConnector() {
    var TableHolder = document.createElement("table");

    TableHolder.setAttribute("class", "table");
    TableHolder.setAttribute("id", "TableHolder");

    document.getElementById("containTable").appendChild(TableHolder);
}

function CreateTableRowOdd(ID, MainTitle, SubTitle, Age_Restr, Cat_1, Cat_2, Rent_Amount) {
    var HeaderRow = document.createElement("tr");

    HeaderRow.setAttribute("class", "header");
    HeaderRow.setAttribute("id", "HeaderRow_A_" + ID);

    document.getElementById("TableHolder").appendChild(HeaderRow);

    var InfoHeader = document.createElement("td");

    InfoHeader.setAttribute("class", "InfoHeader");
    InfoHeader.setAttribute("colspan", "4");
    InfoHeader.setAttribute("id", "InfoHeaderData_A_" + ID);

    document.getElementById("HeaderRow_A_" + ID).appendChild(InfoHeader);

    var contHolder = document.createElement("div");

    contHolder.setAttribute("class", "container contHolder");
    contHolder.setAttribute("id", "contHolder_A_" + ID);

    document.getElementById("InfoHeaderData_A_" + ID).appendChild(contHolder);

    var innerTable = document.createElement("table");

    innerTable.setAttribute("class", "table innerTable");
    innerTable.setAttribute("id", "innerTable_A_" + ID);

    document.getElementById("contHolder_A_" + ID).appendChild(innerTable);

    var DataHeader = document.createElement("tr");

    DataHeader.setAttribute("class", "DataHeaderOdd");
    DataHeader.setAttribute("id", "DataHeaderOdd_A_" + ID);

    document.getElementById("innerTable_A_" + ID).appendChild(DataHeader);

    var DataHolder1 = document.createElement("td");

    DataHolder1.setAttribute("id", "DataHolder_A_A_" + ID);
    DataHolder1.innerHTML = MainTitle;

    var DataHolder2 = document.createElement("td");

    DataHolder2.setAttribute("id", "DataHolder_A_B_" + ID);
    DataHolder2.innerHTML = SubTitle;

    var DataHolder3 = document.createElement("td");

    DataHolder3.setAttribute("id", "DataHolder_A_C_" + ID);
    DataHolder3.innerHTML = Age_Restr;

    var DataHolder4 = document.createElement("td");

    DataHolder4.setAttribute("id", "DataHolder_A_D_" + ID);
    DataHolder4.innerHTML = Cat_1 + " " + Cat_2;

    var DataHolder5 = document.createElement("td");

    DataHolder5.setAttribute("id", "DataHolder_A_E_" + ID);
    DataHolder5.innerHTML = "R " + Rent_Amount;

    document.getElementById("DataHeaderOdd_A_" + ID).appendChild(DataHolder1);
    document.getElementById("DataHeaderOdd_A_" + ID).appendChild(DataHolder2);
    document.getElementById("DataHeaderOdd_A_" + ID).appendChild(DataHolder3);
    document.getElementById("DataHeaderOdd_A_" + ID).appendChild(DataHolder4);
    document.getElementById("DataHeaderOdd_A_" + ID).appendChild(DataHolder5);

    var InnerHeaderRow = document.createElement("tr");

    InnerHeaderRow.setAttribute("class", "innerDataHeader");
    InnerHeaderRow.setAttribute("id", "InnerHeaderRow_B_" + ID);

    document.getElementById("TableHolder").appendChild(InnerHeaderRow);

    var HeaderHolder1 = document.createElement("td");

    HeaderHolder1.setAttribute("id", "HeaderHolder_B_A" + ID);
    HeaderHolder1.innerHTML = "Stock Code";

    var HeaderHolder2 = document.createElement("td");

    HeaderHolder2.setAttribute("id", "HeaderHolder_B_B" + ID);
    HeaderHolder2.innerHTML = "Status";

    var HeaderHolder3 = document.createElement("td");

    HeaderHolder3.setAttribute("id", "HeaderHolder_B_C" + ID);
    HeaderHolder3.innerHTML = "Status Information";

    var HeaderHolder4 = document.createElement("td");

    HeaderHolder4.setAttribute("id", "HeaderHolder_B_D" + ID);
    HeaderHolder4.innerHTML = "Status Change Date";

    document.getElementById("InnerHeaderRow_B_" + ID).appendChild(HeaderHolder1);
    document.getElementById("InnerHeaderRow_B_" + ID).appendChild(HeaderHolder2);
    document.getElementById("InnerHeaderRow_B_" + ID).appendChild(HeaderHolder3);
    document.getElementById("InnerHeaderRow_B_" + ID).appendChild(HeaderHolder4);
}

function CreateTableRowEven(ID, MainTitle, SubTitle, Age_Restr, Cat_1, Cat_2, Rent_Amount) {
    var HeaderRow = document.createElement("tr");

    HeaderRow.setAttribute("class", "header");
    HeaderRow.setAttribute("id", "HeaderRow_A_" + ID);

    document.getElementById("TableHolder").appendChild(HeaderRow);

    var InfoHeader = document.createElement("td");

    InfoHeader.setAttribute("class", "InfoHeader");
    InfoHeader.setAttribute("colspan", "4");
    InfoHeader.setAttribute("id", "InfoHeaderData_A_" + ID);

    document.getElementById("HeaderRow_A_" + ID).appendChild(InfoHeader);

    var contHolder = document.createElement("div");

    contHolder.setAttribute("class", "container contHolder");
    contHolder.setAttribute("id", "contHolder_A_" + ID);

    document.getElementById("InfoHeaderData_A_" + ID).appendChild(contHolder);

    var innerTable = document.createElement("table");

    innerTable.setAttribute("class", "table innerTable");
    innerTable.setAttribute("id", "innerTable_A_" + ID);

    document.getElementById("contHolder_A_" + ID).appendChild(innerTable);

    var DataHeader = document.createElement("tr");

    DataHeader.setAttribute("class", "DataHeaderEven");
    DataHeader.setAttribute("id", "DataHeaderEven_A_" + ID);

    document.getElementById("innerTable_A_" + ID).appendChild(DataHeader);

    var DataHolder1 = document.createElement("td");

    DataHolder1.setAttribute("id", "DataHolder_A_A_" + ID);
    DataHolder1.innerHTML = MainTitle;

    var DataHolder2 = document.createElement("td");

    DataHolder2.setAttribute("id", "DataHolder_A_B_" + ID);
    DataHolder2.innerHTML = SubTitle;

    var DataHolder3 = document.createElement("td");

    DataHolder3.setAttribute("id", "DataHolder_A_C_" + ID);
    DataHolder3.innerHTML = Age_Restr;

    var DataHolder4 = document.createElement("td");

    DataHolder4.setAttribute("id", "DataHolder_A_D_" + ID);
    DataHolder4.innerHTML = Cat_1 + " " + Cat_2;

    var DataHolder5 = document.createElement("td");

    DataHolder5.setAttribute("id", "DataHolder_A_E_" + ID);
    DataHolder5.innerHTML = "R " + Rent_Amount;

    document.getElementById("DataHeaderEven_A_" + ID).appendChild(DataHolder1);
    document.getElementById("DataHeaderEven_A_" + ID).appendChild(DataHolder2);
    document.getElementById("DataHeaderEven_A_" + ID).appendChild(DataHolder3);
    document.getElementById("DataHeaderEven_A_" + ID).appendChild(DataHolder4);
    document.getElementById("DataHeaderEven_A_" + ID).appendChild(DataHolder5);

    var InnerHeaderRow = document.createElement("tr");

    InnerHeaderRow.setAttribute("class", "innerDataHeader");
    InnerHeaderRow.setAttribute("id", "InnerHeaderRow_B_" + ID);

    document.getElementById("TableHolder").appendChild(InnerHeaderRow);

    var HeaderHolder1 = document.createElement("td");

    HeaderHolder1.setAttribute("id", "HeaderHolder_B_A_" + ID);
    HeaderHolder1.innerHTML = "Stock Code";

    var HeaderHolder2 = document.createElement("td");

    HeaderHolder2.setAttribute("id", "HeaderHolder_B_B_" + ID);
    HeaderHolder2.innerHTML = "Status";

    var HeaderHolder3 = document.createElement("td");

    HeaderHolder3.setAttribute("id", "HeaderHolder_B_C_" + ID);
    HeaderHolder3.innerHTML = "Status Information";

    var HeaderHolder4 = document.createElement("td");

    HeaderHolder4.setAttribute("id", "HeaderHolder_B_D_" + ID);
    HeaderHolder4.innerHTML = "Status Change Date";

    document.getElementById("InnerHeaderRow_B_" + ID).appendChild(HeaderHolder1);
    document.getElementById("InnerHeaderRow_B_" + ID).appendChild(HeaderHolder2);
    document.getElementById("InnerHeaderRow_B_" + ID).appendChild(HeaderHolder3);
    document.getElementById("InnerHeaderRow_B_" + ID).appendChild(HeaderHolder4);
}

function CreateInnerData(ID1, ID2, StockCode, Status, StatusInfo, DateChanged) {
    var InnerData = document.createElement("tr");

    InnerData.setAttribute("class", "innerData");
    InnerData.setAttribute("id", "InnerData_C_" + ID1 + "_" + ID2);

    document.getElementById("TableHolder").appendChild(InnerData);

    var innerDataHolder1 = document.createElement("td");

    innerDataHolder1.setAttribute("id", "HeaderHolder_C_A_" + ID1 + "_" + ID2);
    innerDataHolder1.innerHTML = StockCode;

    var innerDataHolder2 = document.createElement("td");

    innerDataHolder2.setAttribute("id", "HeaderHolder_C_B_" + ID1 + "_" + ID2);
    innerDataHolder2.innerHTML = Status;

    var innerDataHolder3 = document.createElement("td");

    innerDataHolder3.setAttribute("id", "HeaderHolder_C_C_" + ID1 + "_" + ID2);
    innerDataHolder3.innerHTML = StatusInfo;

    var innerDataHolder4 = document.createElement("td");

    innerDataHolder4.setAttribute("id", "HeaderHolder_C_D_" + ID1 + "_" + ID2);
    innerDataHolder4.innerHTML = DateChanged;

    document.getElementById("InnerData_C_" + ID1 + "_" + ID2).appendChild(innerDataHolder1);
    document.getElementById("InnerData_C_" + ID1 + "_" + ID2).appendChild(innerDataHolder2);
    document.getElementById("InnerData_C_" + ID1 + "_" + ID2).appendChild(innerDataHolder3);
    document.getElementById("InnerData_C_" + ID1 + "_" + ID2).appendChild(innerDataHolder4);
}

Вот Javascript для раскрывающегося списка строк 

$(document).ready(function () {
    var ua = navigator.userAgent,
        event = (ua.match(/iPad/i)) ? "touchstart" : "click";
    if ($('.table').length > 0) {
        $('.table .header').on(event, function () {
            $(this).toggleClass("active", "").nextUntil('.header').css('display', function (i, v) {
                return this.style.display === 'table-row' ? 'none' : 'table-row';
            });
        });
    }
})

Вот таблица стилей 

@import url('https://fonts.googleapis.com/css?family=Titillium+Web&display=swap');

body {
    color: #6a6c6f;
    background-color: #f1f3f6;
    margin-top: 30px;
    font-family: 'Titillium Web', sans-serif;
}

.container {
    max-width: 960px;
}

.contHolder {
    height: 100%;
    padding: 0;
}

.table {
    color: white;
    text-align: center;
}

.table tr.header {
    font-weight: bold;
    cursor: pointer;
    -webkit-user-select: none;
    /* Chrome all / Safari all */
    -moz-user-select: none;
    /* Firefox all */
    -ms-user-select: none;
    /* IE 10+ */
    user-select: none;
    /* Likely future */
}

.table tr:not(.header) {
    display: none;
}

.table tr:nth-child(odd) {
    background: #eee;
}

    .table .header td:after {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        transition: transform .25s linear;
        -webkit-transition: -webkit-transform .25s linear;
    }


.table .innerTable {
    margin: 0;
}

.table .InfoHeader {
    padding: 0;
    border-top: none;
}

    .table tr.DataHeaderOdd {
        background-color: #414141;
        display: table-row;
    }

    .table tr.DataHeaderEven {
        background-color: #5b5656;
        display: table-row;
    }

    .table tr.DataHeaderOdd td {
        width: 20%;
        border: none;
        line-height: 30px;
    }

    .table tr.DataHeaderEven td {
        width: 20%;
        border: none;
        line-height: 30px;
    }

.table .innerDataHeader td {
    width: 25%;
    border: none;
    font-size: 14px;
    line-height: 25px;
    color: white;
    background-color: #6c7b95;
}

.table .innerData td {
    color: #393e46;
    font-size: 10px;
    line-height: 20px;
}

Вот скриншот:

enter image description here

1 Ответ

0 голосов
/ 18 февраля 2020

Добрый день,

Я понял, что есть ключи, которые дублируются и воссоздаются. В начале одиннадцатой строки данных первого mov ie (Avengers Infinity War) ключом является «text 1 11», что означает ключ первой строки, одиннадцатого datarow. Позже в одиннадцатом ряду (который должен быть Zombieland: Double Tap), ключ там - «текст 11 1», одиннадцатый ряд, первый datarow. Я решил, просто добавив подчеркивание между строкой ключа и идентификаторами datarow, например, «text1_11» и «text11_1», это решило проблему, и таблица была создана со всеми элементами mov ie из базы данных.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...