How to build a form with validation from a JSON object and to submit it as a dictionary in .NET Core?

user_5842114 0
Viewed 78

I am trying to build a form from a Json object, this Json object have a list of field object, each field object have a type (text, select, checkbox...) and validation object, the final result I want when submitting is a dictionary with a key of the field id and it's value , so I created for a partial view and a view model for every field type and in the index page I loop through the fields list and do a switch on the field type like this:

@foreach (var field in billerInvoiceFieldModels)
{
    switch (field.Type.Tag)
    {
        case "TEXT":
        @await  Html.PartialAsync("Partials/_PartialTextField", new TextField
                {
                    Key = field.Id.ToString(),
                    Name = field.Name,
                    Value = "",
                    IsRequired = true,
                })
            break;
        ...
    }
}

The validation I added for every partial view model doesn't seem to work and I don't get the desired dictionary when submitting the form, note that I don't want to use JQuery or Ajax.

asp.net-core .net-core forms
1 Answers

Here is a working demo: Model:

public class TextField
    {
        public string Key { get; set; }
        public string Name { get; set; }
        public string Value { get; set; }
        public bool IsRequired { get; set; }
    }
public class BillerInvoiceFieldModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public Type Type { get; set; }
    }
    public class Type
    {
        public string Tag { get; set; }
    }

View:

@model IEnumerable<BillerInvoiceFieldModel>
<form method="post">
    @foreach (var field in Model)
    {
        
        switch (field.Type.Tag)
        {
            case "TEXT":
                @await Html.PartialAsync("Partials/_PartialTextField", new TextField
           {
               Key = field.Id.ToString(),
               Name = field.Name,
               Value = "",
               IsRequired = true,
           })
                break;
        }
    }
    <input type="submit" value="submit" />
</form>

Partial view:

@model TextField
<div class="form-group">
    <label class="control-label">@Model.Name</label>
    @if (Model.IsRequired)
    {
        <input name="Values[@Model.Key]" value="@Model.Value" required />

    }
    else
    {
<input name="Values[@Model.Key]" value="@Model.Value" />
    }
</div>

Actions:

[HttpGet]
        public IActionResult Index()
        {
            List<BillerInvoiceFieldModel> l = new List<BillerInvoiceFieldModel> { new BillerInvoiceFieldModel { Id = 1, Name = "b1", Type = new Type { Tag = "TEXT" } }, new BillerInvoiceFieldModel { Id = 2232, Name = "b2", Type = new Type { Tag = "TEXT" } } };
            return View(l);
        }
        [HttpPost]
        public IActionResult Index(Dictionary<string, string> Values)
        {
            return Ok();
        }

result: enter image description here

user_135937360
Related