Question

我对MVC和jQuery很新，我在向jQuery选项卡面板添加新选项卡时遇到问题。

我有一个包含两个局部视图的ASP.NET MVC3视图。第一个是搜索表单，第二个是搜索结果。

现在我需要将搜索结果放在标签面板的标签中。在此项目的稍后阶段，它应该如下工作：用户搜索一些关键字，并且对于每个新搜索，新选项卡将添加到选项卡面板。这样，用户应该可以切换到先前的搜索。但我还没到现在这么远。

我首先尝试将静态标签面板添加到页面，其中包含一个包含搜索结果的标签。这很容易，我没有问题。我接下来尝试做的是每次用户单击搜索表单的提交按钮时，向选项卡面板添加一个带有静态内容的新选项卡（“Hello World”）。但这并没有真正起作用：

我可以看到新选项卡已添加到选项卡面板中。但仅限于＆lt; 1秒。呈现搜索结果后，新选项卡将立即消失。似乎渲染部分视图会覆盖jQuery / JavaScript所做的更改。

这是视图（_SearchInput是搜索表单的部分视图，_SearchResults是用于显示搜索结果的部分视图）：

<div class="roundedBorder"> 
    @Html.Partial("_SearchInput")
</div>

<div id="tabs" style="margin-top:7px;">

    <ul>
        <li><a href="#fragment-1" id="tab1Link">Test 1</a></li>
    </ul>

    <div id="contentcontainer">
        <div id="fragment-1">@Html.Partial("_SearchResults")</div>
    </div>
</div>

在_SearchInput中，我在文档准备就绪时添加标签，并在点击表单的提交按钮时调用searchClick：

<script>
$(document).ready(function () {
  /* show tabs */
  $('#tabs').tabs();
});

function searchClick() {
    var keyword = $("#searchTextInput").val().trim();

    if (keyword == null || keyword == "") {
        return false;
    }

    var title = keyword.substring(0, 10);

    $('#contentcontainer').append("<div id='fragment-2'>hello world</div>");
    $('#tabs').tabs("add", "#fragment-2", title);
}
</script>

Answer 1

您是如何提交表格的？如果你没有发布ajaxy类型的结果，那么这将是预期的，因为你的页面将在表单提交时刷新。

相反，提交表单，使用jquery提交表单，并在成功回调中执行您的表单提交任务。

EG：

$('form').submit(function(evt) {
    evt.preventDefault();

  $.ajax({  
  type: "POST",  
  url: "formsubmiturl",  
  data: dataposted,  
  success: function() {  
   // add jquery tab stuff here
  }  

});

在视图中动态添加jquery选项卡

1 个答案: