JQuery：在页面加载时隐藏div，在提交时显示div而不刷新页面

MVC项目：我有一个带有提交按钮的搜索页面，在提交时：它将查询字符串发布到控制器以执行搜索，并将结果作为同一页面上表中的项目列表带回视图。这就是为什么我在同一个视图中有表和提交按钮。 因此，当用户第一次打开搜索页面时，他会得到一个文本框和一个按钮，还有一个包含数据库中所有数据的表，提交后，它只返回相关结果。 我想做以下工作： 当用户第一次打开页面时，他只会得到文本框和搜索按钮。然后在提交时，页面将刷新并向用户显示文本框、搜索按钮和数据表。有一些jquery函数依赖于此数据表 我试图通过局部视图来实现这一点，但jquery函数在ascx中不起作用。 我尝试使用jquery在加载时隐藏表，但在提交时显示它，但在提交后，整个页面将刷新，因此表将再次隐藏。 以下是index.aspx中的部分代码：

> >

输入您的搜索：

table id=“listtable”
%对于模型中的每个项目% //循环浏览数据库中相关的数据列表
表结束标记

我不知道这是否足够清楚。我不知道怎么做，所以当用户第一次打开搜索页面时，他/她不会看到该表。只有在提交搜索查询后才能看到它。

---

能做到吗？如果是的话，不使用ajax可以做到吗？因为我真的不明白

隐藏和显示的东西很简单。您需要为所有这些元素提供ID，以便更容易确定目标：

$(function(){ 
    $("#listtable").hide();
    $("#my_form).submit(function(){ $("#listtable").show(); return false; }
}

现在，实际上做一些有用的事情需要重新加载页面，在这种情况下，您根本不需要jQuery修改页面，或者需要Ajax，这可能就是您想要的。你可以看看这个方法。使用此方法，可以轻松地将Ajax调用的结果加载到目标元素中。请特别注意

数据

参数。这只是要传递的键值对数据的对象。所以，你可以这样做：

$('#listtable').load('/my/ajax.url', {query: $('#my_input').val()});

---

HTH

您可以使用AJAX提交表单，这样提交页面将不会刷新，事情将按预期进行

$(document).ready(function () {
       $("form").submit(function (e) {
             $.get('../ajax_index.aspx',{

                               /*add parameters here*/


                     },function(){
                   /* after the submit .....*/
                   /*Here you can use load() to add new content*/
                   $('#listtable').load('/your/ajax.url', {query: $('#my_input').val()});
               });
       });
      $("#listtable tr td:first-child").click(function () {
       $("#text1").val($(this).innerHTML);
       alert("You have chosen Account Number " + this.innerHTML);
   });
});

---

我不确定我做得是否正确，因为它不起作用。我真的对ajax一无所知。所以在document.ready之后，我隐藏了lisstable，然后在表单提交中，我用lisstable.load添加了您的最后一行。应该是这样吗？因为它不起作用：加载远程页面后，您可能需要提供一个回调函数来显示

#listtable

。我建议读一读Ajax，至少是它的jQuery接口。这真的很简单。请你更详细地解释一下：我已经更新了上面的答案，请发布你的错误来帮助你。

$(document).ready(function () {
       $("form").submit(function (e) {
             $.get('../ajax_index.aspx',{

                               /*add parameters here*/


                     },function(){
                   /* after the submit .....*/
                   /*Here you can use load() to add new content*/
                   $('#listtable').load('/your/ajax.url', {query: $('#my_input').val()});
               });
       });
      $("#listtable tr td:first-child").click(function () {
       $("#text1").val($(this).innerHTML);
       alert("You have chosen Account Number " + this.innerHTML);
   });
});