ASP.NET MVC 4表单发布变量在接收控制器中为null

Question

I have this model:

  public class WorkflowImport {
    public bool IsLive { get; set; }
    public string DateTimeCreated { get; set; }
    public string CreatedByUser { get; set; }
    public string VersionComments { get; set; }
    public string VersionNumber { get; set; }
    public string FilePath { get; set; }

    public List<WorkflowProcess> WorkflowProcesses { get; set; }
  }

A partial view:

@model <FullyQualifiedPathTo...>.ViewModels.WorkflowImport

<div class="subSectionHeader">Upload New Workflow Profile</div>
<div class="AccountDetailLine">
  @using ( Html.BeginForm( "UploadNewMatrix", "Home", FormMethod.Post, new { enctype = "multipart/form-data" } ) ) {
    <table>
      <tr>
        <td>Select Local File:</td>
        <td>
          <div class="upload-wrapper">
            <input type="file" name="file" id="xlsfile" />
          </div>
        </td>
      </tr>
      <tr>
        <td>Version Comments:</td>
        <td>
          @Html.TextBox( "comments", Model.VersionComments, new Dictionary<string, object> { { "class", "textboxUploadField" } } )
        </td>
      </tr>
      <tr>
        <td>Version Number:</td>
        <td>
          @Html.TextBox( "version", Model.VersionNumber, new Dictionary<string, object> { { "class", "textboxUploadField" } } )
        </td>
      </tr>
      <tr>
        <td colspan="2"></td>
      </tr>
      <tr>
        <td>Select whether this file upload will update<br />
          the live workflow matrix or just the "What If" test matrix</td>
        <td>LIVE @Html.RadioButtonFor( model => model.IsLive, "True" )
          "What If" @Html.RadioButtonFor( model => model.IsLive, "False" )
        </td>
      </tr>
    </table>
    <div class="submit-wrapper">
      <input type="submit" value="Import Now" id="form_submit" class="ovobutton" />
    </div>
  }
</div>

and a receiving controller/method:

public class HomeController: Controller {
    // POST /Home/UploadNewMatrix
    [HttpPost]
    public ActionResult UploadNewMatrix( WorkflowImport workflowImport ) {
      return View( workflowImport );
    }
}

But when I enter some values into the two textboxes and click the submit button, I get null values in the bound object on the controller, when checking in the debugger.

I don't know why this is happening, because I used an almost identical pattern (including file upload with "multipart/form-data") on a previous project and was able to get the values successfully.

Is there something obvious I have not seen here? The difference between this new application and the previous is that it is a partial view in amongst a lot of jquery, but I don't see how that could make a difference. Also, I need to use traditional file upload as the target browser is IE8 and does not support HTML5.

Answer 1

For correct binding, name html element must equal property name

property:

  public string VersionComments { get; set; }

View:

   <tr>
        <td>Version Comments:</td>
        <td>
          @Html.TextBox("VersionComments", Model.VersionComments, new Dictionary<string, object> { { "class", "textboxUploadField" } } )
        </td>
      </tr>

Note: i agree with Jacob. Using @Html.EditorFor(m=>m.VersionComments) more flexible approach, but my example demonstrates binding principle.

Answer 2

You're getting back null because the name of the inputs don't match what the model binder expects. To help you create the right names, ASP.NET MVC has some useful helper methods. Instead of:

@Html.TextBox(
    "comments", 
    Model.VersionComments, 
    new Dictionary<string, object> { { "class", "textboxUploadField" } } )

...do this instead:

@Html.TextBoxFor(
    m => m.VersionComments, 
    new Dictionary<string, object> { { "class", "textboxUploadField" } } )

This will use the value of VersionComments , and it will also give the input the name VersionComments so that it knows to plug this into the model when posting.