MVC Update view with uploaded file

Question

I'm new to MVC and have spent several hours trying to find a solution to this issue. I'm trying to set up an invoicing system for some rental properties. The property manger provides an excel file that contains the current water readings. I have to subtract the water readings from last months to find out the monthly usage. The view I've made does this and shows all the units simultaneously. What I'm having problems with is passing the uploaded file along with the model data (last months readings) to the controller. The file shows up but none of the other data.

In the view I have two submit buttons. One to upload the file to be integrated into the model data and the other to create the new records based on the previous and current(uploaded) data. Below are the relevant model, view and controllers.

Ultimately the billing manger would see last month's data, upload the new data, review and verify there are no errors and then submit the data for the new invoices.

If there is better way to accomplish that then what I'm trying here please let me know. This just seemed like it would be easier that recreating model data with all the linq queries. Thanks in advance for your help!

Model:

 public partial class UtilityData
{
    public DateTime bEntryDate { get; set; }
    public string bPrevDate { get; set; }
    public int bID { get; set; }
    //public int residenceCount { get; set; }
    public IEnumerable<UtilEntry> utilData { get; set; }
    public HttpPostedFileBase UploadFile { get; set; }
}

public partial class UtilEntry
{
    public int rID { get; set; }
    public long? WaterReading { get; set; }
    public int ResNumber { get; set; }
    public long? prevWaterReading { get; set; }
    public decimal wDifference { get; set; }
    public int GrnUpper { get; set; }
    public int GrnLower { get; set; }
    public int YelUpper { get; set; }
    public int YelLower { get; set; }
}

View:

 @model PropertiesAdminSite.Models.UtilityData @{ ViewBag.Title = "CreateNewCycle"; } <h2>New Residence Utilities</h2> @using (Html.BeginForm("Upload", "ImportWater", FormMethod.Post, new { enctype = "multipart/form-data" })) { @Html.AntiForgeryToken() <div class="control-group"> @Html.TextBoxFor(m => m.UploadFile, new { type = "file"}) @*<input type="file" class="btn btn-info" name="postedFile"/>*@ </div> <div class="control-group"> <input type="submit" class="btn btn-info" value="Upload" /> </div> <div class="col-lg-12 visible-lg"> <br> <span style="color:green">@ViewBag.Message</span> </div> } @using (Html.BeginForm("IndexMulti", "Utilities", FormMethod.Post)) { @Html.AntiForgeryToken() <hr /> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) <div class="row"> <div class="col-lg-12"> <div class="panel panel-default"> <div class="panel-heading"> @Html.LabelFor(model => model.bEntryDate, htmlAttributes: new { @class = "control-label col-md-1" }) @Html.DisplayFor(model => model.bEntryDate) </div> <!-- /.panel-heading --> <div class="panel-body"> <div class="dataTable_wrapper"> <!--div id="dataTables-example_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">--> <div class="row"> <div class="col-sm-12"> <table class="table table-striped table-bordered table-hover dataTable no-footer" id="dataTables-Bills" role="grid" aria-describedby="dataTables-example_info"> <!-- /table headers--> <thead> <tr role="row"> <th>@Html.DisplayNameFor(model => model.utilData.First().ResNumber)</th> <th>@Html.DisplayNameFor(model => model.utilData.First().WaterReading)</th> <th> @Html.DisplayNameFor(model => model.utilData.First().prevWaterReading) &nbsp; @* TODO: fix date format *@ @Html.DisplayFor(model => model.bPrevDate) </th> <th>@Html.DisplayNameFor(model => model.utilData.First().wDifference)</th> <th>Actions</th> </tr> </thead> <!-- /table body--> <tbody> @foreach (var item in Model.utilData) { <tr role="row"> <td> @Html.DisplayFor(modelItem => item.ResNumber, null, "residence_" + item.rID) @Html.HiddenFor(model => item.GrnLower, new { id = "grnLower_" + item.rID }) @Html.HiddenFor(model => item.GrnUpper, new { id = "grnUpper_" + item.rID }) @Html.HiddenFor(model => item.YelLower, new { id = "yelLower_" + item.rID }) @Html.HiddenFor(model => item.YelUpper, new { id = "yelUpper_" + item.rID }) </td> <td> @Html.EditorFor(model => item.WaterReading, null, "waterReading_" + item.rID) </td> <td> <span id="@string.Format("prevWater_{0}",item.rID)"> @Html.DisplayFor(model => item.prevWaterReading, null, "prevWater_" + item.rID) </span> @Html.HiddenFor(model => item.prevWaterReading, new { id = "hprevWater_" + item.rID }) </td> <td> <span id="@string.Format("hdifference_{0}",item.rID)"> @Html.DisplayFor(model => item.wDifference) </span> @Html.HiddenFor(model => item.prevWaterReading, new { id = "hdifference_" + item.rID }) </td> <td> @Html.ActionLink("View History", "ExportDataIndex", "ExportData", new { rID = item.rID, bId = Model.bID }, null) &nbsp;| &nbsp; <a href="@Url.Action("ExportToExcel", "ExportData", new { rID = item.rID, bId = Model.bID })" class="btn btn-success"> <i class="fa fa-file-excel-o" aria-hidden="true" title="Export to Excel"></i> </a>&nbsp;| &nbsp; <a href="@Url.Action("ChartData", "Utilities", new { rID = item.rID, bId = Model.bID })" class="btn btn-info"> <i class="fa fa-bar-chart" aria-hidden="true" title="Water Usage History"></i> </a> </td> </tr> } </tbody> </table> </div> </div> </div> </div> </div> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="Create" class="btn btn-default" /> </div> </div> } 

Controller:

 // GET: ImportWater
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Upload([Bind(Include = "bEntryDate,bPrevDate,bID,utilData,UploadFile")]UtilityData uData) //<----The file gets uploaded but none of the Model data from the view.
    {
        HttpPostedFileBase postedFile = uData.UploadFile;

            if (postedFile != null && postedFile.ContentLength > 0)
            {
            string fileName = postedFile.FileName;
            string fileContentType = postedFile.ContentType;
            byte[] fileBytes = new byte[postedFile.ContentLength];
            var data = postedFile.InputStream.Read(fileBytes, 0, Convert.ToInt32(postedFile.ContentLength));

            using (var package = new ExcelPackage(postedFile.InputStream))
            {
                //Todo: read file and insert data

            }
            ViewBag.Message = "File uploaded successfully.";
        }

        return View(uData);
    }

Answer 1

I now understand what the issue was; I didn't fully understand how the POST worked. I thought the form would always send the full model object back and that is not the case. I created hidden items to capturethe model data I wanted to post back.

 @using (Html.BeginForm("Upload", "ImportWater", FormMethod.Post, new { enctype = "multipart/form-data" })) { @Html.AntiForgeryToken() <div class="control-group"> @Html.TextBoxFor(m => m.UploadFile, new { type = "file"}) @*<input type="file" class="btn btn-info" name="postedFile"/>*@ </div> <div class="control-group"> <input type="submit" class="btn btn-info" value="Upload" /> </div> <div class="col-lg-12 visible-lg"> <br> <span style="color:green">@ViewBag.Message</span> @Html.HiddenFor(model => model.bID) @Html.HiddenFor(model => model.bEntryDate) @Html.HiddenFor(model => model.bPrevDate) @for (int i = 0; i < Model.utilData.Count(); i++) { @Html.HiddenFor(model => model.utilData[i].ResNumber) @Html.HiddenFor(model => model.utilData[i].GrnLower) @Html.HiddenFor(model => model.utilData[i].GrnUpper) @Html.HiddenFor(model => model.utilData[i].prevWaterReading) @Html.HiddenFor(model => model.utilData[i].rID) @Html.HiddenFor(model => model.utilData[i].WaterReading) @Html.HiddenFor(model => model.utilData[i].wDifference) @Html.HiddenFor(model => model.utilData[i].YelLower) @Html.HiddenFor(model => model.utilData[i].YelUpper) } </div> }