Question

我目前正在一家小型科技公司实习，作为我学校课程的一部分，我正在开展的一个项目是使用 MVC 制作一个网络应用程序。

经理给了我一个可以使用的SQL数据库，我一直在关注Microsoft here的这个教程，以帮助我构建Web应用程序。

现在，管理员要我做的具体事情是当有人加载页面时隐藏表格，当字符串提交到搜索栏时，表格中与字符串匹配的相关信息会显示出来。

我一直在寻找各地，包括现在几天如何做到这一点，无论我尝试什么代码似乎都不起作用！我一直在尝试使用HTML和JS进行不同的事情，按照这里发布的一些示例，我无法弄清楚如何操作，当我点击搜索按钮时，表闪烁一秒，我认为这是令人耳目一新的页面，但为什么呢？

这是我的控制器与searchBar

 public ActionResult Index(string searchString)
{
    ViewBag.NameSortParm = String.IsNullOrEmpty    (searchString) ? "name_prmrnm" : "";
    var person = from p in db.persons
                 select p;
    if (!String.IsNullOrEmpty(searchString))
    {
        person = person.Where(s => s.name.Contains(searchString));     
    }

    return View(person.ToList());
}

这是我在视图中的javascript：

<script type="text/javascript">
    function escondeTable(){
        var hideTab = document.getElementById("table-class");
        if (hideTab.style.display == 'none') {
            hideTab.style.display = '';
        }
    else {
            hideTab.style.display == 'none'
        }
    }
</script>

这是我的表格：

<form action="/people/Index" method="post" onsubmit="escondeTable()">
        <p class="barraProc">
            @Html.TextBox("searchString", "", new { placeholder = "Insira um nome..." })
            <input type="button" value="Procurar">
        </p>
    </form>

谁能告诉我我可以使用或做什么？

Answer 1

您必须使用Ajax调用。然后一个选择就是这个

$( document ).ajaxStart(function() {
 var hideTab = document.getElementById("table-class");
 hideTab.hide();
 });

$( document ).ajaxStop(function() {
var hideTab = document.getElementById("table-class");
hideTab.show();
 });

Answer 2

我可以建议一个正确的方法吗？

我会远离表格，因为它们引起很多麻烦。只需使用常规输入和事件监听器。

另外，我使用RESTful API，即避免使用POST方法，并使用GET方法从后端获取表数据。

API应该提供此网址localhost/search/critieria上的数据，用户提供条件。

您可以按以下方式呈现表格：

fetch("http://localhost/search/" + criteria)
.then((res) => res.json())
.then((data) => {
    generateTable(data);
})
.catch((err) => err);

以下是我做的快速演示：https://jsfiddle.net/hwtgeo36/7/

您插入一个数字，它会从服务器返回一个星球大战角色（例如1 = Luke Skywalker）。您可以在自己的服务器上使用相同的逻辑。

此外，您可以在此处渲染表格，而不是替换某些html的示例。

如果您遇到麻烦，请回信。

如何在搜索字符串之前隐藏表格？

2 个答案: