Авто освежающих сетки и быть в состоянии обновить часть данных в сетке

Question

у меня в настоящее время есть Gridview, в котором он перечисляет набор элементов только с заголовками и 3 кнопки, как так:

После этого пользователь может нажать на название, и она будет расширять строку вниз, чтобы показать все, что в полном объеме:

что делается только некоторые JavaScript и переключаясь между некоторыми дивы в G rowview. Пользователь может изменить кнопки, чтобы обновить базу данных и изменить ее статус, а также добавить заметки, которые хранятся в другом Gridview в строке.

Он работает в том, что он делает то, что ему нужно, просто не особенно гладко. Проблема, которую я имею на данный момент, состоит в том, что из-за Postbacks она обновляет всю сетку каждый раз, теряя свое состояние, поэтому, если у них есть расширенная строка, которая снова вернется, если они нажмут любую из кнопок или добавят заметку. Я хотел бы знать, есть ли способ, которым я могу взаимодействовать между страницей, чтобы он сохранял текущие представления, но в то же время мог обновлять базу данных и отражать изменения в сетке, и если они строка расширена, чтобы оставить ее таким образом. Другой в списке пожеланий будет так, что если новая запись будет добавлена, она будет автоматически добавлена ​​в список. Это в настоящее время использует веб-формы ASP.Net, и я полагаю, что мне нужно будет много путешествовать по маршруту JQuery?

Любая помощь или указатели будут очень благодарны.

Edit - Некоторый код

Так я начал с нуля, и это так, она будет загружать верхнее содержимое хотело. То, что, по моему мнению, было бы самым простым способом проверить, что что-то было расширено или нет, - это сохранить флаг для db для этого пользователя и эту задачу, которую я могу вызвать при создании данных, которые я делаю в своем ASP. чистый код позади. У меня есть это сохранение данных, и если я вручную обновляю страницу, это показывает изменения, но по какой-то причине я, похоже, не получаю ее так, чтобы она сохранялась в db и повторно загружала загрузку главных задач, чтобы показать, что-то был показан/скрыт. Вторая функция просто не работает?

HTML/JS

<script type="text/javascript"> 
     $(window).load(function ($) { 
      loadTaskTops(); 
     }); 

function loadTaskTops() { 
      $.ajax({ 
       type: "POST", 
       url: "LoadAT.aspx/LoadTaskTop", 
       data: "{}", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function (r) { 
        $("#Content").empty(); 
        $("#Content").append(r.d); 
       } 
      }); 
} 
function expandDetails(requestID, userName) { 
      expandDetails2(requestID, userName); 
      loadTaskTops(); 
     } 


     function expandDetails2(requestID, userName) { 
      //alert('RequestID: ' + requestID + ' Username: ' + userName); 
      $.ajax({ 
       type: 'POST', 
       contentType: "application/json; charset=utf-8", 
       url: 'LoadAT.aspx/markAsExpanded', 
       data: "{'requestID':'" + requestID + "', 'userName':'" + userName + "'}", 
       async: false, 
       success: function (response) { 
        requestID.val(''); 
        userName.val(''); 
        alert("Record Has been Saved in Database"); 

       }, 
       error: function() 
       { console.log('there is some error'); } 

      }); 
     } 
    </script> 

<div id="Content"> 
     </div> 

Это экономит запись в базу данных, выполнив expandDetails2, но он не хочет ничего делать после этого. Он не показывает никакого успеха, или если я попытаюсь добавить .done() с предупреждением потом, все равно ничего. Thanks

Answer 1

Этот метод является неправильным.

loadTaskTops() 

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

function loadTaskTops() { 
     $.ajax({ 
      type: "POST", 
      url: "LoadAT.aspx/LoadTaskTop", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      /*Error check for asp errors*/ 
      error: function (jqXHR, textStatus, errorThrown) { 
       if (jqXHR.status == 500) { 
        alert('Internal error: ' + jqXHR.responseText); 
       } else { 
        alert('Unexpected error.'); 
       } 
      }, 
      success: function (data) { 
       $("#Content").empty(); 
       /*You need to get your data out of the json this way */ 
       data[0].userName; 
       /*You can't really do this cause you have a json 
       $("#Content").append(data); */ 
       /*You can, however, do this*/ 
       $("#Content").append(data[0].userName); 
      } 
     }); 
} 

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