Submitting to Control gives null value

Question

I am new to mvc and I wish to access a value from the code behind just a text box value and I thought this was the logical way of doing it by passing the value as a paremeter to my action Result but when i debug firstName its showing as null?.

It is this value here that I am trying to access please excuse my ignorance I come from a long webforms background.

   <input id="firstName" class="form-control" type="text" />

Also quick quesiton in relation to the controller must I always return a view that it was called from can i for example go return step2 as long as it has same layout file ? How would one tell it to go to another view other than the Save action reason I am asking is I am doing a wizard form.

My Form Markup

@using (Html.BeginForm("Step1", "Forms", FormMethod.Post, new { id = "submitForm" }))
{
@Html.AntiForgeryToken()
<h4>Health Check</h4>
<hr />
@Html.ValidationSummary("", new { @class = "text-danger" })

<div class="form-group">
    @Html.Label("First Name", new { @class = "col-md-2 control-label" })


    <div class="col-md-10">
        <input id="firstName" class="form-control" type="text" />
    </div>
</div>

<div class="form-group">
    @Html.Label("Middle Name", new { @class = "col-md-2 control-label" })


    <div class="col-md-10">
        <input id="txtmiddleName" class="form-control" type="text" />
    </div>
</div>
<div class="form-group">
    @Html.Label("Surname", new { @class = "col-md-2 control-label" })


    <div class="col-md-10">
        <input id="txtsurname" class="form-control" type="text" />
    </div>
</div>

<div class="form-group">
    @Html.Label("Saluation", new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        <input id="txtSaluation" class="form-control" type="text" />
    </div>
    </div>

<div class="form-group">
    @Html.Label("Aliases", new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        <input id="txtAliases" class="form-control" type="text" />
    </div>
</div>

<div class="form-group">
    @Html.Label("Maritial Status", new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        <input id="txtmStatus" class="form-control" type="text" />
    </div>
</div>


<div class="form-group">
    @Html.Label("Maritial Status", new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        <select class="form-control"></select>

    </div>
</div>


<div class="form-group">
    @Html.Label("Address 2", new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        <input id="txtmStatus" class="form-control" type="text" />
    </div>
</div>
<div class="form-group">
    @Html.Label("City", new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        <input id="txtmStatus" class="form-control" type="text" />
    </div>
   </div>

    <div class="form-group">
    @Html.Label("Post Code", new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        <input id="txtmStatus" class="form-control" type="text" />
    </div>
    </div>

    <div class="form-group">
        @Html.Label("County", new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            <input id="txtCounty" class="form-control" type="text" />
        </div>
    </div>
    <div class="form-group">
        @Html.Label("Country", new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            <input id="txtmStatus" class="form-control" type="text" />
        </div>
    </div>

    <div class="form-group">
        @Html.Label("Date Of Birth", new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @(Html.Kendo().DatePicker()
          .Name("datepicker"))


        </div>
    </div>


    <div class="form-group">
        @Html.Label("Home Tel No", new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            <input id="txtmStatus" class="form-control" type="text" />
        </div>
    </div>

    <div class="form-group">
        @Html.Label("Home Work No", new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            <input id="txtmStatus" class="form-control" type="text" />
        </div>
    </div>


    <div class="form-group">
        @Html.Label("Fax No", new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            <input id="txtmStatus" class="form-control" type="text" />
        </div>
    </div>

    <div class="form-group">
        @Html.Label("Mobile No", new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            <input id="txtmStatus" class="form-control" type="text" />
        </div>
    </div>

    <div class="form-group">
        @Html.Label("Best Time To Call", new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            <select class="form-control">
               <option>Morning</option>
               <option>Afternoon</option>
                <option>Evening</option>
            </select>

        </div>
    </div>
    <button type="submit" id="btnSave">Save</button>



}

My Controller Action Result:

  public ActionResult Step1(string firstName)
    {
        DataAccessAdapter _adapter = new DataAccessAdapter();

        TblfhcsPersonalEntity _personal = new TblfhcsPersonalEntity();

        _personal.FirstName = firstName;



        _adapter.SaveEntity(_personal, true);




        return View();

    }

Answer 1

For any form in HTML to submit data, all <input> tags must have a name="..." attribute. Setting id is useful for javascript, but is ignored for the form submit.

In this case, name="firstName" would be a good start because that matches with what you are binding in the Controller action method Step1.