SuperSKa Weblog : ASP.NET MVC

Using FCK Editor with ASP.NET MVC

Stefan Kamphuis — Mon, 06 Apr 2009 11:22:00 GMT

First of, what is this FCKEditor? Well, it's an HTML Text Editor. It's free and open source, cross browser, extensible and there are probably quite a few more buzzwords applicable. Oh... and it's also the default HTML Text Editor provided with DotNetNuke. Fck Editor is soon to be replaced by CK Editor but I'll stick with Fck for now. CK will work mostly the same though.

First, you'll need to download Fck Editor. Unzip the downloaded file to see what's in there.

You'll need to copy the "editor" folder over to you Contents folder in you ASP.NET MVC website. I chose the path "/Content/Js/ Fck" to paste it in.

Two other files you might want to copy over to this same folder are in the root of the downoaded zipfile: fckeditor.js and fckconfig.js. The latter is expected by the editor and (suprisingly) contains configuration settings for the editor, while the first contains a few nice javascript functions to instanciate the editor.

Next, include the fckeditor.js file in your page:

<script src="<%= Url.Content("~/Content/Js/fck/fckeditor.js") %>" type="text/javascript" ></script>

All set. Now you'll need to add a textarea to your page:

<%= Html.TextArea("FckEditor1", "Some Value", 
  new { @name="FckEditor1" })%>

Important thing here, is the name property of the TextArea being set to the same value as the Id of it.

To finish the client side of things off, you'l need to add some javascript to turn the textarea into a FckEditor at runtime. This can be copied from the samples of course, except for the Url.Contents part:

<script type="text/javascript">
window.onload = function()
{
  var sBasePath = '<%= Url.Content("~/Content/Js/Fck/") %>';

  var oFCKeditor = new FCKeditor( 'FckEditor1' ) ;
  oFCKeditor.BasePath = sBasePath ;
  oFCKeditor.ReplaceTextarea() ;
}
</script>

Now, to prevent the server error "A potentially dangerous Request.Form value was detected from the client ", you should add the attribute "ValidateInput" to your controller's action method like this":

[ValidateInput(false)]
public ActionResult Save(int id)
{
    ...
}

With this, you're all set. The contents of the TextArea field you started out with, will contain the contents of the FckEditor control.

Have fun!

ASP.NET MVC: MultiSelectListBox without selection

Stefan Kamphuis — Mon, 16 Mar 2009 07:31:00 GMT

Alright, now that was one hell of a mystery. For some odd reason my MultiSelectListBox didn't show the selected items like it should.

The case was very simple, and easily reproducible too. Start of in VS2008 with a new MVC Web Application, open up the HomeController class and change it's code to this (only italic code was added):

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewData["Message"] = "Welcome to ASP.NET MVC!";

            var dic = new Dictionary<string, string>();
            dic.Add("1", "First thing");
            dic.Add("2", "Second thing");
            dic.Add("3", "Third thing");

            var sel = new ArrayList();
            sel.Add("2");

            ViewData["multiselect"] = new MultiSelectList( dic, "Key", "Value", sel);

            return View();
        }

        public ActionResult About()
        {
            return View();
        }
    }

As you can see, this adds a MultiSelectList to the ViewData object. It conatins a dictionary with 3 items. In addition an ArrayList with 1 string is passed, to represent the selected items. Now, open up Home\Index.aspx and add the following code somewhere in the HTML-Body:

<%= Html.ListBox("multiselect", ViewData["multiselect"] as MultiSelectList)%>

When running the application I expect the homepage to show up with the second item in the select list selected, but in stead it showsno selection at all:

It took quite some puzzling, but it the problem turned out to be caused by the element in ViewData having the same name as the Id for the control. If you change the line in Home\Index.aspx as follows:

<%= Html.ListBox("someMultiselect", ViewData["multiselect"] as MultiSelectList)%>

The selection will finally show:

Pfff, glad I nailed that one...

ASP.NET: Leaping from Webforms to MVC - part 2

Stefan Kamphuis — Mon, 09 Mar 2009 08:56:43 GMT

Alright, some time has passed since my previous post on this matter. And I must say, I'm not getting more enthusiastic on ASP.NET MVC. Not that it's not good or anything, it just solves some problems I wasn't experiencing (more on that here). The main issue I'm running into is that my pages are somewhat dynamic. That means, based on several conditions, the form displays in one of several ways (for example: based on a property of an object a field displays as either a label or a textbox).

At this point I'm typing a whole lot of crappy code in my HTML within <% %> tags. It just feels soooo retro...

ASP.NET: Leaping from Webforms to MVC

Stefan Kamphuis — Mon, 02 Mar 2009 15:06:57 GMT

Ever since late 2007 (I think ) I've been reading quite a bit on the ASP.NET MVC framework. Even did some playing around here and there but never got to use it on a project. Until last week that is. I'm now working on a website that's built entirely on the ASP.NET MVC framework. And of course, working on a project things are just a tad different from playing around a bit.

So, what is it that makes working with the MVC Framework so much different from Webforms? Well, let's just put a small list here of some of the things I ran into. Needless to say that this is not a complete list, nor is it intended to be...

Where are the servercontrols?

Well, errrr, they're gone. You don't have them. You're writing good old HTML again yourself. Of course, the advantage here is that you gain a lot of control over the HTML of your website. But, of course, no Servercontrols means "no events". You even need to pull a trick to make a DropDownList autopostback (more on that here)...

Only one <Form> in a page?

Alright, an advantage of the MVC Framework. Every now and then I tend to run into this situation where I need some part of a page to submit to a different URL. In ASP.NET you need to use javascript to change the Action of the Form before it's submitted. Or at least, that's one approach of numerous you could choose from...

In ASP.NET MVC you can easily have different forms on a single page. Love that part.

More to come

... as I experience. I decided to post and update this one along the way.

Autopostback DropDownList with ASP.NET MVC

Stefan Kamphuis — Mon, 02 Mar 2009 01:44:00 GMT

Didn't you love the days back when you could just open up the properties tab for your DropDownList in ASP.NET and set the AutoPostBack Property to True? You could even write code in your codebehind class to handle the event properly. Cool, right?

But these are the days of the ASP.NET MVC framework, so everything's different now. Well, of course I'm being a bit sarcastic here and there are a lot of advantages too to the MVC Framework, but still it requires more work to achieve things-that-used-to-be-simple.

Anyway, back to the AutoPostBack of the DropDownList. First, of course, you need to have a DropDownList on your page:

<select id='dropDown' name='dropDown'>
  <option value="1" selected="selected">Option 1</option>
  <option value="2">Option 2</option>
</select>

Note that this control needs to be within your Form otherwise it's values will not be submitted of course...

When you have the control, you'll need to make it submit the Form it's in. I chose to do so with jQuery, but you could do it with plain javascript too:

<script type='text/javascript'\>

  $('#dropDown').change(function () {
    $(this).parents('form').submit();
  });

</script>

For those of you not fully up to speed with jQuery: this code finds the element named "dropDown" and adds a handler to the onChange event of it. The handler first finds the parent of the DropDownList with elementname "form", and submits it.

You could also change the action of the form here in the handler if that might be needed, for example to fire a specific controller action for the postback of the DropDownList.