How to put radio button in nakedObject forms ?

Jun 7, 2012 at 2:02 PM
Edited Jun 7, 2012 at 2:02 PM

Hi, 

I am trying to put RadioButtons in my form which is dynamically made from the NakedObject Business Model classes. (c#.net)

 

eg: I have one field called 

 public virtual string Sex {get;set;}

This is coming as a normal input field in the browser using ASP.Net MVC3. How would I display that as radio buttons.

.e. O Male O Female

Thanks

Jun 7, 2012 at 2:04 PM
As far as I know, that is not possible out of the box.
Will a dropdown box not work for you?

Jun 7, 2012 at 2:06 PM

I know how to use drop down list. And i am using it for other purpose. I would love to have radio buttons. 

 

Jun 7, 2012 at 2:12 PM
Your simplest solution then is probably to do it with jQuery.
You can try something like this:
http://jsfiddle.net/yJTdF/

Then you don't have to add a custom view.
Jun 7, 2012 at 2:14 PM

where to put these codes though ?

Jun 7, 2012 at 2:17 PM
Easiest is to put it in a new js file under the Scripts folder. Eg. CustomUi.js.
Then include that js file in the Site.WithServices.Master or Site.WithServices.cshtml, depending on which view engine you are running with.
Make sense?
Jun 7, 2012 at 2:19 PM

Thank you  very much,

Jun 7, 2012 at 2:21 PM

one more thing, I guess I dont ave to write any html anywhere right ? cause as you know html codes are dynamically generated..all i need to do is make the .js file and include that into the site.....?

Jun 7, 2012 at 2:26 PM
Pleasure.
That is right. You won't have to write any HTML on the server side. You must just find out how to identify the dropdown that you want to change into a radio list with a jQuery selector.
If you use FireFox, you can use the FireBug plugin. Then you can right click on the dropdown, and select "Inspect element in Firebug". There you can figure out what selector to use wit jQuery to get a hold of the dropdown (select) DOM element.
Jun 7, 2012 at 3:10 PM

Tried. It does not work. 

Jun 7, 2012 at 4:05 PM
Can you give more detail of how it breaks?
Errors? Behavior ?

Editor
Jun 7, 2012 at 4:20 PM
I'm interested to see where you go with the jQuery hack, but even so, from a modelling perspective, you might be better off defining this property as an enum, rather than a simple string:

public enum Sex { Male, Female }

public class Person {
public virtual Sex Sex {get;set;}
}

Not sure exactly how that is represented in the UI, but even so it's a better design than using a simple string.

Dan



On 7 June 2012 14:02, nazzkhan21 <notifications@codeplex.com> wrote:

From: nazzkhan21

Hi,

I am trying to put RadioButtons in my form which is dynamically made from the NakedObject Business Model classes. {c#.net)

eg: I have one field called

public virtual string Sex {get;set;}

This is coming as a normal input field in the browser using ASP.Net MVC3. How would I display that as radio buttons.

.e. O Male O Female

Thanks

Read the full discussion online.

To add a post to this discussion, reply to this email (nakedobjects@discussions.codeplex.com)

To start a new discussion for this project, email nakedobjects@discussions.codeplex.com

You are receiving this email because you subscribed to this discussion on CodePlex. You can unsubscribe or change your settings on codePlex.com.

Please note: Images and attachments will be removed from emails. Any posts to this discussion will also be available online at codeplex.com


Coordinator
Jun 7, 2012 at 4:42 PM

Jacques,

thanks for your input - I've just had a little play with this myself. My jquery is a bit (!) rusty but something like this seems to work. 

Create Custom.js in Scripts directory

Add to Master page

<script type="text/javascript" src="<%= Url.Content("~/Scripts/Custom.js") %>"></script>

Then in the Adventureworks demo I wanted to change the dropdown for  a Style property on a Product

 public virtual string Style { get; set; }

 public virtual string[] ChoicesStyle() {
            return new[] { "U", "M", "W" };
 }

So to Custom.js I added the code from Jacques' link wrapped in a ajaxComplete, with a check to do only once - or else you get lots of buttons. 

$("*").ajaxComplete(function () {

    if ($("#Product-Style input").length == 0) {
        $("#Product-Style-Input option").each(function(i, e) {

            $("<input type='radio' name='r' />")
                .attr("value", $(this).val())
                .attr("checked", i == 0)
                .click(function() {
                    $("#Product-Style-Input").val($(this).val());
                })
                .appendTo("#Product-Style .nof-value");

        });
    }
})

This gives you some radio buttons as well as the dropdown - clicking a radio button changes the dropdown.  You probably want to hide the dropdown and add labels to the radio buttons but a bit of googling should sort that.

 

 

 

 



 

Jun 7, 2012 at 5:40 PM
Cool Stef.
Thanx for putting it all together. I think that should help.nazzkhan21.
Jun 8, 2012 at 8:37 AM

Thank you very much. It worked al well. GREAT HELP