在 asp.net 网络表单中单击按钮时避免回发

Question

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

我可以使用 jquery ajax 列出常见问题解答，我尝试使用 jquery Ajax.

搜索常见问题解答

我面临的问题是，当我单击“搜索”按钮时，它 post 返回。虽然我需要隐藏当前的常见问题解答并显示符合搜索条件的一次。在我的例子中 post 每次我点击搜索按钮时都会返回，每次都会加载页面。

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

fiddle 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.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

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

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

并且您的 javascript 函数应该 return false。

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

在 asp.net 网络表单中单击按钮时避免回发

Avoid postback when button is clicked in asp.net webform

javascript

asp.net

ajax

jquery

postback