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

Posted 2023-05-08

【中文标题】在 asp.net webform 中单击按钮时避免回发

【英文标题】：Avoid postback when button is clicked in asp.net webform

【发布时间】：2016-04-15 14:39:35

【问题描述】：

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

我可以使用 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"  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();


 

【问题讨论】：

从服务器控制中删除 UseSubmitBehavior 属性并尝试此 OnClientClick="Search();return false;"。 Search() 方法是做什么的，它是否在内部导致页面刷新/重新加载。

我试过这个停止回发并且搜索功能没有获取数据

@SuprabhatBiswal，错字是复制粘贴。我更新了Code和Fiddle，其实就是OnClientClick="triggerSearch();"这个函数

你也要回发吗？

我想要部分回复。我想在不进行完整回发的情况下显示搜索结果 - 现在学习

【参考方案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;

【讨论】：

这使代码能够工作并显示结果。但是当我点击相同的搜索按钮进行另一个搜索时，什么也没有发生

【参考方案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" 并导致标准浏览器回发。

【讨论】：

这与 ASP 按钮的行为方式相同......现在没有发生返回，但结果也没有显示

@Learning 你也想回发？

我想要部分回复。我想在不进行完整回发的情况下显示搜索结果

@Learning，请检查您的浏览器控制台是否有任何错误或调试正在执行的代码量。

@Learning，这很难说，但我感觉这与每次执行搜索时pageIndex2++; 递增有关。看来if 条件紧随其后将在后续调用中评估为 false。