Question

I created a MVC-3 application (Once we create it we are given a login screen which is already developed). And it has used HTML components found in the toolbox to create text boxes, labels etc. But i want to use standard components found in the toolbox. How can i replace these HTML components with the standard components.

When the user clicks on the Login button, the username and password gets authenticated in the default sample application provided for us. I don’t want to change its functionality but what i want is only to change the form components to the Standard components found in the toolbox.

How can i do this ?

<% using (Html.BeginForm()) { %>
    <%: Html.ValidationSummary(true, "Login was unsuccessful. Please correct the errors and try again.") %>
    <div>
        <fieldset>
            <legend>Account Information</legend>

            <div class="editor-label">
                <%: Html.LabelFor(m => m.UserName) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(m => m.UserName) %>
                <%: Html.ValidationMessageFor(m => m.UserName) %>
            </div>

            <div class="editor-label">
                <%: Html.LabelFor(m => m.Password) %>
            </div>
            <div class="editor-field">
                <%: Html.PasswordFor(m => m.Password) %>
                <%: Html.ValidationMessageFor(m => m.Password) %>
            </div>

            <div class="editor-label">
                <%: Html.CheckBoxFor(m => m.RememberMe) %>
                <%: Html.LabelFor(m => m.RememberMe) %>
            </div>

            <p>
                <input type="submit" value="Log On" />
            </p>
        </fieldset>
    </div>
<% } %>

Answer 1

Are you talking about these:

<%: Html.TextBoxFor(m => m.UserName) %>
<%: Html.ValidationMessageFor(m => m.UserName) %>

These are called Html helpers. They are used in asp.net mvc to generate html that will play nice with the mvc model binder. If you want to replace them with plain html, you can always view source, see what the rendered html is and paste it in its place, though I don’t personally see the point. Nothing good could come of this.

But this is what the two lines above render:

<input data-val="true" data-val-required="The User name field is required." id="UserName" name="UserName" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span>