使用帖子数据重定向到 div

Question

我正在根据用户输入在表中搜索特定值，该用户输入查询数据库中的 LIKE 条件。这工作得很好，但我必须手动滚动到页面的底部才能看到我的过滤表。我真的很想将用户重定向到页面下方表格的 div。这是带有搜索框的表单：

<form method="post">
    <div class="col-lg-6 pull-right" style="margin-right:130px; width:30%;">
        <div class="input-group">
            <input required type="text" class="form-control" name="search" placeholder="Search Alerts for Today...">
            <span class="input-group-btn">
                <button class="btn btn-default" name="searchnow" type="submit" value="Submit">Go!</button>
            </span>
        </div>
    </div>
</form>

下面的代码然后检查是否单击了按钮，然后将填充表格的变量设置为等于数据库中的当前搜索结果。

    var searchIP = "";
    if (Request.Form["searchnow"] != null & IsPost)
    {
        searchIP = Request.Form["search"];
        alertForTheDay = dbConnection.searchDashboardTable(searchIP);
        // Response.Redirect("Dashboard.cshtml#search");
    }

使用 Response.Redirect 将表刷新回其原始状态。如上所示注释掉响应重定向允许过滤器成为可能，但我必须手动向下滚动页面。我希望它重定向到该重定向中 div 的 id。请问我该怎么办？

Answer 1

我猜你正在做一个完整的服务器往返。在我看来，这是不必要的。 我建议通过 AJAX 执行此操作。

1. 像这样更改 HTML 以在单击按钮时调用 AJAX 操作：

   <form method="post">
       <div class="col-lg-6 pull-right" style="margin-right:130px; width:30%;">
           <div class="input-group">
               <input required type="text" class="form-control" name="search" id="search" placeholder="Search Alerts for Today...">
               <span class="input-group-btn">
                   <button class="btn btn-default" name="searchnow" id="theButton">Go!</button>
               </span>
           </div>
       </div>
   </form>
   

2. 成功处理按钮单击并链接到您的锚点。 （假设您的桌子的锚点存在。在您的情况下类似于Dashboard.cshtml#contact）

   $.fn.gotoAnchor = function(anchor) {
       location.href = this.selector;
   }
   
   $(document).ready(function() {
       // Add the page method call as an onclick handler for the div.
       $("#theButton").click(function() {
           $.ajax({
               type: "POST",
               url: "<YOUR URL>",
               data: { search: $('#search').val() },
               contentType: "application/json; charset=utf-8",
               dataType: "json",
               success: function(msg) {
                   // If everything is successful link to your anchor tag
                   $('#search').gotoAnchor();
               }
           });
       });
   });