在 asp.net webform 中单击按钮时避免回发

Question

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

我可以使用 jquery ajax 列出常见问题解答，并且我正在尝试使用 jquery Ajax 搜索常见问题解答。

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

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

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

我正在为这个项目使用 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 函数应该返回 false。

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

Answer 2

如果不打算使用 ASP.NET 回发，则没有理由使用 ASP.NET <asp:Button /> Web 服务器控件。请改用 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" 并导致标准浏览器回发。