Sung Sung - 2 months ago 18
ASP.NET (C#) Question

ASP.NET MVC 4 Model binding issue

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.

enter image description here

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

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.

Comments