如何将此asp.net用户控件转换为在MVC 3中工作

Question

我需要将我的一个asp.net用户控件移到MVC 3中使用，但它看起来像未安装MVC以支持用户控件。

我看到帖子声称用户控件是MVC的反模式。我对这个辩论并不感兴趣，我只需要将这个用户控件移植过来，而不管那个应该放在哪一边。我不认为这是一个HTML帮手。在双引号内部放置javascript作为参数的助手会因为可读性，智能感知支持，可维护性等原因而失去任何好处。

该控件被称为ScriptCompressor。其目的是取代页面上的所有内联脚本标记。在渲染过程中，最终构成对动态页面调用的所有内联JavaScript被合并，并放置在页面底部/顶部的一个或两个脚本“包装器”中。这种控制的关键在于通过缩小和压缩所有内联脚本来减少页面大小并提高负载性能。没有视图状态涉及它只是输出脚本标记和JavaScript。

如何在MVC 3 Razor页面中调用我现有的控件？从ASP.net使用

例子：

<uc:ScriptCompressor Compress="true"> 
    var myGlobalVar = "something"; 

</uc:ScriptCompressor> 

<uc:ScriptCompressor Compress="true" UseReadyWrapper="true"> 
    var _registrationViewModel = new RegisterViewModel(); 
    ... 
</uc:ScriptCompressor> 

<uc:ScriptCompressor Compress="true" UseReadyWrapper="true"> 
    var _addNewUserViewModel = new AddNewUserViewModel(); 
    ... 
</uc:ScriptCompressor> 

未压缩输出：

<script type="text/javascript"> 
var myGlobalVar = "something"; 
$(function() { 
    var _registrationViewModel = new RegisterViewModel(); 
    var _addNewUserViewModel = new AddNewUserViewModel(); 
}); 
</script> 

Answer 1

你可以使用2个自定义HTML佣工一起，以取代现有的服务器端控制：

public static class HtmlExtensions 
{ 
    private const string GlobalsQueueKey = "_globals_queue_"; 
    private const string ReadyWrapperQueueKey = "_ready_wrapper_queue_"; 

    [Obsolete("Don't use inline scripts, that's what javascript files are meant for. And yeah, there are pretty nifty javascript compressors out there. Not to mention that in ASP.NET MVC 4 there's the bundling and minification functionality built-in. So use this helper just for fun not in a real application that you intend to put in production.")] 
    public static IHtmlString RegisterInlineScript(this HtmlHelper htmlHelper, bool compress, bool useReadyWrapper, Func<object, HelperResult> action) 
    { 
     var queueKey = useReadyWrapper ? ReadyWrapperQueueKey : GlobalsQueueKey; 
     var queue = htmlHelper.ViewContext.HttpContext.Items[queueKey] as Queue<Func<object, HelperResult>>; 
     if (queue == null) 
     { 
      queue = new Queue<Func<object, HelperResult>>(); 
      htmlHelper.ViewContext.HttpContext.Items[queueKey] = queue; 
     } 
     queue.Enqueue(action); 

     return MvcHtmlString.Empty;     
    } 

    [Obsolete("Don't use inline scripts, that's what javascript files are meant for. And yeah, there are pretty nifty javascript compressors out there. Not to mention that in ASP.NET MVC 4 there's the bundling and minification functionality built-in. So use this helper just for fun not in a real application that you intend to put in production.")] 
    public static IHtmlString InlineScripts(this HtmlHelper htmlHelper) 
    { 
     var globalsQueue = htmlHelper.ViewContext.HttpContext.Items[GlobalsQueueKey] as Queue<Func<object, HelperResult>> ?? new Queue<Func<object, HelperResult>>(); 
     var readyWrapperQueue = htmlHelper.ViewContext.HttpContext.Items[ReadyWrapperQueueKey] as Queue<Func<object, HelperResult>> ?? new Queue<Func<object, HelperResult>>(); 
     if (!globalsQueue.Any() && !readyWrapperQueue.Any()) 
     { 
      // Nothing to compress, nothing to output 
      return MvcHtmlString.Empty; 
     } 

     var writer = htmlHelper.ViewContext.Writer; 


     writer.Write("<script type=\"text/javascript\">"); 

     using (var globalsWriter = new StringWriter()) 
     { 
      foreach (var item in globalsQueue) 
      { 
       item(null).WriteTo(globalsWriter); 
      } 
      var globals = globalsWriter.GetStringBuilder().ToString(); 
      writer.Write(Compress(globals)); 
     } 

     using (var readyWrapperWriter = new StringWriter()) 
     { 
      foreach (var item in readyWrapperQueue) 
      { 
       item(null).WriteTo(readyWrapperWriter); 
      } 

      var readyWrapper = readyWrapperWriter.GetStringBuilder().ToString(); 

      writer.Write(
       string.Format("$(function() {{{0}}});", Compress(readyWrapper)) 
      ); 
     } 

     writer.Write("</script>"); 

     return MvcHtmlString.Empty; 
    } 

    private static string Compress(string script) 
    { 
     // TODO: wheel reinvention code from your existing 
     // server side control to be put here to compress 
     return script; 
    } 
} 

然后你可以看到你注册了多个内联脚本：

@Html.RegisterInlineScript(true, false, 
    @<text> 
     var myGlobalVar = "something"; 
    </text> 
) 

@Html.RegisterInlineScript(true, true, 
    @<text> 
     var _registrationViewModel = new RegisterViewModel(); 
    </text> 
) 

@Html.RegisterInlineScript(true, true, 
    @<text> 
     var _addNewUserViewModel = new AddNewUserViewModel(); 
    </text> 
) 

在 _Layout输出

和地方他们：

@Html.InlineScripts() 

好了，现在你的实际应用结账的捆绑和缩小支持ASP.NET MVC 4：http://www.beletsky.net/2012/04/new-in-aspnet-mvc4-bundling-and.html