在ASP.NET MVC中，可以通过XAML实现服务器端图像渲染，这允许动态生成与视图数据或视图模型绑定的数据图像。这意味着可以从控制器传递的视图数据或模型中生成图像，从而实现基于视图数据/模型的图像生成。
要实现这一点，需要继承XamlAsyncController并添加一个异步动作来服务图像。以下是实现这一功能的步骤：
首先，需要从控制器传递一些数据，将其绑定到TextBlock上，然后将其渲染为图像。例如，当客户端HTML中有一个URL如下：
<image src="/Home/ShowMessage" />
那么TextBlock图像应该显示出来。以下是实现步骤：
需要从ASP.NET MVC引用MvcXamlController.Lib.dll。在HomeController中，可以看到HomeController继承自XamlAsyncController，这是一个自定义的抽象控制器，继承自ASP.NET MVC 2中的AsyncController。只需要在ShowMessageAsync方法中调用StartRendering()方法，并在ShowMessageCompleted方法中返回XamlView()。
public class HomeController : XamlAsyncController
{
public void ShowMessageAsync()
{
ViewData["Message"] = "Welcome from Xaml in MVC";
StartRendering();
}
public ActionResult ShowMessageCompleted()
{
return XamlView();
}
}
一旦控制器动作可以像上面那样服务图像，下一步就是添加一个XAML文件。在此之前，它应该位于路径/Visualizations/{Controller}/{Action}.xaml中。这与在路径/Views/{Controller}/{Action}.aspx中添加视图是相似的。
首先，需要将WindowsBase、PresentationUI、PresentationCore DLLs的引用添加到ASP.NET MVC项目中，这在演示项目中已经完成。然后需要手动将XAML文件从其他地方复制到所需的路径，因为Visual Studio的“添加新项目”对话框在尝试在ASP.NET MVC项目中添加新项目时不会显示XAML文件。
以下是ShowMessage.xaml文件的示例：
<UserControl x:Class="MvcXamlController.Demo.Visualizations.Home.ShowMessage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Margin="1" Padding="2" Width="300" Height="60" mc:Ignorable="d">
<Grid>
<Border BorderBrush="Gray" BorderThickness="2" Background="WhiteSmoke" CornerRadius="5" Padding="4">
<StackPanel>
<TextBlock Text="I am a WPF control rendered as image" />
<TextBlock Text="{Binding Message}" />
</StackPanel>
</Border>
</Grid>
</UserControl>
注意如何将TextBlock的Text属性绑定到ViewData中的Message的（好吧，之间有一些管道。库将为ViewData设置一个动态包装器，作为视图的数据上下文，所以可以直接绑定）。因此，当客户端HTML中有一个URL如下：
<image src="/Home/ShowMessage" />
实际上会看到TextBlock的渲染图像，上面有从控制器传递的数据作为文本。
该库还支持直接渲染WPF控件，而不需要像上面那样保持一个单独的XAML视图。现在，让看看如何直接渲染正常的WPF控件——一个按钮控件和一个仪表控件，基于从控制器传递的给定用户值。
在这个示例中使用的仪表控件XAML是Evelyn从Codeproject开发的Xaml guage控件——感谢Evelyn。
以下是渲染按钮图像和仪表图像的控制器的代码，显示在HTML页面上：
public class VisualsController : XamlAsyncController
{
// 将视图数据传递给Xaml以用于仪表控件
public void GuageAsync()
{
ViewData["Score"] = 200d;
ViewData["Title"] = "Hello";
StartRendering();
}
public ActionResult GuageCompleted()
{
return XamlView();
}
// 将视图数据传递给Xaml以用于按钮控件
public void ButtonAsync()
{
StartRendering(()=>new Button() { Content = "Hello", Height = 30, Width = 100 });
}
public ActionResult ButtonCompleted()
{
return XamlView();
}
}
传递的值（如Score、Title等）可以很容易地成为从Get/Post请求到控制器动作的数据。然而，现在让保持简单。所以，这是HTML页面中的代码：
<h2>
Xaml in ASP.NET MVC Demos
</h2>
<h3>
Simple Button
</h3>
<image src="/Visuals/Button" />
<h3>
Gauge
</h3>
<image src="/Visuals/Guage" />
这是仪表控件的XAML定义。注意数据绑定语法，它将DialText和CurrentValue绑定到从控制器传递的viewdata。
<UserControl x:Class="MvcXamlController.Demo.Visualizations.Dashboard.Guage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="clr-namespace:MvcXamlController.Controls;assembly=MvcXamlController.Controls"
Width="300" Height="300" mc:Ignorable="d">
<Grid>
<controls:CircularGaugeControl x:Name="myGauge1" Radius="150" ScaleRadius="110" ScaleStartAngle="120" ScaleSweepAngle="300" PointerLength="85" PointerCapRadius="35" MinValue="0" MaxValue="1000" MajorDivisionsCount="10" MinorDivisionsCount="5" CurrentValue="{Binding Score}" ResetPointerOnStartUp="True" ImageSize="40,50" RangeIndicatorThickness="8" RangeIndicatorRadius="120" RangeIndicatorLightRadius="10" RangeIndicatorLightOffset="80" ScaleLabelRadius="90" ScaleLabelSize="40,20" ScaleLabelFontSize="10" ScaleLabelForeground="LightGray" MajorTickSize="10,3" MinorTickSize="3,1" MajorTickColor="LightGray" MinorTickColor="LightGray" ImageOffset="-50" GaugeBackgroundColor="Black" PointerThickness="16" OptimalRangeStartValue="300" OptimalRangeEndValue="700" DialTextOffset="40" DialText="{Binding Title}" DialTextColor="Black">
</controls:CircularGaugeControl>
</Grid>
</UserControl>