javascript - 在 asp.net web 表单中单击按钮时避免回发

Question

我有常见问题解答页面，其中列出了最近的常见问题解答，人们可以搜索常见问题解答并提出问题等...

我能够使用 jquery ajax 列出常见问题解答，并且我尝试使用 jquery Ajax 搜索常见问题解答。

我面临的问题是，当我单击“搜索”按钮时，它会回发。虽然我需要隐藏当前的常见问题解答并显示与搜索条件匹配的一次。就我而言，每次单击搜索按钮时都会发生回发，并且每次都会加载页面。

如何避免使用搜索功能回发并获取数据。不知道我哪里做错了。

fiddle 上的 JS 代码示例 https://fiddle.jshell.net/thosoeuz/4/

我在这个项目中使用 asp.net webform。

<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 函数应该返回 false。

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