css - 为使用 ajax 加载的部分 View 加载 css 的最佳方式

Question

我正在开发我的应用程序，该应用程序动态创建选项卡并使用 ajax 使用部分 View 填充它们。

我的问题是:如何为这个 View 加载 css？最好的方法是什么？我的意思是我无法在部分 View ( headless )上加载 css 文件，或者我可以吗？

一些代码:tabManager(在主页上加载的部分 View ):

 <script>
 var tabTemplate = "<li class='#{color}'><a id='#{id}'href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'  role='presentation'>Remove Tab</span></li>"; // base format for the tabs

 $(document).ready(function () {

  var tabs = $("#tabs").tabs();       // apply jQuery ui to tabs

  $("a.menuButton").click(function () {

      var urlContent = $(this).data("direction");
      var label = $(this).data("label");
      var idTab = $(this).data("id");
      var color = $(this).data("color");

      var exist = false;
      var counter = 0;
      $('#tabs ul li a').each(function (i) {     // tab already exist o no hay que crear una tabla?

          counter = counter + 1;                 // index counter
          if (this.id == "#" + idTab) {          // Tab already exist?
              exist = true;
              $("#tabs").tabs("option", "active", counter - 1);     //activate existing element
          }
      });
      if (idTab == "-1") {                     // is a clickable element?
          exist = true;
      }
      if (exist == false) {                   // create new tab
          addTab(idTab, label, color);        // basic tab
          getTabContent(idTab, urlContent);   // content for new tab
          var lastTab = $('#tabs >ul >li').size() - 1;       // get count of tabs
          $("#tabs").tabs("option", "active", lastTab);      // select last created tab
      }
  });

   function getTabContent(idT, urlC) {          // ajax call to partial view
          $.ajax({
             url: urlC,
            type: 'GET',
           async: false,
              success: function (result) {
                  $("#"+idT).html(result);
        }
      });
 };

   function addTab(idT, labT, color) { //create new tab


     var label = labT,
       id = idT,
       li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label).replace(/#\{id\}/g, "#" + id).replace(/#\{color\}/g, color)),
       tabContentHtml = "Cargando...";

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

 }

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

tabs.bind("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");
    }
    });
});
</script>

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

按钮示例:

<li><a class="menuButton" href="#" title="Permisos" data-id="tab3" data-direction="Permiso/_Administrar" data-label="Label" data-color="blue"><img src="@Res_icons.More">Permisos</a><li>

Answer 1

我在这里找到了答案:http://dean.resplace.net/blog/2012/09/jquery-load-css-with-ajax-all-browsers/

代码:

  <script type="text/javascript">
      $(document).ready(function () {

          $("head").append("<link href='...' rel='stylesheet'>");

      });
    </script>