Jim's article How to Post Code From Visual Studio to Your Blog provides a very easy and effective way to add code examples from Visual Studio to your blog. Jim's article focuses on the blogging platform WordPress but it will work just as well in any blogging platform as your Visual Studio code is converted to HTML. As you can see it works great here in our Squarespace blog.
17 //
18 // GET: /ParentTags/
19
20 public ActionResult Index()
21 {
22 return View();
23 }
On a ASP.NET MVC project I am currently working on I have implemented Remy's jQuery Tag Suggestion
plug in which works perfectly and makes a nice experience for people using my application.
I wanted to share a couple of learnings for others who would like to implement this plugin in their ASP.NET MVC applications where they need to return data from a database instead of a static tag list/file.
To make it easier for you to implement a similar function I have created an ASP.NET MVC project which can be downloaded here Tag Suggestion ASP.NET MVC project files and Tag Suggestion database back up. You can also check out a working version of this source code here ASP.NET Tag Suggestion demo
Of course the first step is to download the tag.js file from Remy's article and add this file to your Scripts folder in your MVC project.
Then you will need to add a reference to this file and add the tag script under the Head html tag in your Site.Master file normally found under the Views/Shared folder.
The reference to the tag.js file will look something like
12 <script src="<%= Url.Content("~/Scripts/jquery-1.3.2.min.js") %>" type="text/javascript"></script>
13
14 <script src="<%= Url.Content("~/Scripts/tag.js") %>" type="text/javascript"></script>
15
16 <% if (false)
17 { %>
18
19 <script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript" </script>
20
21 <script src="../../Scripts/tag.js" type="text/javascript"></script>
22
23 <% } %>
and the tag script for the Ajax version of the Tag Suggestion which will look up and return data from your database. The script should look like
25 <script type="text/javascript">
26
27 $(function() {
28 $('#ParentTags').tagSuggest({
29 url: 'TagSuggestion',
30 delay: 250
31 });
32 });
33
34 </script>
Notice the #ParentTags which will be the id of the textbox you would like to use for the Tag Suggestion feature. This textbox will call/fire the jQuery function. Also notice the url: 'TagSuggestion' which points to a action within the current controller file being used to return the view where you will be using this tag suggestion textbox.
Now you need to add the textbox to the view where you want to use the Tag Suggestion like this
19 <%= Html.TextBox("ParentTags")%>
As you can see this text box has a name/id of "ParentTags" which will link to the script also called #ParentTags. To make it easy and clean I have also got a field in my database called "ParentTags" so I can save the tags the person enters.
Last but not least we need to add the Action to the Controller which will be used to render the view we added the textbox to above.
The Action code will look like
82 public ActionResult TagSuggestion()
83 {
84
85 var tagDetailsGrp = from tdg in db.vw_TagDetails_Grps
86 orderby tdg.DetailIDCount descending
87 select tdg;
88
89 ArrayList list = new ArrayList();
90
91 foreach (vw_TagDetails_Grp item in tagDetailsGrp)
92 {
93 list.Add(item.DetailTag);
94 }
95
96 return this.Json(list);
97
98 }
This Action code goes to a view in my database which groups all of the tags from the table called TagDetails and returns this list of tags. The code then adds each tag to an ArrayList which is then returned to the jQuery function in JSON format.
That's it now you should have your new jQuery Tag Suggestion function up and running. I hope this helps to save you a bit of time and feel free to let me know if you have any questions.
Normally when building ASP.NET applications Linq to SQL makes the job a whole lot easier. It takes care of all the data access for creating, updating and deleting individual records. However every so often I come across the need to delete multiple records such as the case with a one to many relationship, where I need to delete all related records for a specific group. Unfortunately this is not as simple as you would think using Linq to SQL as Linq to SQL only deals with one record at a time. For a large high performance application where large numbers of records need to be deleted the best approach would be to use a stored procedure. In some cases the delete is contained to small datasets and would not be used frequently so keeping all of your code in Linq to SQL keeps it clean and consistent. In this case I have found the sample code below does the trick.
MyAppDataContext db = new MyAppDataContext();
var deleteRelatedRecords =
from relatedRecords in db.RelatedRecords
where relatedRecords.MyForeignKeyID == MyPrimaryKeyID
select relatedRecords;
foreach (var relatedRecords in deleteRelatedRecords)
{
db.RelatedRecords.DeleteOnSubmit(RelatedRecords);
}
db.SubmitChanges();
This code works well if all you need to do is clean up/delete a small group of records, it first gets the group of records, then loops through the dataset flagging each one to be deleted. Once completed the changes are submitted committing the deletes.
Additional information and samples in other languages can be found here http://msdn.microsoft.com/en-us/library/bb386925.aspx
Congratulations! kmsystems client, IAG winners of the Australian Business Awards – 2009 for the category of innovation based on an application we built for them. We are very proud to have been able to be apart of their innovation project, such a great learning experience for us to apply our web 2.0 social media knowledge on. The end result an award winning application that has already produced significant dollar savings, savings on stationary paper such as manual forms and process steps, it doesn't get better than that.
As I mentioned in my previous post ASP.NET MVC Membership Management I decided to port over a simple team management app we built called "Whos Doin Wot" from the Morfik RIA platform to ASP.NET MVC. I found the exercise to be a nice little training exercise and the chance to understand and play around with MVC. Also as a side benefit I have created some basic controllers and views for handling users and roles within ASP.NET membership (download available on the previous post detailed above).
I've spent a couple of days on it now and have a preview of the new MVC version up and running click here to have a go.
Here are a few screen shots as well:
Dashboard: is a clean and simple list of what the team are up to today, tomorrow, for the rest of the week and month.
Groups: here you have the ability to set up different groups which you can then add people/users to.
Add people: You have the ability to set up access for other team/group members so that they can access and contribute to specific groups
Create a new entry: Here you can quickly add in entries to let the team know what you are up to for today, tomorrow, the week and month (if you like to plan ahead).
Here at kmsystems we have really been diving into ASP.NET MVC with everyone in the team doing loads of learning, setting up some new projects using MVC and converting over some old ones. Not to be left out of all the MVC fun :) I've decided to dive in and port over a simple team management app we built called "Whos Doin Wot" from the Morfik 2.0 RIA Tool which I put together a while ago now.
The new release of Whos Doin Wot isn't quite ready for use yet however I want to share some of the work I have done setting up user and role management. I'm a big fan of buy borrow, beg, steal before you build or role your own (just can't see the benefit of re-inventing the wheel if a great wheel already exists) so I started my search and found the following:
ASP.Net MVC Membership Starter Kit which is a really promising membership management tool and would have been exactly what I was looking for, unfortunately the current release does not work on MVC Release 1.0
ASP.NET MVC Membership Management Roni Schuetz which also looks great but costs 30 euros (around $50 Australian dollars) and given that it was just a blog post with no comments I wasn't too sure if I was just kissing my $50 goodbye (maybe I'll give it a go later).
As the options to buy, beg, borrow or steal were not that appealing and with the goal of learning more about MVC I decided to (god forbid) roll my own membership management. Anyway it wasn't going into a full blown management tool I wanted to keep it simple and light to just cover off the very basics.
If you are interested I have uploaded the source code for you to download modify and use in your own projects. This code is jsut a very basic base to start from and extend to meet your requirements. It would be great if you could share any improvements back here with us.
The code covers:
- List all users
- Add a new user
- Edit a user
- Delete a user
- View the roles associated to a user
- Remove a role from a user
- Add a role to a user
- List all roles
- Create a role
- Lists users in a role
- Delete a role
The code I created is based on using ASP.NET Membership in a SQL server database by default MVC points to a SQL Express database named "ASPNETDB.MDF"; under the application's "App_Data" directory. If you would like to use a different SQL server or dataabase update the "ApplicationServices"; connection string within the web.config file. You can run the "aspnet_regsql.exe" utility within the \Windows\Microsoft.NET\Framework\v2.0.50727\ directory to add membership and the other ASP.NET application services to any database.
Recently we completed a project to build a KPI dashboard for a large Australian organisation to show certain performance measures for each business unit. The challenge was that the client wanted a very specific kind of chart, basically a waterfall chart which displays the end target/goal as the final column. Using the Dundas charts control this task would not be that difficult as we could have used a chart similar to this and made a few tweaks.
However due to the clients Reporting Services Architecture the costs of Dundas licenses was not feasible so we needed to come up with a way to produce a similar chart using the native Reporting Services chart control.
Here's what we learned:
The final result was a nice clean waterfall chart that shows progress towards an end target
We have been working with one of Australia's largest logistics companies, building various web applications to help improve some of their current business processes. One of the areas we discussed was their environmental impact and reporting requirements under the National Greenhouse and Energy Reporting Act 2007(the NGER Act). In short the Australian Government has passed an Act that requires organisations to report on greenhouse gas emissions, energy consumption and production.
After doing some research into the NGERS guidelines and requirements we have decided to build an application that will:
Currently we are in the process of designing and developing the application. If you and your company need to report under NGERS and would like to talk to us about what could make your life easier in this area. Or if you would be interested in using this tool to make NGERS reporting easier then please contact us
I will add another post soon when we have a beta version ready for people to try out.
Creating DropDownLists using WebForms is easy enough, for those who are venturing into the the world of MVC this may not be as straight forward.
I’ll be using the classic scenario of Cars and their related makes and models.
CarController.cs
public class CarFormViewModel
{
MakeModelRepository makeModelRepository =
new MakeModelRepository();
private string _carMake = "";
public Car Car { get; private set; }
public SelectList CarMakes { get; private set; }
public SelectList CarModels { get; private set; }
public string CarMake
{
get { return _carMake; }
set { _carMake = value; }
}
// Constructor
public CarFormViewModel(Car car)
{
Car = car;
CarMakes = new SelectList(makeModelRepository.
GetCarMakes(), "Value", "Text");
if (car.CarMakeModelId > 0)
CarMake = car.CarMakeModel.CarMake;
CarModels = new SelectList(makeModelRepository.
GetCarModels(CarMake), "Value", "Text", Car.CarMakeModelId);
}
}
Something to be aware of is the use of valueSelected when defining your SelectList, make sure your view items e.g. DropDownList names match your database field names. I found the selected value was not being set correctly when editing a records.
CarForm.aspx
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl
<Vehicles.Controllers.CarFormViewModel>" %>
<script type="text/javascript">
$(function() {
$("#CarMake").change(function() {
var carMake = $("#CarMake > option:selected").attr("value");
var urlAction = "<%= Url.Action("FindCarModels", "Car") %>";
$.getJSON(urlAction, { carMake: carMake }, function(data) {
$("#CarMakeModelId").addItems(data);
});
});
});
</script>
<%= Html.ValidationSummary("Edit was unsuccessful. Please correct
the errors and try again.") %>
<% using (Html.BeginForm())
{%>
<fieldset>
<legend>Car</legend>
<p>
<label for="CarMake">
Make:</label>
<%= Html.DropDownList("CarMake", Model.CarMakes) %>
<%= Html.ValidationMessage("CarMake", "*") %>
</p>
<p>
<label for="CarMakeModelId">
Model:</label>
<%= Html.DropDownList("CarMakeModelId", Model.CarModels) %>
<%= Html.ValidationMessage("CarMakeModelId", "*") %>
</p>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
<% } %>
<div>
<%=Html.ActionLink("Back to List", "Index") %>
</div>
Make sure to change the inherits property to reference your new ViewModel. Note the use of the Url.Action helper, this little snippet helps you creates the correct path to your controller action without the use of those dots e.g. …/<controller>/<action>/
jHelper.js
Borrowed from Steve Michelotti.
$.fn.clearSelect = function() {
return this.each(function() {
if (this.tagName == 'SELECT')
this.options.length = 0;
});
}
$.fn.addItems = function(data) {
return this.clearSelect().each(function() {
if (this.tagName == 'SELECT') {
var dropdownList = this;
$.each(data, function(index, optionData) {
var option = new Option(optionData.Text,
optionData.Value);
if ($.browser.msie) {
dropdownList.add(option);
}
else {
dropdownList.add(option, null);
}
});
}
});
}
Little helper that clears and adds items to DropDownLists.
Something I found frustrating is when in debug mode a script reference would work find but when running using IIS the script would not load correctly. What you had to do was use those good old dots to get it loading correctly. My tip is to use the ResovleUrl helper.
<script src="<%= ResolveUrl("~/Scripts/jquery-1.3.1.js") %>"
type="text/javascript"></script>
<script src="<%= ResolveUrl("~/Scripts/jHelper.js") %>"
type="text/javascript"></script>
There are some workarounds I’ve seen that don’t break intellisense but look a bit messy. I figure I’ve lived without it for this long.
Here is the source code, if there is anything that is unclear or you have any questions feel free to email me.
At kmsystems we have build a lot of software and in most cases the time frame and budget we have to work with is tight, very tight. The challenge is to not only to meet tight deadlines and budget constraints but above all deliver something of value. The output or result of what we develop must add value to our clients existing processes and business otherwise there is no point in building the solution in the first place. I'm talking about not just solving a problem but solving it in the best possible way that adds the most possible value. Let's face it problems can be solved in a lot of different ways for example you can implement a manual process good old pen and paper, use Excel, create a simple Access database, the list goes on. We build software and its our job to ensure that the software solution we provide adds the most value over all options.
To achieve this we have found agile development methodologies to be an effective way to keep costs and time overheads low yet deliver something that the client will use and get maximum value from.
As part of our agile development practises we try to follow the "Manifesto for Agile Software Development"
We are uncovering better ways of developing
software by doing it and helping others do it.
Through this work we have come to value:Individuals and interactions over processes and tools
Working software over comprehensive documentation
Customer collaboration over contract negotiation
Responding to change over following a plan
That is, while there is value in the items on
the right, we value the items on the left more.
and we try to up hold these 12 principles which sit behind the manifesto:
It has taken us some time to grow and adopt agile development but I think as a team kmsystems has been able to work fairly closely to these principles and deliver some great software especially on a few recent projects. As a leader I trust my teams to get the job done, however one of the obstacles we face over and over again is engaging the customer in the agile process and keeping them engaged for the length of the project. The agile process does require a higher level of commitment from both parties but the output end result is a far better product. Unfortunately this is not easy to demonstrate up front. I think that open honest communication about the process will give your client and you a good start that will carry you through to being able to demonstrate the value. Remember deliver fast and review often.
Lately I've been getting more and more into using Linq to SQL and think it rocks, Linq takes care of all the hard back end database functions so that you can focus on the interesting business logic of fun design and styling. I've been doing some research on the basics of Linq and found that most tutorials only show the List/GridView. However there was not many tutorials on working with Forms. So I have put together this basic tutorial to get you started. I have to give a lot of credit to aDefWebserver for this tutorial http://www.adefwebserver.com/DotNetNukeHELP/LinqTutorial2/LinqTutorial2_3.htm which although it specific to DotNetNuke a lot of the concepts can be learned here.
I have created a very basic database called "Contacts" with a table called "MyContacts", here is a screenshot of this table.
I prefer to set up a new database user now for this specific application so that when it comes to deploying the application your ready to go.
Now I will create a New Web Site in Visual Web Developer 2008 Express Edition called "MyContacts"
In the Database Explorer right button click on the Data Connections root and select Add Connection
Add a new Linq to SQL Classes item called "My_Contacts_DataClass.dbml" under the App_Code folder
Once the My_Contacts_DataClass opens drag the "MyContacts" table onto the data class from the Database Explorer
Add a new web form called "List_MyContacts.aspx" for the list/grid view
Add a LinqDataSource from the Data section in the Toolbox to your new List_Mycontacts page and select Configure Data Source
Select the My_contacts_DataClassDataContext object and click next
Click the "Advanced" button and select which options you want to allow from the list/grid view. In this case I only want to allow Delete
Add a GridView from the Data section in the Toolbox to your new List_Mycontacts page and select the LinqDataSource1 as the Data source. Then check Enable Deleting and Selection so that the user can either delete the record directly from the list or select it to view it in the form view mode.
Select the GridView control and open the properties and click on the lightning bolt to see the events. Double click on the SelectedIndexChanged event and enter the following line of code within this SelectedIndexChanged procedure. This code will open the update page with the selected record in the form view.
protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
Response.Redirect("Update_MyContacts.aspx?ContactId=" + Convert.ToInt32(GridView1.SelectedDataKey.Value) + "");
}
Add a new web form called "Update_MyContacts.aspx" for the form view
Add a LinqDataSource from the Data section in the Toolbox to your new Update_Mycontacts page and select Configure Data Source
Select the My_contacts_DataClassDataContext object and click next
Click the "Advanced" button and select which options you want to allow from the list/grid view. Here I want to allow Insert, Update and Delete
Also click on the Where button and select the Contact_Id is equal to the a parameter passed via the query string so that when a user selects an item on the list/grid view page the update form will know which item the user wants to edit. Add the where clause
Add a FormView from the Data section in the Toolbox to your new Update_Mycontacts page and select the LinqDataSource1 as the Data source.
That's it now you can open your browser and browse the application. Here is the first page the list/grid view
When you click on the Select link in the grid view the page redirects to the Update page to display the form view in read only mode
Now when the user clicks on the Edit link the form will automatically switch into update mode so they can update the data and save it
Now that all of the data access functionality has been automatically created by Linq all you need to focus on is design and logic.
After using TextMate to do some Ruby on Rails development I got used to and enjoyed working on a darker themed editor, I've probably come late to the party but you can achieve the effect in Visual Studio by changing your settings.
Enjoy coding more at the same time saving the planet (only if you choose a dark background), I chose Rob Conery's TextMate theme.
Scott Hanselman has compiled a good collection of themes check it out.
Well not really, after using divs to layout my web pages for some time now I decided to try the 960 CSS Framework. It's a welcome change from doing a load of floats.
I recommend reading Stefan Vervoort's post on divitodesign to get started, there are also some good examples provided in the downloadable zip.
This is purely a layout framework which helps you separate your content into columns of 60px, I know of other CSS frameworks that do a lot more.
What CSS frameworks do you know of and/or use?
Merry Christmas and Happy Holidays to all of our valued customers and friends.
Thank you for all your support during 2008 and here's to an exciting 2009
We will be taking a break from the 20th December 2008 to 12th January 2009
There are so many different ways to mock up prototypes of application screens and web pages. From the good old favourite pencil and paper then scan it to an image all the way to the hard core designers favourite illustrator.
I'd probably have to say that just HTML in either Expressions or Visual Studio would be the main one for me as it's agile, quick, easy to change and is already a start into the development process.
However if you don't know HTML and probably don't want to there are still a stack of options for you. These include basic Microsoft PowerPoint, which surprisingly isn't that bad and has a lot of effects you can apply to fields and button to a very cool FireFox application called "Pencil". If you are looking for a cheap quick and easy way to prototype an application interface I'd say Pencil is definitely worth a try.
If you use Pencil I'd love to hear some feedback or if you have a better alternative let me know
I decide to switch over from Wordpress and give Squarespace.com ago to run our blog and website. Mainly for the simple reason that we were using Wordpress.com to run our blog and running our own separate company website. So I wanted to merge the web site and blog together and Wordpress.com didn't allow many design change options.
So now we are pretty much set up here on Squarespace for now using their 14 day trial account. So far the experience has been very good. I've spent around 2 hours including importing all of our blog posts from Workpress.com and incorporating the content from our website. Design and layout has been very simple you can add and configure pages, a blog and forms all by clicking add and setting a few properties.
One thing that springs to mind is that on going maintenance and refreshing the design to jsut a new colour or layout would only take a few minutes.
So far I'm loving the squarespaces environment, we'll see how it goes over 14 days to see if I upgrade to a paid account but so far it looks pretty promising.
At kmsystems we try to do as much defensive programming as possible when writing code. One of the most common is the use of "ElseIf" instead of just using "Else" in a If Then statement. Reason being is that it is a lot more specific and helps you really think about the scenarios you will be catching here.
Another one that should be just as common especially in ASP.NET is checking to see if an item already exists in a drop down list before selecting it. The problem here is if a item is programatically selected in a drop down list which doesn't exit the page will crash. This can occur when the user edits an existing record and the code attempts to bind the existing data to the form however the drop down list items may have changed and the item previously record here has changed or been removed.
Dim StrNot_In_List As Integer
StrNot_In_List = ddl_Control.Items.IndexOf(ddl_Control.Items.FindByValue(dr("db_Field"))
If StrNot_In_List = -1 Then
ddl_Control.Items.Add(New ListItem("db_Field", "db_Field"))
End If
ddl_Control.SelectedIndex = ddl_Control.Items.IndexOf(ddl_Control.Items.FindByValue("db_Field"))
Hate the yellow header and necessary links when viewing reports directly from the server? Hate is such a strong word maybe dislike.
One option(amongst others) is to create a customised report that runs on your web server, sounds like work to me. Another option is to change the reporting services config file to hide.collapse it, not an option if you share the server since this will affect all users.
Why don't we just run the rdl (report definition file) file from the server through report viewer. Good news, you can!
Did I mention the report runs faster, lets begin.
Report Viewer Configuration
Make sure the processing more is set to "Remote", use the markup below as a guide for the rest.
<ServerReport ReportServerUrl="http://<report server name/ip>/ReportServer" ReportPath="/<folder path>" DisplayName="Returns"></ServerReport>
</rsweb:reportviewer>
Things to Note
Pure Harmony
KMSystems core business operates primarily in the Business to Employee (B2E) space where we apply a highly effective & harmonious blend of programming, web design and Continuous Improvement disciplines.
Simplify, automate, consolidate, integrate
We are highly skilled and experienced at partnering with the business to identify manual or poorly managed 'cottage industry' processes like, ad-hoc spreadsheets, databases, paper-based and antiquated data capture mechanisms and streamlining them through centralised, integrated web applications that are robust, flexible and scalable.
Long tail, short spend
Long Tail B2E software: Solutions that don’t often get big I.T. spend allocations, but that are critical to efficient and effective operation of individual departments or business units. Whether it be a tool to track marketing campaigns or a facility that enables more effective collaboration between the sales force and product development department, KMSystems can provide cost-effective solutions to accommodate those discretionary spend budgets.
Below is a diagram that illustrates the Long Tail of software development as it occurs in most businesses; we refer to those areas as ‘Hack’ and ‘Unserved’ and they represent our key areas of focus.
Runs on the board...
...we’ve got plenty of those. We have designed and built over 100 successful corporate web applications including:
· Employee and Customer facing Innovation Management Systems
· Project Status reporting tools (activity calendars)
· Contact Centre call tracking & reporting tools
· Human Resources reporting and capability mapping
· Sales performance tracking and reporting
· Supplier management
· Learning & Development tools
· ...etc. Click here to see some examples of some of our recent projects.
Back in Part 1 Twitter for the Enterprise (Part 1: The Begining) after being satisfied with the apps functionality, it was makeover time.
I thought it would interesting to take you through my thoughts and what I think is important when giving the app a much needed face lift/redesign.
Layout
The first thing I like to do is a rough sketch of the layout including elements such as header, contents and footer. This allows me to play around with proportions, I decided to have a horizontal header spanning the entire page that was quite thin allowing the content section to stand out more.
Colours
A good place to start when looking for inspiration is COLOURlovers, just create an account and your away. It's amazing how easy it is to create a set of colours that work well together, the website allows you to save and share your palettes with other uses. On this occasion I decided on some very similar colours with a bright or contrasting colour to suit.
DIV Not TABLE
Back in the day when I built my first web page it was easy to just chuck everything in table rows and columns spanning, merging, mashing you name it.
As a rule tables are good for represent data and that's all they should be used for. The use of div is a more flexible/cleaner approach, I often find myself compelled to clean up a layout done with tables. I've been using div's for a while now and haven't looked back.
Visual Hierarchy
Decide what you want the users' attention to be drawn to, in our case we wanted the users to see the the text box before anything else hence the reason why it's so large and bright. Even colours can serve to create this sense of hierarchy one way to archive this is to place a brightly coloured element on a darker background this gives a sense of the brighter element being on top or at the front. Use of different font sizes can also serve to further emphasize this.
Check out the new look, we haven't decided on the name yet.
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)