ModelState is false with EditorTemplate

Question

This is my Model

public class LoginModel
{
    [UIHint("string")]
    [Required]
    [Display(Name = "User name")]
    public string UserName { get; set; }

    [Required]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [Display(Name = "Remember me?")]
    public bool RememberMe { get; set; }
}

Login view

@using (Html.BeginForm())
{
    @Html.EditorFor(m => m.UserName, new {id = "login-username", name="User name", placeholder = "Username" })

    @Html.PasswordFor(m => m.Password, new { id = "login-password", type = "password", Class = "form-control", placeholder = "Password" })

    <input type="submit" id="btn-login" class="btn btn-success pull-right" value="Sign In" />
}

EditorTemplate for string

string.cshtml

@model string
@{

string id = ViewBag.id;
string placeholder = ViewBag.placeholder;
string name = ViewBag.name;
<input value='@Model' id="@id" type="text" name="@name" class="form-control smheight" placeholder='@placeholder'> 
}

Controller

[HttpPost]
public ActionResult Login(LoginModel user)
{
    if (ModelState.IsValid)
    {
        if (user.Isvalid(user.UserName, user.Password))
        {
            FormsAuthentication.SetAuthCookie(user.UserName, user.RememberMe);
            return RedirectToAction("Index", "Home");
        }
        else
        {
            ModelState.AddModelError("", "Username and Password mismatch");
        }
    }
    else
    {
        ModelState.AddModelError("", "Username and Password mismatch");
    }
    return View(user);
}

Issues: 1) ModelState in the above controller action is false with EditorTemplate. Otehrwise working fine. 2) HTML view (without EditorTemplate for string) of the @Html.EditorFor(m=> m.Username) shows like

<input id="login-username" class="form-control" type="username" name="UserName" data-val-required="The Username field is required." data-val="true">

and with EditorTemplate(below) HTML is not showing the data- attributes

<input id="login-username" class="form-control" type="username" name="UserName">

How can I solve this issue?

Any help would be appreciated.

Thank You

Answer 1

Instead of using an EditorFor try using a TextBoxFor with the class attribute.

i.e @Html.TextBoxFor(x => x.property, new { @class = "your-class" })

@using (Html.BeginForm())
{
     @Html.TextBoxFor(m => m.UserName, new {id = "login-username", name="User name", placeholder = "Username" })

     @Html.PasswordFor(m => m.Password, new { id = "login-password", placeholder = "Password", @class = "form-control" })

     <input type="submit" id="btn-login" class="btn btn-success pull-right" value="Sign In" />
}

Your attempt to use the 'class-attribute' did not work because you forgot the @-character infront. Razor thinks it's about a 'C# class' unless you escape it with an @. So next time use @class = "your-class" in stead of class = "your-class". Also you can leave the type = "password" in the PasswordFor.