Send form data with HTML table (multiple records) to MVC controller

Question

Send form data with HTML table (multiple records) to MVC controller

Navigation

#1 by (-1 votes)

0

Good morning. I work in a MVC C # project and I have a model that represents a table in my database, the model below only represents some properties of my class so as not to create confusion and represent the data of a single Event, the data of a single Company and the data of all the employees that the company wants to register to the event, like this:

 public class Ejemplo
    {
        // datos de la empresa
        [Required]
        public string Empresa { get; set; }
        [Required]
        public string telefonoEmpresa { get; set; }
        [Required]
        public string NumeroPatronalEmpresa { get; set; }

        //Datos del evento
        [Required]
        public string CodEvento { get; set; }
        [Required]
        public string NombreEvento { get; set; }

        // Datos del empleado
        [Required]
        public string ID { get; set; }
        [Required]
        public string Cargo { get; set; }
        [Required]
        public string Salario { get; set; }
    }

in my controller [HttpGet] I only create the view

 public ActionResult ObtenerSolicitudCapacitacion() {
            return View();
        }

and the view is strongly typed with the previous class

now my view contains the data of the event, of the company and I want that I can register as employees as the company wishes to the event, for it the last two fields of my model can be specified the times that the company wants in the same form, that is, in the view: A company can register as many employees as it wishes to a single event in the same application.

To present the employees that the company is registering I have created a very simple HTML table that once the company specifies the data of the emleta presses a button and through jQUery I add the data to the table

@*dato de empleado a mostrar en la tabla HTML*@
        <div class="form-group">
            @Html.LabelFor(model => model.Cargo, new { @class = "control-label col-md-2", id = "inputText1" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Cargo)
                @Html.ValidationMessageFor(model => model.Cargo)
            </div>
        </div>

        @*dato de empleado a mostrar en la tabla HTML*@
        <div class="form-group">
            @Html.LabelFor(model => model.Salario, new { @class = "control-label col-md-2", id = "inputText2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Salario)
                @Html.ValidationMessageFor(model => model.Salario)
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <button type="button" class="btn btn-default" id="cargarTabla">Ingresar Empleado</button>
            </div>
        </div>

and my jQuery that adds to the table the information defined in the input is as follows

 $("#cargarTabla").click(function(e) {
        e.preventDefault();

        var salario = $("#inputText1").val().toLowerCase();
        var cargo = $("#inputText2").val();

        $('#myTable tbody').append('<tr><td for="salario">' + salario + '</td><td for="cargo">' + cargo + '</td><td><a href="#" id="select">Modificar</a><a href="#" id="eliminar">  Eliminar</a></td></tr>');
        $("#inputText1").val('');
        $("#inputText2").val('');
        $("#inputText3").val('');
        $('#inputText1').focus();
    });

Now I will have the data of a single event, a single company and several employees of the company (whose data is in the HTML table) in my form and I want to send all this data to my controller that I imagine should receive List, could you indicate me How should I send the information to my controller please?

jquery html c# mvc

asked by 12.03.2017 в 15:05

source

1 answer

Problems when deploying the template to the TAD Call to a member function consultprestamos () on a non-object

score -1 · Answer 1

From my point of view it is not necessary that you send all the information of the employee and at the same time send the whole list ( unless there is a very specific reason to do it but neither would it in any way like that ). What you have to do at the beginning is to associate the employee to a company, for example, your model should be as follows:

public class EmployeeModel
{
    public string EmployeeCode { get; set; }
    public string CompanyId { get; set; }
    public string Section { get; set; }
    public string Id { get; set; }
    public string LastName { get; set; }
    public string UserName { get; set; }
}

Once you have the information captured, and you click the Submit button, you should get the information to Controller , which is saved as it is in the database.

Now, depending on the handling of the views, I would recommend that the lower part be generated as a partial view, in this way, once the employee was registered in the event, the partial view with the information of all the employees was updated. registered.

Visual Studio automatically generates the views based on the model as a base class and selecting a template to create, delete, view a list, etc. For example, for the record view it would look something like this:

@model WebApplication1.Models.EmployeeModel

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>EmployeeModel</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Id, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Id, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Id, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.EmployeeCode, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.EmployeeCode, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.EmployeeCode, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Company, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Company, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Company, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Section, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Section, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Section, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.UserName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" })
            </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>
    </div>
}

And the partial view of registered users would be something like this:

@model IEnumerable<WebApplication1.Models.EmployeeModel>

<table class="table">
    @foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.EmployeeCode)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Company)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Section)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.LastName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.UserName)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
                @Html.ActionLink("Details", "Details", new { id=item.Id }) |
                @Html.ActionLink("Delete", "Delete", new { id=item.Id })
            </td>
        </tr>
    }
</table>

Finally, you will have all the information of the employees associated with any company, with that, your information will be consistent without the need to perform actions on the flight .