1

我对 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>
4

1 回答 1

0

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

而不是提交表单，而是使用 jquery 提交表单，然后在您的成功回调中执行您的表单提交任务。

例如：

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

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

});
于 2011-11-15T14:40:32.987 回答