Question

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

我能够使用jquery ajax列出FAQ，我尝试使用jquery Ajax搜索FAQ。

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

如何使用搜索功能避免回发和获取数据。不确定我在哪里做错了。

小提琴上的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.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"并导致标准浏览器回发。

Answer 2

要避免回发，您需要这样做

$query=array('ci_courrgate'=>(string)$id); working   o/p:1

并且你的javascript函数应该返回false。

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

在asp.net webform

2 个答案: