Скрытие / отображение HTML-таблицы с C # и Javascript

Question

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

У меня есть форма, в которой определенные элементы управления должны быть скрыты или показаны в зависимости от действий пользователя. Он начинает показывать поле «id» (вместе с другими полями), но если пользователь не знает свой идентификатор, он щелкает ссылку, которая вызывает скрытие поля «id», и отображает таблицу, которая содержит дополнительные элементы управления и кнопка «найти». В настоящее время я использую Javascript для обработки нажатия и скрытия / отображения элементов управления:

function showSearchTable() {
    document.getElementById('IDNumberRow').style.display = 'none';
    document.getElementById('DontKnowId').style.display = 'none';
    document.getElementById('infoSearchTable').style.display = 'block';
}

Когда нажата кнопка «найти», приложение пытается найти дополнительную информацию в базе данных и сообщает пользователю результат. В результате вызова сервера страница перезагружается, в результате чего таблица снова становится скрытой. Вот моя проблема: если номер телефона не может быть найден, я хотел бы, чтобы таблица была видимой, чтобы пользователь мог исправить любые ошибки.

Я попытался добавить код, который делает таблицу скрытой для кода, чтобы постбэк не делал таблицу невидимой:

protected void Page_Load(object sender, EventArgs e)
{
    if(!Page.IsPostBack)
    {
        infoSearchTable.Visible = false;
    }
}

Однако, поскольку таблица теперь содержит атрибут runat = "server", чтобы увидеть его в коде c #, я не могу ссылаться на него в своем коде javascript, чтобы сделать его видимым с клиента. Я попробовал это для JavaScript:

function showSearchTable() {
    document.getElementById('IDNumberRow').style.display = 'none';
    document.getElementById('DontKnowId').style.display = 'none';

    var infoSearch = document.getElementById('<%=infoSearchTable.ClientID%>');
    infoSearch.style.display = 'block';
}

и html таблицы:

<table id="infoSearchTable" runat="server">
....table rows/columns containing controls
</table>

но я получаю сообщение о том, что infoSearch имеет значение null.

Я думаю, что смогу выполнить обе задачи (установить скрытую таблицу видимой с помощью Javascript, но оставить ее видимой при обратной публикации), но я думаю, что мой код окажется более сложным, чем необходимо, особенно если я Я новичок в ajax, .net и C #. Поэтому я ищу совет - я на правильном пути? Я что-то использовал не так? Есть ли другой способ сделать это?

Answer 1

if(!Page.IsPostBack)
{
    infoSearchTable.Visible = false;
}

Я думаю, что это остановит отправку элемента управления клиенту (отсюда нулевая ссылка) - попробуйте что-то вроде:

if(!Page.IsPostBack)
{
    infoSearchTable.Attributes.Add("style", "display: none;");

}

Answer 2

В ASP.NET, когда вы используете runat=server, он берет ваш идентификатор и изменяет его, чтобы включить в него другую информацию из вашей программы. Я забыл, что именно, но я думаю, что главная страница или пространство имен или что-то, чтобы сделать его уникальным. Ваш getElementByID () необходимо изменить, чтобы включить всю эту другую информацию (просмотреть источник на странице, чтобы получить фактический идентификатор) или использовать инфраструктуру javascript, такую ​​как JQuery , которая имеет расширенные селекторы для поиска элементов на странице.

Answer 3

Как только вы добавите runat="server" к элементу, вы должны ссылаться на него с помощью ClientID в JavaScript:

var table = document.getElementById("<%=infoSearchTable.ClientID%>");
if (table){
    table.style.display = "none";
}

Answer 4

Вы можете сделать что-то подобное

<table id="infoSearchTable" runat="server">
....table rows/columns containing controls
</table>

и в коде

infoSearchTable.Attributes.Add("class", "yourclass");

у тебя .css

.yourclass{display:none;}