Today I would like to introduce the new Chart Control, which was newly added to the ASP.NET 4.0 Framework. With this chart control, you can build exciting graphical charts within minutes. Our starting position is a new ASP.NET Web Application using Visual Studio 2010. Implement the control into your page If you open up your default.aspx and look at the toolbox, you will find the "Chart" Control in the section "Data": If you drag the chart control into the design-surface, VisualStudio adds some settings to the web.config. This will be done automatically so the following is just an explanation of the changes: Web.config changes ChartImage settings At the node <appSettings> the following entry will be created:   <add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;" />   This is the configuration of the temporary storage, where the generated files should be placed at. Please be aware of the fact, that the storage will use a large amount of space, depending on how many charts will be generated. ChartImage.axd handler At <system.web><httpHandlers> the following entry will be added:   <add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false" />   The chartimage.axd is the main-component of the chart-control. The handler will be called for each generated image. Control-definition In the node <system.web><pages><controls> the tag-definition will be added:   <add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture:neutral, PublicKeyToken=31bf3856ad364e35" />   This will add the tag-support, that we can use a <asp:chart /> tag in our aspx pages. Reference to the DataVisualization assembly At the end, a reference to the DataVisualization assembly will be added at <system.web><compilation><assemblies>:   <add assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture:neutral, PublicKeyToken=31bf3856ad364e35"/> Default chart-element in aspx page In the aspx page, where you dragged the control in, VisualStudio will add the default chart-control to the code:   <asp:Chart ID="Chart1" runat="server"> <Series> <asp:Series Name="Series1"> </asp:Series> </Series> <ChartAreas> <asp:ChartArea Name="ChartArea1"> </asp:ChartArea> </ChartAreas> </asp:Chart> Charting quickstart Before we begin using the chart control, I would like to explaine the properties "Series" and "ChartAreas": Series The Seriaes collection contains the data-points for one or more data-series. Basically for each line in the chart (consisting of multiple data-points) one series of data is required. Each series can have its own ChartType. Additionaly, each series can be assigned to any ChartArea where each series can also have its own rendering-properties (for example colors, labels etc.). ChartAreas The ChartArea collection can have one or more configurations which controls the rendering of a chart. Important: There must be at least one ChartArea definition that the rendering will be executed! Now we know that we have to add a <asp:Series> in the property <series> which contains our datapoints. Also we have to be sure that there is at least one <asp:ChartArea> at the <ChartAreas> defined, otherwise we would get just a white picture. After changing the chart-control code to the following:   <asp:Chart ID="cTestChart" runat="server"> <Series> <asp:Series Name="Testing" YValueType="Int32"> <Points> <asp:DataPoint AxisLabel="Test 1" YValues="10" /> <asp:DataPoint AxisLabel="Test 2" YValues="20" /> <asp:DataPoint AxisLabel="Test 3" YValues="30" /> <asp:DataPoint AxisLabel="Test 4" YValues="40" /> </Points> </asp:Series> </Series> <ChartAreas> <asp:ChartArea Name="ChartArea1"> </asp:ChartArea> </ChartAreas> </asp:Chart>   We will get this output in the rendered output page: So we successfully created our first chart! More informations The chart control in the ASP.NET 4.0 Framework is a big and comprehensive control, so to explain the whole control would be too much for a short blog-post :) Also, there are already many good introductions and tutorials about the chart control, so I will give you a short list on what you can look at next: Short Video-introduction into the charts component: http://www.asp.net/aspnet-4/videos/aspnet-4-quick-hit-chart-control Blog-Entry of Scott Guthrie: http://weblogs.asp.net/scottgu/archive/2010/02/07/built-in-charting-controls-vs-2010-and-net-4-series.aspx Article series from 4guysfromrolla.com:Introduction: http://www.4guysfromrolla.com/articles/072209-1.aspxChart-Data Plotting: http://www.4guysfromrolla.com/articles/072909-1.aspxChart Rendering: http://www.4guysfromrolla.com/articles/081909-1.aspxSorting and filtering: http://www.4guysfromrolla.com/articles/092309-1.aspxNested reports / clickable charts: http://www.4guysfromrolla.com/articles/102809-1.aspx How-To: Chart Control with ASP.NET MVC: http://code-inside.de/blog/2008/11/27/howto-aspnet-chart-controls-mit-aspnet-mvc-nutzen/ (german, sorry :)) So I hope I was able to give you a short overviewe about the new ASP.NET Charts Control! If you have any questions or informations, please just leave a comment! I'm happy to read any suggestions and I will try to answer every question! Now, have a nice day and always happy coding! :) Test Project Here you find a test-project, where you can play with the charts control: ChartsTester.zip (22.13 kb) ChartsTester.jpg (43.56 kb)

Introduction Consider the following scenario: There is a large source list with more than 20 entries You have a destination list with a lookup Field (single-lookup) to the source list For the destination list, you created (or have to possibility to create) custom new and edit forms If you look at the new / edit form of the destination list, you will see that the dropdown rendering is no longer a simple <select> HTML element, but a complex dropdown with filtering possibilities. In some cases, this is really great, but sometimes, you just want a simple <select> element also with big lists (especially if you have a ajax updating script for example, which populates this dropdown). Solutions There are several possibilities. One good solution I found was from here: http://sharepointegg.blogspot.com/2010/10/fixing-sharepoint-2010-lookup-drop-down.html This solution uses only client script (jQuery), and does not change the rendering directly on the server. My solution (only possible on customized new / edit forms) Since I allready customized the new and edit form, I had the full control over the form self (which elements should be placed on the form / which parameters do they use). So I had a form build with the following elements for each column: <tr runat="server" id="FormField_FieldName"> <td width="190px" valign="top" class="ms-formlabel"> <h3 class="ms-standardheader"> <nobr> <SharePoint:FieldLabel runat="server" ID="field_FieldName_Label" ControlMode="New" FieldName="FieldName" /> </nobr> </h3> </td> <td width="400px" valign="top" class="ms-formbody"> <SharePoint:FormField runat="server" ID="field_FieldName" ControlMode="New" FieldName="FieldName" /> <SharePoint:FieldDescription runat="server" ID="field_FieldName_Description" FieldName="FieldName" ControlMode="New" /> </td> </tr> With this markup, you get a standard SharePoint 2010 form field rendered. In my form, I rendered all fields of my destination list with the above markup construct (just changed the "FieldName" to the actual field name), including the lookup field. After some testing, I noticed that the lookup dropdown was rendered very weird (the behaviour described in the introduction) and I needed to change that to get a standard <select> tag. After looking at the source for the SP:FormField control using the RedGate Reflector, I saw the following part: if ((((this.DataSource != null) && (this.DataSource.Count > 20)) && (!base.InDesign && SPUtility.IsIE55Up(this.Page.Request))) && !SPUtility.IsAccessibilityMode(this.Page.Request)) { .... } This is where the descision is done, if the dropdown should render a normal <select> element or a complex complex filtering dropdown. What is this code part deciding? ( Check if the DataSource != null AND Check if the DataSource.Count > 20 ) AND ( Check if the bool InDesign is false AND Check if the current request is from a IE5.5 (or more) ) AND Check if the current request is NOT in accessibility mode After looking at the code, I only saw one possibility to "override" this hardcoded >20 limit... I decided to set the property "InDesign" to true on the FormField. I was feeling bad about this change.. I tried to find out what exactly this "InDesign" property does on the FormField, but I did not found any documentation about the property or the use of it... So I only saw this solution. After changing the form HTML markup of the lookup field to this markup: <tr runat="server" id="FormField_FieldName"> <td width="190px" valign="top" class="ms-formlabel"> <h3 class="ms-standardheader"> <nobr> <SharePoint:FieldLabel runat="server" ID="field_FieldName_Label" ControlMode="New" FieldName="FieldName" /> </nobr> </h3> </td> <td width="400px" valign="top" class="ms-formbody"> <SharePoint:FormField runat="server" InDesign="true" ID="field_FieldName" ControlMode="New" FieldName="FieldName" /> <SharePoint:FieldDescription runat="server" ID="field_FieldName_Description" FieldName="FieldName" ControlMode="New" /> </td> </tr> *tadaaa*, the dropdown was working excelent and it rendered the <select> markup as expected! :) Conclusion I found a solution for this problem, but anyway, I'm still feeling bad about this change... is anyone out there who can explain the use of this "InDesign" property on the FormField Control? Or is it just inherited and unused? If there are any comments or informations available for this, please leave a comment! Also leave a comment if it was working on your site! :) So, this is it for today! Happy coding and may the source be with you! :)

If you render a Link to another Controller / View, you can just use the method 'Html.ActionLink' on a view: Html.ActionLink("Link Title", "TargetAction", "TargetController"); Now, if you want to submit additional parameters / action parameters in the link, you can use the overloads of 'Html.ActionLink': Html.ActionLink("Link Title", "TargetAction", "TargetController", new { id = 1 }, new { title = "My link to TargetController, class = "linkClass" }) As you can see, the action 'TargetAction' will receive a parameter 'id' with the value of '1'. To the 'a href' HTML tag, a title and the CSS class "linkClass" will be rendered. According the MSDN (http://msdn.microsoft.com/en-US/library/dd504972.aspx) the key/value pairs will be retreived through reflection by examining the properties of the object.

Usualy a MVC 2 Page is rendered using a Controller which loads a Model and supplies the data to the configured View which displays the data. Sometimes it is required to render more than one View (or render multiple Partial Views) at one output Page. This mostly makes sense in MasterPages (for example for a Navigation menu) or if you have a detail view of a item and want to display the whole list on the same page. To accomplish this task, you have to use the 'Html.Action' or 'Html.RenderAction' Method, available at most of the view-types (ViewPage<>, ViewUserControl<>, ViewMasterPage<>) You can use either 'Html.Action':   <%= Html.Action("Index", "Navigation") %>   or 'Html.RenderAction':   <% Html.RenderAction("Index", "Navigation"); %> The difference between the two possibilities is that 'Html.Action' returns a string with the rendering-result, 'Html.RenderAction' directly writes the rendering-result to the response output.