提交表单后，ASP.net MVC ViewModel属性为null

Question

Before submitting this question I searched a lot and for every question that I read either the situation was not the same or the answer didn't work for me.

As the title says, I have an MVC ViewModel as such:

public class RetrieveTestResultsViewModel
{
    [DisplayName("نام کاربری")]
    [Required(ErrorMessage = "لطفا نام کاربری را وارد کنید")]
    public string UserId { get; set; }

    [DisplayName("شماره تلفن")]
    [Required(ErrorMessage = "لطفا شماره تلفن را وارد کنید")]
    [StringLength(11, ErrorMessage = "شماره تلفن باید 11 رقمی باشد", MinimumLength = 11)]
    [RegularExpression(@"^0[0-9]+$", ErrorMessage = "شماره تلفن صحیح نیست")]
    public string PhoneNumber { get; set; }


}

I made sure that all properties are public and of primitive type (string).

Then inside the CSHTML form :

@using (Html.BeginForm("Retrieve", "Home", FormMethod.Post, new { role = "form", autocomplete = "off", id = "newsletterForm", enctype = "multipart/form-data" }))
            {

                <div class="row">

                    @*username*@
                    <div class="col-sm-5">
                        <div class="form-control-custom">
                            @Html.NoAutoCompleteTextBoxFor(model => model.UserId, "input-lg font-size-sm mr-md formal", "نام کاربری *")
                            @Html.ValidationMessageFor(model => model.UserId, "", new { @class = "text-danger" })
                        </div>
                    </div>


                    @*phone number*@
                    <div class="col-sm-4">
                        <div class="form-control-custom">
                            @Html.NoAutoCompleteTextBoxFor(model => model.PhoneNumber, "input-lg font-size-sm mr-md formal", "شماره تلفن *")
                        </div>
                    </div>


                    <div class="col-sm-3">
                        <button type="button" autocomplete="off"
                                onclick="AjaxForm.CustomSubmit(this, 'newsletterForm')"
                                data-loading-text="در حال ارسال اطلاعات"
                                class="btn btn-primary btn-lg btn-block font-size-sm text-uppercase mt-sm formal">
                            دریافت نتایج
                        </button>
                    </div>
                </div>
            }

Please note that the custom-made NoAutoCompleteTextBoxFor method is well-tested in other projects and it is as bellow:

public static MvcHtmlString NoAutoCompleteTextBoxFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression)
    {
        return html.TextBoxFor(expression, new { @class = "form-control", autocomplete = "off" });
    }

Also at the top of my CSHTML i declared the model:

@model VH.ViewModel.TestResults.RetrieveTestResultsViewModel

Inside my Home controller , there is the Retrieve POST method :

    [HttpPost]
    public ActionResult Retrieve(RetrieveTestResultsViewModel viewModel)
    {
        // viewModel.UserId -> null
        // viewModel.PhoneNumber -> null 
    }

As you see, Inside the Retrieve method, I put a breakpoint and I see that none of my inputs are binded to viewModel!

Any help would be appreciated.

Answer 1

You used the multipart/form-data for the enctype of your form. You can use it when you want to upload some files to your action. But you should decorate your action parameter with [FormData] attribute. This will tell MVC that your model should be made from the form inputs.
You can remove the enctype attribute or use the FormData attribute.

public ActionResult Retrieve(
     [FormData] RetrieveTestResultsViewModel viewModel)
{

}

Happy Coding!

Answer 2

I can't believe it.

I changed the form Id to something else and it worked!

If anybody can guess what was wrong please put an answer.