Setup BForms for ASP.NET MVC via NuGet

1. NuGet

Install the BForms.MVC package via NuGet Manager in your MVC project.
This process will include the BForms JS Framework in your Scripts folder and will add references to the BForms and RequireJsNet assemblies.
The JavaScript and CSS components come in two forms, as individual files and as minified bundles.

4. Include JS

The next step is to include the BForms javascript components in your project. There are two ways of working with BForms JS components:
using RequireJS.NET (recommended) or by referencing the javascript files
directly from the ~/Scripts/Bforms/Bundles/js folder.

Using RequireJS

RequireJS comes in handy when you want a release version of your app. Inside the ~/Scripts/Bforms
folder there are 2 configuration files for javascript files: RequireJS.json and RequireJS.Release.json.
To use them both include the following code in your layout:

5. RequireJS configuration

First of all, you need to remember that this step is optional. You only need to do it if you want additional configuration options for your RequireJS installation.

Let's say you want to add a script to your project. Create RequireJS.json and RequireJS.Release.json as in the image bellow:

Configuration files

Note that selected files from the above image are new. The BForms package comes with its own configuration, which you can find under Scripts/BForms.

Now that we have our files, let's add references to our scripts. To show you how to do this we have created a script
called main-script.js under Scripts/Controllers/Common, which contains only a console.log statement.

Main-script file

console.log("Message from main-script.js. Script was loaded because you have referenced it from your custom RequireJS.json/RequireJS.Release.json")

Add the path in your newly created configuration files. For example, RequierJS.config should look like this:

Configuration files content

{
"path": {
"main-script": "controllers//common//main-script"
}
}

As you can see in the code above we have added the path to our scripts (just one in our case) without the .js extension.
We don't need to prefix our path with Scripts/ because RequireJS will automatically search there.

Example

Thumbs up! Now that everything is set up you can start working on your new project. Let's say you want to add a dropdown element
somewhere in your application. Read the following steps and you'll see how easy it is.

Model definition - step 1

You need to create your model. Let's name it Demo.
As we said earlier, we need to add a dropdown property.

If you haven't read the BForms documentation yet, the BsControl annotation helps you define what kind of control you want to render for that property.
You can find a list of values for the BsControlType enum here.

The Display annotation comes with ASP.NET and, in our case, we used the properties Name (the output of the Html.BsLabelFor helper) and Prompt (a placeholder value shown in your dropdown before you select anything).

Another important aspect is the type argument of the generic class BsSelectList<>.
Upon form submission, the type of the SelectedValues property for your DemoDropdown will be int? since DemoDropdown
was declared as BsSelectList<int?>.
Had we defined it as BsSelectList<string>, DemoDropdown.SelectedValues would be of type string.

Data binding - step 2

We have a dropdown but we need to fill it with some data. You can do this from a database, but we will show you how it can be done from an enum.

View - step 4

Writing the view is very simple. We have a form which has a class named js-demoForm (remember this because it is important)
and an Html helper @Html.BsSelectFor (similar to @Html.DropDownListFor) that renders a dropdown.

Don't forget to add @model Demo to your view.

Javascript - step 5

First of all you need to create a folder named Controllers under Scripts.
After that, if you're not working in an area, create a folder called Root under Controllers (that you have created few seconds ago).
Otherwise, replace Root with the area name.

Create a new folder that has the same name as your controller inside the folder you've just created.
Finally you just have to add a javascript file which has to be named like this:.