JQuery: скрыть div при загрузке страницы, при отправке показать div без обновления страницы

Проект MVC: у меня есть страница поиска с кнопкой отправки, при отправке: она отправляет строку запроса в контроллер для выполнения поиска и возвращает результаты в представление в виде списка элементов в таблице на той же странице. Вот почему у меня есть таблица и кнопка отправки в одном представлении. Поэтому, когда пользователь впервые открывает страницу поиска, он получает текстовое поле и кнопку, но ТАКЖЕ таблицу со всеми данными из базы данных, после отправки она возвращает только соответствующие результаты. Я хочу сделать следующее: когда пользователь впервые открывает страницу, он получит только текстовое поле и кнопку поиска. Затем при отправке страница обновится и покажет пользователю текстовое поле, кнопку поиска и таблицу данных. В зависимости от этой таблицы данных есть несколько функций jquery, которые я пытался сделать с помощью частичных представлений, но функции jquery не работают в ascx. Я попытался использовать jquery, чтобы скрыть таблицу при загрузке, но затем показать ее при отправке, но после отправки вся страница обновляется, поэтому таблица снова скрывается. Вот часть кода в index.aspx:

> ‹Тип сценария =" text / javascript ">

   $(document).ready(function () {
       $("form").submit(function (e) {
       });
       $("#listtable tr td:first-child").click(function () {
           $("#text1").val(this.innerHTML);
           alert("You have chosen Account Number " + this.innerHTML);
       });
   });

> ‹/ Script>>‹ form action = "Index.aspx" method = "post"> Введите свой поиск:

‹Input type =" text "id =" query "name =" query "/>‹ input type = "text" id = "text1" name = "text1" /> ‹input type =" submit "value =" Search " /> закрыть тег формы

table id = "listtable"
% Для каждого элемента в модели% // просматривает список релевантных данных в базе данных
тег закрытия таблицы

Я не знаю, достаточно ли это ясно. Я не могу понять, как это сделать, поэтому в первый раз, когда пользователь откроет страницу поиска, он не увидит эту таблицу. И увидеть его можно только после отправки поискового запроса. Это можно сделать? если да, можно ли это сделать без использования ajax, потому что я действительно не понимаю!


jquery asp.net-mvc jquery-selectors
person Lilly    schedule 28.12.2010    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете использовать AJAX для отправки формы, поэтому при отправке страница не будет обновляться, и все будет работать должным образом.

$(document).ready(function () {
       $("form").submit(function (e) {
             $.get('../ajax_index.aspx',{

                               /*add parameters here*/


                     },function(){
                   /* after the submit .....*/
                   /*Here you can use load() to add new content*/
                   $('#listtable').load('/your/ajax.url', {query: $('#my_input').val()});
               });
       });
      $("#listtable tr td:first-child").click(function () {
       $("#text1").val($(this).innerHTML);
       alert("You have chosen Account Number " + this.innerHTML);
   });
});
person tkt986    schedule 28.12.2010
comment
Не могли бы вы объяснить поподробнее: s - person Lilly; 29.12.2010
comment
Я обновил свой ответ выше, опубликуйте, пожалуйста, ошибки, которые у вас есть, чтобы помочь вам в этом больше. - person tkt986; 29.12.2010

arrow_upward
0
arrow_downward

Что ж, спрятать и показать довольно просто. Вы захотите присвоить всем этим элементам идентификаторы, чтобы упростить таргетинг:

$(function(){ 
    $("#listtable").hide();
    $("#my_form).submit(function(){ $("#listtable").show(); return false; }
}

Теперь, чтобы сделать что-то полезное, потребуется либо перезагрузка страницы, и в этом случае вам вообще не нужен jQuery, изменяющий страницу, либо Ajax, что, вероятно, вам и нужно. Вы можете посмотреть что-то вроде метода .load (). Используя этот метод, вы можете легко загрузить результаты вызова Ajax в целевой элемент. Обратите особое внимание на аргумент data. Это просто объект пары данных "ключ-значение" для передачи. Итак, вы можете сделать что-то вроде:

$('#listtable').load('/my/ajax.url', {query: $('#my_input').val()});

HTH

person jxpx777    schedule 28.12.2010
comment
Я не уверен, что сделал это правильно, потому что это не работает. Я действительно ничего не знаю об ajax. поэтому после document.ready я спрятал lisstable, затем при отправке формы я добавил вашу последнюю строку с lisstable.load. Так и должно быть? потому что это не сработало: s - person Lilly; 29.12.2010
comment
Возможно, вам потребуется предоставить функцию обратного вызова, чтобы отображать #listtable после загрузки удаленной страницы. Я бы посоветовал немного почитать об Ajax, по крайней мере, об интерфейсе jQuery. На самом деле это довольно просто. - person jxpx777; 30.12.2010