Model is NULL in Ajax POST to controller action - asp.net-mvc

Question

I have a simple model and view. THough, the modelbinder seems to fail when trying to bind my model because I always receive NULL into my controller action. What am I doing wrong?
Razor code:
#model BikeSharing.Views.Shared.Widgets.Popups.LoginInputModel
#using (Ajax.BeginForm("Login",null, new AjaxOptions
{
UpdateTargetId = "login-partial-update",
HttpMethod = "POST"
}, new { id = "js-form-login" }))
{
#Html.TextBoxFor(x => x.Email, new {placeholder = "Email address"})
<div class="errormessage">
#Html.ValidationMessageFor(x=>x.Email)
</div>
#Html.PasswordFor(x => x.Password, new {placeholder = "Password"})
<div class="errormessage">
#Html.ValidationMessageFor(x => x.Password)
</div>
}
Controller Action:
[HttpPost]
public ActionResult Login(LoginInputModel lmod)
{
if (ModelState.IsValid)
{
// this code is never reached because lmod is always NULL
}
return PartialView("Widgets/Popups/_LoginInput", lmod);
}
Model code:
public class LoginInputModel
{
[Required(ErrorMessage = "Your email address is required.")]
[EmailAddress]
public string Email { get; private set; }
[Required(ErrorMessage = "Please provide your password.")]
[MinLength(6,ErrorMessage = "Your password is too short.")]
[MaxLength(50, ErrorMessage = "Your password is too long.")]
public string Password { get; private set; }
public LoginInputModel()
{
}
public LoginInputModel(string email, string password)
{
Email = email;
Password = password;
}
}
The form submit is done via jquery-unobtrusive-ajax and Ajax.BeginForm()
I am only firing it via $('#js-form-login').submit();
Rendered HTML in browser:
<form action="/Home/Login" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#login-partial-update" id="js-form-login" method="post" novalidate="novalidate">
<input data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="Your email address is required." id="Email" name="Email" placeholder="Email address" type="text" value="">
<div class="errormessage">
<span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
</div>
<input data-val="true" data-val-maxlength="Your password is too long." data-val-maxlength-max="50" data-val-minlength="Your password is too short." data-val-minlength-min="6" data-val-required="Please provide your password." id="Password" name="Password" placeholder="Password" type="password">
<div class="errormessage">
<span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
</div>
</form>

Answer 1

Try adding the FormBody prefix to hint to the ModelBinder to look in the POST body.
[HttpPost]
public ActionResult Login([FromBody]LoginInputModel lmod)
{
if (ModelState.IsValid)
{
// this code is never reached because lmod is always NULL
}
return PartialView("Widgets/Popups/_LoginInput", lmod);
}