36

I want to change the background of the textbox. This is my code:

@Html.TextBoxFor(p => p.Publishers[0].pub_name)

What more do I need to write in TextBoxFor to change the background?

halfer
  • 19,824
  • 17
  • 99
  • 186
TCM
  • 16,780
  • 43
  • 156
  • 254

3 Answers3

61

An overload of the TextBoxFor method allows you to pass an object for the HTML attributes.

@Html.TextBoxFor(p => p.Publishers[0].pub_name, new { Class="YourBackgroundClass" })

Then you can have a CSS rule such as:

.YourBackgroundClass { background:#cccccc; }

If you want to apply a style directly you can do:

@Html.TextBoxFor(p => p.Publishers[0].pub_name, new { Style="background:#cccccc;" })
medkg15
  • 1,565
  • 15
  • 13
  • Thanks and what if I do not want to use class. Instead directly specify some attribute? I tried and this doesn't work: ` @Html.TextBoxFor(p => p.Publishers[0].pub_name, new { foreground = "red" })` – TCM Jul 31 '11 at 02:03
  • Also using your example doesn't work. I get error because class is reserved word. – TCM Jul 31 '11 at 02:06
  • 3
    @Anthony: I fixed the sample, it should've been `@class` because indeed `class` is a reserved keyword. – Dan Abramov Jul 31 '11 at 02:12
  • 2
    The "foreground" property will not work as it is not an HTML attribute, you have to disconnect your mind from the "webforms" way of thinking, these attributes are pure HTML. If you didn't want to use a class you could use an inline style using the "Style" attribute. – rkaregaran Jul 31 '11 at 02:12
  • Also, you *should* use CSS classes to specify styling. But if you have **reasons** to do it inline (I highly doubt so), use `style` attribute: `new { style = "color: red" }`.. – Dan Abramov Jul 31 '11 at 02:13
  • Sorry, fixed the issue with class - if you uppercase it then it will not be reserved. Also added an example that writes the Style directly. If you open up the resulting page's source you'll notice that now has a class (or style) attribute. In your example, foreground is not a valid HTML attribute, so you'd have to specify the style you're looking for inside the Style attribute. – medkg15 Jul 31 '11 at 02:14
  • @rkaregaran: Thanks I have now disconnected my mind from webforms and kept it aside. Your solution worked perfectly! – TCM Jul 31 '11 at 02:16
  • I wanted to add an inline style and `new { Style="" })` works. But so does `new { @Style="" })`. Is the @Style syntax wrong? – Tom Oct 26 '17 at 13:26
  • The proper syntax is: @Html.TextBoxFor(p => p.Publishers[0].pub_name, new { @style="background:#cccccc;" }) – PhillipPDX Sep 13 '18 at 13:08
12

In my case I did like below. I have ASP.NET MVC application and we are using Bootstrap. I gave float:left to all my div elements. Just wanted to show how you can use @style along with @class for @Html.TextBoxFor

<div class="modal-body" style="height:auto; overflow-y:auto;max-height:500px;">
  <table style="width:100%" cellpadding="10">
     <tr>
       <td>
         <div style="display: inline; ">
            <label style=" float:left; margin-right:20px;">Login Name: </label>
            @Html.TextBoxFor(m => Model.UserPrincipalName, new { @id = "LoginName", @class = "form-control", @style = "float:left;margin-right:10px;margin-top:-5px;" })
            <a href="#" onclick="SearchActiveDirectoryByLoginName()" title="Search Active Directory" class="btn btn-primary" style="float: left; margin-top: -5px;">
                  @Html.Raw(" Search ")
             </a>
         </div>
       </td>
      </tr>
  </table>
</div>

enter image description here

Ziggler
  • 3,361
  • 3
  • 43
  • 61
1

Now you can add html attributes like this:

 @Html.EditorFor(p => p.Publishers[0].pub_name, new { htmlAttributes = new { @class = 
 "YourBackgroundClass" } })
N Iranshahi
  • 21
  • 2