Question

I followed the HelloWorld module tutorial on Orchard’s website, but I didn’t really see any tutorials that spoke about creating interactive modules. Basically, I just wanted to create a module that contains a TextBox and a Button and when you click the button, it label will display either FizzBuzz, Fizz, or Buzz depending on if the number you entered into the textbox is divisible by 15,3, or 5 respectively, but I am unclear on how to do this. Can someone point me in the right direction. Thanks

Answer 1

It is doable and I’ll try to help you out:)

Orchard development is built around modules. Modules provide creatable content elements (pages, blogs, blog posts, widgets etc.) in the form of “content items” which contain a number of different “content parts” – the basic Orchard content building blocks.

If you want to utilize Orchard content rendering framework (eg. want to put your FizzBuzz form in a reusable widget) – you should create a content part first and add the appropriate ajax form to it.
How to do it is described very well in Orchard docs – here and here. I’ll encourage you to grab the Orchard Jumpstart module as it contains sample content parts (with documentation) for quick development. I also wrote an article about the basic concepts behind content part creation.

The next step would be to place the FizzBuzz logic somewhere. Where? In the controller, as for any other ordinary ASP.NET MVC app, because Orchard modules are basically a tweaked, separated ASP.NET MVC applications (Areas) glued together by the Orchard Framework. So create the controller in /Controllers folder in your module, add the appropriate action, which will return FizzBuzz/Fizz/Buzz depending on the number posted.

As a last step you have to point the ajax form to post to your controller action and retrieve the results.

Summarizing:

1. Create a FizzBuzz content part and widget which will contain your FizzBuzz content part.
2. Create a controller and appropriate action taking number and returning a string content.
3. Tell the ajax form in your part’s .cshtml Razor view file to post to your controller action (Ajax.BeginForm) and put the returned data in some existing <div>

HTH!