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

Posted 2023-02-23

【中文标题】在视图中动态添加 jquery 选项卡

【英文标题】：dynamically add jquery tab in view

【发布时间】：2011-12-29 13:39:03

【问题描述】：

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

【问题讨论】：

您是否在 javascript 控制台中遇到任何错误？也许这有助于解决问题。

您是否在主视图中包含 jquery 或 jquery ui 两次，然后在部分视图中再次包含？...

@3nigma：不。它们只包含在主视图中

@RonSijm：不，没有错误。只是 CSS 警告...

【参考方案1】：

您是如何提交表单的？如果您没有发布 ajaxy 类型的结果，这是意料之中的，因为您的页面将在表单提交时刷新。

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

EG：

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

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

);

【讨论】：

我的表单是用Html.BeginForm(Action, Controller, POST) 创建的。我会尝试通过 jQuery 提交...