ASP.NET MVC 4 Model binding issue

Question

The issue is that, model binding doesn't bind one of the properties of ViewModel.

I have a ViewMode, HomeIndexViewModel. One of the properties, ExcludeClientsWithoutAddress doesn't get bound in controller.

Fiddler shows GET request as such (without ExcludeClientsWithoutAddress)

GET /Home/searchByClient?db=dev&fileNumber=&firstName=xxx&includeContacts=true HTTP/1.1

For some reason, Other properties (FileNumber, FirstName, LastName, IncludeContacts, and File) get bound correctly.

What am I missing here?

namespace CertifiedMail.Web.Mvc4.OneOffs.Models
{
    public class HomeIndexViewModel
    {
        [DisplayName("File #")]
        public string FileNumber { get; set; }

        [DisplayName("First Name")]
        public string FirstName { get; set; }

        [DisplayName("Last Name")]
        public string LastName { get; set; }

        [DisplayName("Include Contact")]
        public bool IncludeContacts { get; set; }

        [DisplayName("Exclude Clients Without Address")]
        public bool ExcludeClientsWithoutAddress { get; set; }

        public HttpPostedFileBase File { get; set; }
    }
}

Within Controller,

[System.Web.Mvc.HttpGet]
public string SearchByClient([FromUri]HomeIndexViewModel model)
{
    IEnumerable<SearchResult> searchResults = new List<SearchResult>();

    SearchByArgs args = BuildSearchByArg(model);

    if (string.IsNullOrWhiteSpace(model.FileNumber))
    {
        if (!string.IsNullOrWhiteSpace(model.FirstName) || !string.IsNullOrWhiteSpace(model.LastName))
            searchResults = ClientSearchDataAccess.SearchByClientName(args);
    }
    else
        searchResults = ClientSearchDataAccess.SearchByClientNumber(args);

    return JsonConverter.SerializeSearchResults(searchResults);
}

Here is the View.

<div class="col-sm-5 searchPanel">
    <div class="panel panel-default glowGridPanel">
        <div class="panel-body searchPanelBody">
            <div class="row">
                @using (Html.BeginForm("SearchByClient", "Home",
                    new { db = @Request.QueryString["db"] },
                    FormMethod.Get,
                    new { id = "searchByClientForm", @class = "form-horizontal" }))
                {
                    <fieldset>
                        <legend>
                            Search by Client
                            <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                        </legend>

                        @{
                            var labelAttributes = new { @class = "col-sm-4 control-label" };
                        }

                        <div class="form-group">
                            @Html.LabelFor(m => m.FileNumber, labelAttributes)
                            <div class="col-sm-8">
                                @Html.TextBoxFor(m => m.FileNumber, new { @class = "form-control input-sm", ng_model = "fileNumber" })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(m => m.FirstName, labelAttributes)
                            <div class="col-sm-8">
                                @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control input-sm", ng_model = "firstName" })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(m => m.LastName, labelAttributes)
                            <div class="col-sm-8">
                                @Html.TextBoxFor(m => m.LastName, new { @class = "form-control input-sm", ng_model = "lastName" })
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-12 col-sm-offset-3">
                                <div class="checkbox">
                                    Include contacts in search result?
                                    @Html.CheckBoxFor(m => m.IncludeContacts, new { id = "includeContactsCheckBox", ng_model = "includeContacts" })
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-12 col-sm-offset-3">
                                Exclude Clients without Address?
                                <div class="checkbox">
                                    @Html.CheckBoxFor(m => m.ExcludeClientsWithoutAddress,
                                        new { id = "excludeClientsWithoutAddressCheckBox", ng_model = "excludeClientsWithoutAddress" })
                                </div>
                            </div>
                        </div>

                        <button type="button" class="btn btn-primary pull-right submitButton"
                                ng-click="addSearchResultToGrid()"
                                ng-disabled="loadingSearch">
                            Search by Client
                            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                            <div id="loadingSearch" ng-show="loadingSearch"></div>
                        </button>
                    </fieldset>
                            }
            </div>

            <div class="row strike">
                <h3>
                    <span class="label label-default">
                        <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
                        OR
                        <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
                    </span>
                </h3>
            </div>

            <div class="row">
                @using (Html.BeginForm("Upload", "Home",
                        new { db = @Request.QueryString["db"] },
                        FormMethod.Post, new { id = "uploadFileForm", enctype = "multipart/form-data" }))
                {
                    <fieldset>
                        <legend>Search by Uploading File</legend>

                        <div class="input-group">
                            <input type="file" class="form-control" name="file" id="file" />
                            <span class="input-group-btn">
                                <button class="btn btn-primary" type="submit">
                                    Upload File
                                    <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
                                </button>
                            </span>
                        </div>
                    </fieldset>
                }
            </div>
        </div>
    </div>
</div>

Answer 1

Your Fiddler request shows what is emitted from the browser. It isn't sending your ExcludeClientsWithoutAddress property.

Since this property is not marked nullable bool? it is being assigned a default value in binding.

You have these inputs as ng_model which suggests your Angular code is not sending this field.