how to set id to Html.TextBox item on MVC

Question

Im trying to catch the textbox element by javascript, in order to put text into it. so how to set id to the textbox ??

        <tr>
                    // Id to this textbox
            <td>@Html.TextBoxFor(item => item.OperationNo)</td>
        </tr>

and then to put text into it by JS

                            // 
   document.getElementById("Textbox id").Text= " Some text " ;

Fixed

Answer 1

You can set ID of a textbox like this.

@Html.TextBoxFor(item => item.OperationNo, new { id = "MyId" })

OR

@Html.TextBoxFor(item => item.OperationNo, htmlAttributes: new { id = "MyId" })

Output:

<input ... id="MyId" name="OperationNo" type="text" />

Haler

This is overriding the default id which will match the name of the property. – Cell

Answer 2

You can use below code for resolve that problem:

function steVal() {
        document.getElementById('txtPlace').value = "Set The Text";
    }

 @Html.TextBoxFor(m => m.OperationNo,new { @id = "txtPlace",@name="txtPlace" })

Seaplane

You don't need the "@" signs in front of the property names in your anonymous class. The only time you need to do it is when the property name happens to be a reserved word, such as "class". – Frizzell

I gave this one a thumbs up because it showed how to do more than one attribute, which is what I was looking for. :o) – Recline

Answer 3

It should be the property name, which is OperationNo.

So your JS will be

document.getElementById("OperationNo").html = " Some text " ;

You can use the web inspector in Chrome or JS to view the html on your page to see the element attributes.

Ensue

Answer 4

This is happens in a scenario of using same input fields with same properties in web form. Like the case of Login and Signup forms in single view/page. Previously it was like this

input one >

<div class="field-wrap">
  @Html.TextBoxFor(model => model.Username, new { @class = "form-control",placeholder = "Username", @required = "required", autofocus = "" })
    @Html.ValidationMessageFor(model => model.Username, "", new { @class = "text-danger" })
</div> 

input two>

<div class="field-wrap">
  @Html.TextBoxFor(model => model.Username, new { @class = "form-control", placeholder = "Username", @required = "required", autofocus = "" })
  @Html.ValidationMessageFor(model => model.Username, "", new { @class = "text-danger" })
</div>

then i added a unique id # for the username input

the new input one >

<div class="field-wrap">
  @Html.TextBoxFor(model => model.Username, new { @class = "form-control", id = "loginUsername", placeholder = "Username", @required = "required", autofocus = "" })
  @Html.ValidationMessageFor(model => model.Username, "", new { @class = "text-danger" })
</div>

the new input two >

<div class="field-wrap">
  @Html.TextBoxFor(model => model.Username, new { @class = "form-control", id = "SignupUsername" , placeholder = "Username", @required = "required", autofocus = "" })
  @Html.ValidationMessageFor(model => model.Username, "", new { @class = "text-danger" })
</div> 

Jaworski