javascript - 重定向到带有发布数据的 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

我猜你正在做一个完整的服务器往返。从我的 Angular 来看，这是不必要的。 我建议通过 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. 处理按钮点击并在成功时链接到您的 anchor 。 (假设您的表的 anchor 存在。在您的情况下类似于 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();
               }
           });
       });
   });