asp.net mvc jquery tab

我在看here在asp.net mvc中使用jQuery創建一個動態選項卡。asp.net mvc jquery tab

我有我的觀點的添加按鈕將調用jQuery函數去通過AJAX到URL，返回其採用

Html.BeginCollectionItem()

到目前爲止，我已經做了，增加櫃檯爲我的標籤（例如一個partialView：Employee1 ，Employee2），並且可以帶來部分視圖並將其呈現在標籤內容中，但是發生的情況是我在Employee1標籤內容中輸入的信息直接在Employee2內容中複製和重新生成。（例如：Employee1內容中的FullName出現在Employee2內容中）如何刪除先前的標籤內容數據並生成新數據？

而且當我點擊添加按鈕時，部分視圖內容將垂直和水平添加。這似乎很奇怪。

所以，我的觀點：

button type="button" class="btn btn-primary" id="add">Add</button> 

<div id="tabs"> 
      <ul>         
      </ul> 
      <div id="content"> 
       <div id="tabs-1"></div> 
      </div>       
     </div> 


<script> 
$(document).ready(function() { 
    var tabCounter = 1; 
    $('#add').on('click', function() { 
     $.ajax({ 
      url: '/Employee/AddNewEmployee', 
     }).success(function (partialView) { 
      addTab(partialView); 
     }); 
    }); 

    function addTab(partialView) { 
     var id = "Employee" + tabCounter; 
     var title = "Employee" + tabCounter; 
     $('#content').append("<div id='" + id + "'><p>" + partialView + "</p></div>");    
     $('#tabs').tabs("add", id, title); 
     tabCounter++; 
    } 
}); 
</script>

控制器：

public ActionResult AddNewEmployee() 
    { 
     return PartialView("_EmployeePartial"); 
    }

EmployeePartial：

@model Test.Models.Employee 

<div class="editorRow"> 
    @using (Html.BeginCollectionItem("employees")) 
    { 
     @Html.EditorFor(m => m.FullName, new { htmlAttributes = new { @class = "form-control" } })   
</div> 
    }

來源

2016-11-10 pavilion

我解決它。我只需要更仔細地查看jQuery API文檔。

這裏是我的代碼：

<div id="tabs"> 
    <ul>      
    </ul> 

</div>  

<script> 
$(function() { 
    var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>", 
     tabCounter = 2; 

    var tabs = $("#tabs").tabs(); 
    $('#add').on('click', function (event) { 
     $.ajax({ 
      url: '/Application/AddNewEmployee', 
     }).success(function (partialView) { 
      addTab(partialView); 
     }); 
     event.preventDefault(); 
    }); 

    // Actual addTab function: adds new tab using the input from the form above 
    function addTab(partialView) { 
     var label = "Tab " + tabCounter, 
      id = "tabs-" + tabCounter, 
      li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)); 

     tabs.find(".ui-tabs-nav").append(li); 
     tabs.append("<div id='" + id + "'><p>" + partialView + "</p></div>"); 
     tabs.tabs("refresh"); 
     tabCounter++; 
    } 

    // Close icon: removing the tab on click 
    tabs.on("click", "span.ui-icon-close", function() { 
     var panelId = $(this).closest("li").remove().attr("aria-controls"); 
     $("#" + panelId).remove(); 
     tabs.tabs("refresh"); 
    }); 

    tabs.on("keyup", function (event) { 
     if (event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE) { 
      var panelId = tabs.find(".ui-tabs-active").remove().attr("aria-controls"); 
      $("#" + panelId).remove(); 
      tabs.tabs("refresh"); 
     } 
    }); 
});

來源

2016-11-10 23:36:48 pavilion

asp.net mvc jquery tab

回答

相關問題