how to add classes to code snippet elements - Using Umbraco 7

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Steve 140 posts 321 karma points

Nov 28, 2015 @ 02:00

0

How to add classes to code snippet elements?

Using Umbraco 7

Umbraco 7

Hi Guys,
I've used the partial view code snippet for a login but would like to add classes to the form and the input elements (Bootstrap site, so for example would like to add .form-control class to the inputs) but can't find where to do this.
In the macro the razor code is: @Html.TextBoxFor(m => loginModel.Username) and can't find anything for login model or login controller anywhere.
Thanks for any help!
cheers
Steve

Copy Link

gary 385 posts 916 karma points

Nov 28, 2015 @ 10:28

Hi Steve

Here is a snippet from my code on bootstrap form.

Without the rest of your code can't say exactly how to to it, but you need the following-

    <div class="form-group">
            <div class="input-group">
                <input type="text" class="form-control" name="@Model.Name" id="@Model.Name" validation="@Model.Name" placeholder="Enter Name" required>
            </div><!--input-group-->
</div><!--form-group-->

Hope you can see what you need from there.

Regards

Gary

Copy Link

Steve 140 posts 321 karma points

Nov 30, 2015 @ 14:44

Hi Gary,
Thanks but in this case I'm using the code generated when you create a Partial View in the back office and select 'Use a Code Snippet'. One of the options is 'Login' and the main block of code rendered is:

@using (Html.BeginUmbracoForm<UmbLoginController>("HandleLogin"))
{
    <fieldset>
        <legend>Login</legend>

    @Html.ValidationSummary("loginModel", true)

    @Html.LabelFor(m => loginModel.Username)
    @Html.TextBoxFor(m => loginModel.Username)
    @Html.ValidationMessageFor(m => loginModel.Username)
    <br />

    @Html.LabelFor(m => loginModel.Password)
    @Html.PasswordFor(m => loginModel.Password)
    @Html.ValidationMessageFor(m => loginModel.Password)
    <br />

    <button>Login</button>
</fieldset>}

I'd like to add the bootstrap classes to the form and input elements but can't find where to do that.
Thanks, Steve

Copy Link

gary 385 posts 916 karma points

Nov 30, 2015 @ 14:58

0

Hi Steve

That file can be found at Umbraco/PartialViewMacros/Templates/Login.cshtml.

You can edit it there or copy it into your own partial.

Cheers

Gary

Copy Link
Steve 140 posts 321 karma points

Nov 30, 2015 @ 15:24

0

Hi Gary,
Yes, no problem finding the file itself but would like to know where to add the class names to the input elements. Eg How do I add 'form-control' class to the username textbox? And where is the form tag generated?
Thanks, Steve

Copy Link
Lewis 27 posts 90 karma points

Nov 30, 2015 @ 17:28
100
Hi Steve

You can pass an anonymous object containing the attributes you want output to the html helper.

In your case you could do:
```
 @Html.TextBoxFor(m => loginModel.Username, new { @class = "form-control" })
```
'class' needs an '@' before it as it is a reserved c# keyword.

Lewis
Copy Link
Steve 140 posts 321 karma points

Dec 01, 2015 @ 18:55

0

Lewis - that's it! Thanks!

Copy Link
gary 385 posts 916 karma points

Nov 30, 2015 @ 15:32

0

Hi Steve

Apologies - got the wrong end of the stick there.

OK, that's all in Bootstrap, all css. (There are a couple of bootstrap form generators on the web, I have used them then just add in your fields)

As long as you have the id, name etc as the fields you require, the form will be completed.

Will say this did confuse me at first, but the @Html.TextBoxFor() only generates css (HTML5) so it can be replaced.

Hope that makes sense

G

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

How to add classes to code snippet elements?