Question

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

＆GT; ＆LT; script type =“text / javascript”＆gt;

   $(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);
       });
   });

＆GT;   ＆LT; / script＆gt;   ＆GT;   ＆LT; form action =“Index.aspx”method =“post”＆gt;   输入您的搜索：


＆LT; input type =“text”id =“query”name =“query”/＆gt;     ＆LT; input type =“text”id =“text1”name =“text1”/＆gt;     ＆LT;输入类型=“提交”值=“搜索”/＆gt;     关闭表格标签

table 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

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

2 个答案: