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这样做。

像这样更改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>

处理按钮单击并成功链接到您的锚点。（假设您的桌子上有锚点。在您的情况下，类似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();
            }
        });
    });
});

使用发布数据重定向到div

1 个答案: