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

Question

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

>

   $(document).ready(function () {
       $("form").submit(function (e) {
       });
       $("#listtable tr td:first-child").click(function () {
           $("#text1").val(this.innerHTML);
           alert("You have chosen Account Number " + this.innerHTML);
       });
   });

> 脚本> >

输入您的搜索：

关闭表单标签

表 id="listtable"
% 对于模型中的每个项目% // 遍历数据库中相关的数据列表
表格关闭标签

我不知道这是否足够清楚。我不知道该怎么做，所以在用户第一次打开搜索页面时，他/她不会看到那个表。并且只有在提交搜索查询后才能看到。 可以做到吗？如果是，是否可以不使用ajax 来完成，因为我真的不明白！

Answer 1

您可以使用 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);
   });
});

Answer 2

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

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

现在，实际上做一些有用的事情将需要重新加载页面，在这种情况下，您根本不需要 jQuery 修改页面或 Ajax，这可能是您所追求的。您可以查看类似.load() 方法的内容。使用此方法，您可以轻松地将 Ajax 调用的结果加载到目标元素中。请特别注意 data 参数。这只是要传递数据的键值对对象。因此，您可以执行以下操作：

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

HTH