Fill a list from a form with ASP.NET Core MVC

Navigation
0

I develop a project on ASP.NET Core 1.1 and I have the following problem: I have a form with which I create a new student, this student has a property that is a list of goals. What I want is to add several goals in the same form in which the student is created. I share some code to illustrate the problem:

This would be the model view: 

public class StudenViewModel{
    public string FirstName {get; set;}
    public string LastName {get; set;}
    public List<Goal> Goals {get; set;}
}

public Class Goal {
    public string Name {get; set;}
    public int Priority {get; set;}
}

This would be a fragment of the view 

@model StudentViewModel
<form class="form-horizontal ...>
    <div class="form-group>
        <label asp-for="FirstName"></label>
        <input asp-for="FirstName" />
    </div>
    <div class="form-group>
        <label asp-for="LastName"></label>
        <input asp-for="LastName" />
    </div>
    @* Aqui iria el codigo necesario para agregar elementos (metas) a la lista*@
</form>

I know that this can be easily achieved using frameworks frontend , I've even done it before using React , but for this specific project I'd like to achieve it using only HTML , JS , C # .

I appreciate your help, in advance.

    
asked by alecardv 05.01.2017 в 01:00
source

3 answers

0

Some time ago I found the solution so I publish it in case it helps someone:

The input should be implemented without using asp-for, instead use the name property with reference to the index of each element, like this: 

@model StudentViewModel
<form class="form-horizontal ...>
   ...
<div class="form-group>
    <input name="Goals[0].Name" />
    <input name="Goals[0].Priority" />
    <input name="Goals[1].Name" />
    <input name="Goals[1].Priority" />
</div>
</form>

If dynamic is required, you can implement a function using Javascript to add or remove inputs and a global counter that has the account of how many elements will be inserted in the list. The numbering of the indexes must be consecutive because otherwise the system will not be able to binde the data to the model.

    
answered by 21.12.2017 / 19:01
source
0

Try the following, have several inputs assigned to the property of the model: 

<form asp-controller="Home" asp-action="Register" method="post">
    <input id="txtGoal1" type="text" asp-for="Goals" />
    <input id="txtGoal2" type="text" asp-for="Goals" />
    <input id="txtGoal3" type="text" asp-for="Goals" />
    <input type="submit" value="Registrar" />
</form>

And in the controller should be something like this: 

    [HttpPost]
    public IActionResult Register(StudentViewModel model)
    {
        // TODO: Guardar los datos

        return View("Index");
    }

Then you could dynamically add the inputs to the form

    
answered by 05.01.2017 в 14:28
0

Why do not you put a textarea and separate the goals with semicolons (;) and the priorities of the goal with commas (,)? An example string would be: 

Programación,Alta;Bases de datos,Media

This way you would get a string that you can manipulate from the server side with a String .Split () (easier to program, but you put an additional load on your server) to insert it into the corresponding list.

This would be a solution that would simplify the development in the front-end but would add load to the user.

Another option could be to treat the textarea with JQuery so that what you send to the server is a JSON array and "deserialize" it on the server to a C # list. This would reduce some load on your back-end, but I do not know which class will allow you to work with JSON in ASP.NET Core.

    
answered by 26.04.2017 в 18:09
client / server application with TCPClient Remove blob with ajax, button inside modal