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

Question

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

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

现在我需要将搜索结果放在选项卡面板的选项卡中。在这个项目的后期，它应该像这样工作：用户搜索一些关键字，并且对于每个新的搜索，一个新的选项卡被添加到选项卡面板。这样，用户应该可以切换到以前的搜索。但我还没有到这一步。

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

我可以看到新标签已添加到标签面板中。但仅持续

这是视图（_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
  }  

});