重定向到包含post数据的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.RRedirect将表刷新回其原始状态。如上所示注释掉响应重定向可以进行过滤，但我必须手动向下滚动页面。我希望它重定向到重定向中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();
               }
           });
       });
   });