Asp.Net MVC 3 - PartialView (Ajax) 的重复 JS 文件

Question

在我的 _MainLayout（父布局）中，我引用了几个 JS 文件。

使用以下 javascript/jquery 函数将部分视图添加到 div：

    $.ajax(link, {
            dataType: "html",
            cache: false,
            success: function(data, textStatus, jqXHR) {
                return pageDownloaded(data, a);
            },
            complete: function (jqXHR, textStatus) {
            //add .on event
            }
        });

和

   function pageDownloaded(data, anchor){
var link = anchor.attr("href").replace(/^\#/, ""),
title = anchor.attr("title"),
id = link.replace(/[\/\.]/,"-"),
target = "#main-content",
div = $('<div style="left: 100%" id="'+id+'">'+data+'</div>').appendTo($(target));
$("#wrapper > section > section > header h1").html(title);

if ($('#wrapper > section > section').css('position')=='absolute') {
    $("> div:last", target).css({left: 0, position: 'relative'}).siblings().remove();
    $('#wrapper > section > section').show().animate({left: 0}, 300, "easeInOutQuart",                                       function(){$(this).css('left',0);});
} else {
 /* $("> div", target).animate({left: "-=100%"}, "slow", "easeInOutQuart", function(){
        $(this).css('left',0);
        $("> div:last", target).css({position: 'relative'}).siblings().remove();
    });*/
    $("> div", target).animate({ left: "-=100%" },500, function () {
        $(this).css('left', 0);
        $("> div:last", target).css({ position: 'relative' }).siblings().remove();
    });

}

 $(window).trigger('drilldown');
 }

问题是，如果我在我的母版页加载的 JS 文件中设置它 （要添加到每个页面的默认操作（日期输入，...））

  (function($){
    $.fn.placeholder = function(options) {
      return this.each(function() {
        if ( !("placeholder"  in document.createElement(this.tagName.toLowerCase()))) {
          var $this = $(this);
          var placeholder = $this.attr('placeholder');
          $this.val(placeholder).data('color', $this.css('color')).css('color', '#aaa');
          $this
            .focus(function(){ if ($.trim($this.val())===placeholder){       $this.val('').css('color', $this.data('color'))} })
            .blur(function(){ if (!$.trim($this.val())){       $this.val(placeholder).data('color', $this.css('color')).css('color', '#aaa'); } });
        }
      });
    };
  })(jQuery);

  $(document).ready(function() {
      $('input[placeholder]', target).placeholder();

      $("input[type=date]", target).dateinput();

      $("input:checkbox,input:radio,select,input:file", target).uniform();

  });

我必须在我的 PartialView 中再次引用它。 我还必须再次引用 jquery.min.js 文件，...

我该如何解决这个重复问题？

Answer 1

这是一个令人困惑且相当混乱的问题，也许这会帮助您理顺代码。

然后，可以加载的内容页面应该不包含 on_load 类型的活动或额外的全局脚本引用。

1. 加载MasterPage（脚本引用、CSS 引用等）
2. 加载Content（部分视图、动态数据、特定脚本等）
3. 内容加载完毕？运行Content.Init() 类型的函数。 （例如MyView.GetData()）
4. 用户交互开始。