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

Question

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

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

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

我首先尝试的是向页面添加一个静态选项卡面板，其中包含一个包含搜索结果的选项卡。这相当简单，我没有遇到任何问题。接下来我尝试做的是，每次用户单击搜索表单的提交按钮时，都会向选项卡面板添加一个包含静态内容（“Hello World”）的新选项卡。但这实际上不起作用：

我可以看到新选项卡已添加到选项卡面板中。但仅限于< 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 提交表单，并在成功回调中执行发布表单提交任务。

例如：

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

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

});