Create Submit Button for Table in Razor & MVC

Question

I am new to MVC and I am not sure where my problem is but having difficulty finding a challenge I am facing. My Save Button Posts a record but the columns are all null, it doesn't not post all the entry I filled out. I have been working on this for over two days now you are my hope.

Thank you.

<div >
    <div style="margin-left:8px; margin-right:8px;" class="panel panel-primary ">

        <div class="panel-heading">

            @{
                if (Model.Employees.id > 0) {
                    <h3 class="panel-title">Update Existing Employee: &nbsp; @Model.Employees.FirstName, @Model.Employees.LastName</h3>
                } else if (Model.Employees.FirstName == null) {
                    <h3 class="panel-title">Add New Employee: &nbsp;</h3>
                }
            }
        </div>
        <table id="employee_form">
            <tbody id="employees">
                <tr class="panel-body">
                    <td class="form-group">
                        @using (Html.BeginForm("Save", "Employees")) {
                            <div class=" col-lg-4 ">
                                @Html.HiddenFor(e => e.Employees.id)
                                <ol class="row">
                                    <li style="padding-top:25px;"><label for="FirstName" id="FirstName">First Name: </label><input class="form-control"  type="text" value="@Model.Employees.FirstName" /></li>
                                    <li ><label for="LastName" >Last Name: </label><input class="form-control" type="text" value="@Model.Employees.LastName" /></li>
                                    <li ><label for="PhoneNumber" id="">Phone Number: </label><input class="form-control" type="text" value="@Model.Employees.PhoneNumber" /></li>
                                    <li ><label for="Email" id="">Email: </label><input class="form-control" type="text" value="@Model.Employees.Email" /></li>
                                </ol>
                            </div>

                            <div class=" col-lg-4" style="">
                                <ol>
                                    <li style="padding-top:25px;"><label for="providername" id="ProviderName"> Provider Name: </label><input style="float:right;" class="form-control" type="text" value="@Model.Employees.ProviderName" /></li>
                                    <li><label for="OfficeAddress" id="">Address: </label><input class="form-control" type="text" value="@Model.Employees.OfficeAddress" /></li>
                                    <li><label for="City" id="">City: </label><input class="form-control" type="text" value="@Model.Employees.City" /></li>
                                    <li><label for="State" id="">State: </label><input class="form-control" type="text" value="@Model.Employees.State" /></li>
                                    <li><label for="ZipCode" id="">Zip Code: </label><input class="form-control" type="text" value="@Model.Employees.ZipCode" /></li>

                                </ol>
                            </div>

                            <div class="col-lg-3 ">
                                <ol>
                                    <li style="padding-top:25px;"><label for=" officefax" id="">Office Fax No.: </label><input class="form-control" type="text" value="@Model.Employees.OfficeFax" /></li>
                                    <li><label for="OfficePhoneNumber" id="">Office Ph. No.: </label><input class="form-control" type="text" value="@Model.Employees.OfficePhoneNumber" /></li>
                                    <li><label for="Notes1" >Notes</label><textarea class="form-control" value="@Model.Employees.Notes"></textarea></li>

                                </ol>
                            </div>
                            <div  class="col-lg-12 row">
                                <button style="float:right;" type="submit" class="btn btn-info">Save</button>
                            </div>

                        }  
                        <div class="col-lg-4">

                        </div>                       
                    </td>
               </tr>
            </tbody>
        </table>
    </div>
</div>
<hr />

And here is my controller action:

[HttpPost]
public ActionResult Save(Employees employees) {
    if (!ModelState.IsValid) {
        var employeeViewModel = new EmployeesViewModel
        {
            Employees = employees, EmployeeDetails = _Context.EmployeeDetails.ToList()
        };
        return View("EmployeeForm", employeeViewModel);
    }

    if (employees.id == 0) {
        _Context.Employees.Add(employees);

    } else {
        var employeeInDb = _Context.Employees.Single(e => e.id == employees.id);
        employeeInDb.FirstName = employees.FirstName;
        employeeInDb.LastName = employees.LastName;
        employeeInDb.Email = employees.Email;
        employeeInDb.DoctorsName = employees.DoctorsName;
        employeeInDb.ProviderName = employees.ProviderName;
        employeeInDb.City = employees.City;
        employeeInDb.State = employees.State;
        employeeInDb.ZipCode = employees.ZipCode;   

        employeeInDb.OfficeAddress = employees.OfficeAddress;
        employeeInDb.OfficePhoneNumber = employees.OfficePhoneNumber;
        employeeInDb.OfficeFax = employees.OfficeFax; 
        employeeInDb.Notes = employees.Notes;

    }
    _Context.SaveChanges();
    return RedirectToAction("Index", "Employees"); 
}

Solution 1

Your input tags don't have a name attribute, so they don't post back.

For example this tag:

<input class="form-control" type="text" value="@Model.Employees.LastName" />

Instead you should use

@Html.TextBoxFor(m=>m.Employees.LastName)

Or if you want to use the input tag directly you could just add the name

<input class="form-control" type="text" name="@Html.NameFor(m=>m.Employees.LastName)" value="@Model.Employees.LastName" />

Solution 2

You are doing it wrong, here's a simple example I can give you:

Assuming you have a model named Employee:

public class Employee
{
    public int Id {get;set;}
    public string FirstName {get;set;}
    public string LastName {get;set;}

    public Employee() {}
}

And you have a view like this:

@model Employee

@using (Html.BeginForm("Save", "Employees")) 
{
    @Html.AntiForgeryToken()

    @Html.LabelFor(m => m.FirstName)
    @Html.TextBoxFor(m => m.FirstName)

    @Html.LabelFor(m => m.LastName)
    @Html.TextBoxFor(m => m.LastName)

    <button type="submit">Save</button>
}

You should be able to do the get and post actions in your controller with something like this:

[HttpGet]
public ActionResult Save()
{
    var employee = new Employee();

    return View(employee);
}

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Save(Empoyee employee)
{
    if (!ModelState.IsValid)
    {
        //do whatever you want here
    }

    return View(employee);
}

I hope this helps.