0

I have a class called Parameters.

    public class Parameters
    {
        public string Name { get; set; }

        //other properties

        public List<LatLong> Coordinates { get; set; }
    }

LatLong is this:

    public class LatLong
    {
        public double Latitude { get; set; }
        public double Longitude { get; set; }
    }

On the frontend, I have the following form for creating a new Parameters class.

            @model Parameters
            @using (Html.BeginForm("Index", "Home", FormMethod.Post))
            {
                @Html.EditorForModel()
            }

I have an EditorTemplate for a List: Views/Shared/EditorTemplates/LatLongList.cshtml

@model List<LatLong>
@foreach (var ll in Model)
{
    @Html.EditorForModel()
}

and an EditorTemplate for LatLong: Views/Shared/EditorTemplates/LatLong.cshtml

@model LatLng
@Html.EditorFor(model => model.Latitude)
@Html.EditorFor(model => model.Longitude)

However, nothing shows up.

How can I allow a user to input as many Coordinates as they want?

user12501923
  • 1
  • 1
  • `EditorFor`, `EditorFormModel` will only render fields when there's an actual item in the list. If the list is empty, they will do nothing, because there's nothing to operate on. This isn't what you want anyways. Instead, you need a client-side library with data binding and templating support (Angular, React, Vue, etc.). This will allow you to dynamically add and remove items from the list client-side. If you depend on server-side rendering, then you can only ever edit existing items, or you'd have to prefill the list with a bunch of empty items, but then that would be static. – Chris Pratt Dec 09 '19 at 14:09

1 Answers1

0

Here is a working example , you could refer to

The Main view:

@model MVC3_0.Models.ParameterModel.Parameters

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
   @Html.EditorForModel("AddParameter")
}

EditorTemplate for AddParameter :Views/Shared/EditorTemplates/AddParameter.cshtml

@model MVC3_0.Models.ParameterModel.Parameters

<div>
<div>
    <label> Name:</label>
    @Html.TextBoxFor(x => x.Name)
</div>
<div>
    <label>Count:</label>
    @Html.TextBoxFor(x => x.Count)
</div>

<div>
    <label>Coordinates:</label>

    //Editor Template for LatLongList
    @Html.EditorFor(x => x.Coordinates)
</div>
</div>

EditorTemplate for LatLong :Views/Shared/EditorTemplates/LatLong.cshtml , EditorFor will iterate over collection for you.

@model MVC3_0.Models.ParameterModel.LatLong
<div>
    <label>Latitude:</label>
    @Html.TextBoxFor(model => model.Latitude)
</div>
<div>
    <label>Longitude:</label>
    @Html.TextBoxFor(model => model.Longitude)
</div>

Reference:

How should I call `EditorForModel` with its parameters?

https://forums.asp.net/t/1948071.aspx?EditorFor+and+EditorForModel

Xueli Chen
  • 11,987
  • 3
  • 25
  • 36
  • The HTML contained within LatLong.cshml is not rendered using this. I assume it is because the list is empty. – user12501923 Dec 09 '19 at 11:13
  • Yes , you should make sure the Coordinates list has the value , otherwise none is rendered . This example applies to Edit operations, not Add. – Xueli Chen Dec 10 '19 at 02:22
  • If you want to add multiple Coordinates at once , you could use partial view and pass the all data to controller by ajax . – Xueli Chen Dec 10 '19 at 02:22