Избегайте постбэк при нажатии на кнопку в asp.net веб-формы

Question

У меня есть FAQ страница, где последнее время часто задаваемые вопросы перечислены и можно искать через FAQ, а также задать вопрос и т.д ...

Я могу перечислить с помощью JQuery Часто Задаваемые ajax, и я пытаюсь выполнить поиск в FAQ с помощью jquery Ajax.

Проблема, перед которой я сталкиваюсь, заключается в том, что когда я нажимаю кнопку «Поиск», она получает обратную передачу. Хотя мне нужно скрыть текущий fAQ и показать один раз, который соответствует критериям поиска. В моем случае post back происходит каждый раз, когда я нажимаю кнопку поиска, и страница загружается каждый раз.

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

Пример с JS кодом на скрипке https://fiddle.jshell.net/thosoeuz/4/

Я использую asp.net веб-форму для этого проекта.

<div class="input-group"> 
    <asp:TextBox ID="txtSearchQA" CssClass="form-control" placeholder="Search" runat="server"></asp:TextBox> 
    <span class="input-group-addon"><asp:Button ID="btnSearchQA" CssClass="btn btn-primary" runat="server" Text="SEARCH" CausesValidation="False" OnClientClick="triggerSearch();" UseSubmitBehavior="false"/></span> 
</div> 
<div class="row-qa-col-wrapper"> 
    <!-- QA WRapper--> 
    <div class="panel-group" id="accordion"> 
    </div> 
    <p id="loadmore">Load More...</p> 
    <div class="row loader-wrapper"><img id="loader" class="news-loading" alt="" src='<%= ResolveUrl ("~/images/loading/30.gif") %>' style="display:none" /></div> 
    <!-- QA WRapper end--> 
</div> 

JS часть кода

//CODE FOR SEARCH BUTTON 

function triggerSearch() { 
    var vSearch = document.getElementById('ContentPlaceHolder1_txtSearchQA').value; 
    // alert(vsearch.length); 
    var vSearchLength = vSearch.length; 

    if (vSearchLength > 0) { 
    $(".panel-default").css("display", "none"); 
    SearchRecords(vSearch); 
    } else { 
    alert('Null') 
    } 
} 


// search Q&A 
var pageIndex2 = 0; 
var pageCount2; 

function SearchRecords(vSearch) { 
    pageIndex2++; 
    //Hide Default panel and show search result 
    // $(".panel-default").hide(); 



    if (pageIndex2 == 1 || pageIndex2 <= pageCount2) { 
    $("#loader").show(); 
    $("#loadmore").show(); 
    $.ajax({ 
     type: "POST", 
     url: "<%= ResolveUrl ("~/en/QAForm.aspx/SearchQuestions ") %>", 
     //data: JSON.stringify('{pageIndex: ' + pageIndex + ', Keyword: zakat}'), 
     data: JSON.stringify({ 
     pageIndex: pageIndex, 
     Keyword: vSearch 
     }), 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: ShowSearchResult, 
     failure: function(response) { 
     alert(response.d); 
     }, 
     error: function(response) { 
     alert(response.d); 
     } 
    }); 
    } 
} 

//For Search 
function ShowSearchResult(response) { 
    //Hide Default panel and show search result 
    // $(".panel-default").hide(); 

    var xmlDoc = $.parseXML(response.d); 
    var xml = $(xmlDoc); 
    pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text()); 

    //Record Count for search 
    var RowCount = parseInt(xml.find("RowCount").eq(0).find("RowCount").text()); 
    //alert('RowCount' + RowCount); 

    var news = xml.find("Table"); 
    var ctr = 0 
    news.each(function() { 
    var newsItem = $(this); 
    ctr = ctr + 100; 
    var vQuestion = newsItem.find("Question").text(); 

    var vAnswer = newsItem.find("Answer").text(); 
    var newsDate = newsItem.find("ReleaseDate").text(); 
    // var newsHijriDate = newsItem.find("NewsBrief").text(); 

    $('<div class="panel panel-info panel-search"><div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse' + ctr + '"><h4 class="panel-title accordion-toggle">' + vQuestion + ' </h4></div><div id="collapse' + ctr + '" class="panel-collapse collapse"><div class="panel-body"> ' + vAnswer + '</div></div></div>').appendTo(".panel-group"); 
    }); 

    if (pageIndex2 >= pageCount2) { 
    $("#loadmore").hide(); 
    } 

    $("#loader").hide(); 


} 

Answer 1

Чтобы избежать постбэк вам нужно сделать, как этот

<asp:Button ID="btnSearchQA" CssClass="btn btn-primary" runat="server" 
    Text="SEARCH" CausesValidation="False" OnClientClick="return triggerSearch();" 
    UseSubmitBehavior="false"/> 

и ваш Javascript функция должна возвращать ложь.

function SearchRecords(vSearch) { 
    //your codes 
    return false; 
} 

Answer 2

Если нет постбэк ASP.NET не предназначен, то нет никаких причин, чтобы использовать элемент управления веб-сервера ASP.NET <asp:Button />. Вместо этого используйте HTML <button>.

<div class="input-group"> 
    <asp:TextBox ID="txtSearchQA" CssClass="form-control" placeholder="Search" runat="server"></asp:TextBox> 
    <span class="input-group-addon"> 
     <button type="button" class="btn btn-primary" onclick="triggerSearch();"> 
      SEARCH 
     </button> 
    </span> 
</div> 

Обязательно укажите type="button", в противном случае браузер будет считать, type="submit" по умолчанию и в результате стандартного браузера постбэка.