PropertyVM ID's are not shown in the view, Change Date Format, Add Bootstrap classes

[ivansoriabia]

Hello mcintyre321!

I have an issue and two questions about PropertyVM:

The first problem that I have is: The Id's that I have assigned are not shown in the view. The first question that I have is: How I can set a custom format in DateAttributes (PropertyVM with DateTime Format)? The second question that I have is: How I can add Bootstrap classes to an PropertyVM?

Thanks a lot!

[mcintyre321]

Can you post:

1. some code showing how you create the PropertyVms and set their ids
2. the HTML you are getting
3. the HTML that you want

[mcintyre321]

So for dates, for a static model, you would write:

[DisplayFormat(DataFormatString = "dd/MM/yyyy")]
public DateTime StartDate { get; set; }

so if you are doing this dynamically, you need to do something like:

new PropertyVm(typeof(DateTime), "StartDate")
{
    DisplayName = "Start Date",
    Value = startDate
    GetCustomAttributes = () => new object[] {new DisplayFormatAttribute {DataFormatString = "dd/MM/yyyy"}]
},

[mcintyre321]

This is the view used to display a property: https://github.com/mcintyre321/FormFactory/blob/master/FormFactory/Views/Shared/FormFactory/Form.Property.cshtml - where would you like to set the classes?

[mcintyre321]

I don't recommend setting ids for the generated form fields - are you sure you need to?

[ivansoriabia]

Thanks for answering!

Date: I have changed attribute for my PropertyVM that contains a date. The code you've post me wasn't right at all, so here you have the code that works:

new PropertyVm(typeof(DateTime), "dpFechaNacimiento") 
{
    DisplayName = "dpFechaNacimiento",
    GetCustomAttributes = () => new object[]{ new DateAttribute(), new DisplayFormatAttribute { DataFormatString = "dd/MM/yyyy" } } 
},

IDs: Don't worry about IDs in PropertyVM I can use the name too. I wanted the IDs because when you have to call the inputs from JQuery it's easier than call them from its name.

Bootstrap classes: I would like to set the width of the label and the width of input using bootstrap classes because it's an easy way to set this properties, but If this cannot be done I can set them in my site .css file.

I will make another comment with the pieces of code you have requested me.

[ivansoriabia]

PropertyVM Creation:

                    new[]
                    {
                        new PropertyVm(typeof(String), "cmbTipoDonacion")
                        {
                            DisplayName = _procesoDonaService.ObtenerRegistroObjeto("lblTipoDonacion"),
                            NotOptional = true,
                            Choices = _procesoDonaService.ObtenerListaTipoDonacion(),
                            Id = "cmbTipoDonacion"
                        },
                        new PropertyVm(typeof(String), "cmbAsistencia")
                        {
                            DisplayName = _procesoDonaService.ObtenerRegistroObjeto("lblAsistencia"),
                            Choices = _procesoDonaService.ObtenerListaValoresSeleccion("ASIST")
                        },
                        new PropertyVm(typeof(XElement), "cFoto")
                        {
                            DisplayName = String.Empty,
                            Value = XElement.Parse("<canvas id='canvas' width='640' height='480'></canvas>")
                        },
                        new PropertyVm(typeof(XElement), "btnFoto")
                        {
                            DisplayName = String.Empty,
                            Value = XElement.Parse("<input id='snap' class='btn btn-primary' type='button' />")
                        },
                        new PropertyVm(typeof(String), "txtIdDonante")
                        {
                            DisplayName = _procesoDonaService.ObtenerRegistroObjeto("lblIdDonante"),
                            NotOptional = true,
                        },
                        new PropertyVm(typeof(XElement), "btnAsistentePaciente")
                        {
                            DisplayName=String.Empty,
                            Value = XElement.Parse("<a class='btn btn-primary fa fa-ellipsis-h' asp-action=''></a>"),
                            Id = "btnAsistentePaciente",
                            Disabled = IsDisabledBtnAsistentePaciente,
                            IsHidden = IsHiddenBtnAsistentePaciente
                        },
                        new PropertyVm(typeof(XElement), "btnCrearPaciente")
                        {
                            DisplayName=String.Empty,
                            Value = XElement.Parse("<a class='btn btn-primary fa fa-plus' asp-action='' ></a>"),
                            Id = "btnCrearPaciente",
                            Disabled = IsDisabledBtnCrearPaciente,
                            IsHidden = IsHiddenBtnCrearPaciente
                        },
                        new PropertyVm(typeof(XElement), "btnHuella")
                        {
                            DisplayName=_procesoDonaService.ObtenerRegistroObjeto("lblInfoBusqueda"),
                            Value = XElement.Parse("<a class='btn btn-primary' asp-action=''>(º)</a>"),
                            IsHidden = IsHiddenBtnHuella,
                            Id = "btnHuella"
                        },
                        new PropertyVm(typeof(String), "txtNombre")
                        {
                            DisplayName = _procesoDonaService.ObtenerRegistroObjeto("lblNombre"),
                        },
                        new PropertyVm(typeof(String), "txtApellidos")
                        {
                            DisplayName = _procesoDonaService.ObtenerRegistroObjeto("lblApellidos"),
                        },
                        new PropertyVm(typeof(DateTime), "dpFechaNacimiento")
                        {
                            DisplayName = _procesoDonaService.ObtenerRegistroObjeto("lblFNacim"),
                            GetCustomAttributes = () => new object[]{ new DateAttribute(), new DisplayFormatAttribute { DataFormatString = "dd/MM/yyyy" } }
                        },
                        new PropertyVm(typeof(String), "cmbSexo")
                        {
                            DisplayName = _procesoDonaService.ObtenerRegistroObjeto("lblSexo"),
                            Choices = _procesoDonaService.ObtenerSexo()
                        },
                        new PropertyVm(typeof(String), "txtDocumento")
                        {
                            DisplayName = _procesoDonaService.ObtenerRegistroObjeto("lblDocumento"),
                        },
                         new PropertyVm(typeof(String), "cmbTipoDocumento")
                        {
                            DisplayName = _procesoDonaService.ObtenerRegistroObjeto("lblTipoDocumento"),
                            Choices = _procesoDonaService.ObtenerListaValoresSeleccion("TIPODOC")
                        },
                        new PropertyVm(typeof(String), "txtDireccion")
                        {
                            DisplayName = _procesoDonaService.ObtenerRegistroObjeto("lblDireccion"),
                        },
                        new PropertyVm(typeof(String), "txtNHC")
                        {
                            DisplayName = _procesoDonaService.ObtenerNombreNumPaciente(),
                            IsHidden = true
                        },
                        new PropertyVm(typeof(String), "cmbPais")
                        {
                            DisplayName = _procesoDonaService.ObtenerRegistroObjeto("lblPais"),
                            Choices = _procesoDonaService.ObtenerListaPaises(),
                            Value = "0"
                        },
                        new PropertyVm(typeof(String), "cmbProvincia")
                        {
                            DisplayName = _procesoDonaService.ObtenerRegistroObjeto("lblProvincia"),
                        },
                        new PropertyVm(typeof(String), "txtLocalidad")
                        {
                            DisplayName = _procesoDonaService.ObtenerRegistroObjeto("lblLocalidad"),
                        },
                        new PropertyVm(typeof(String), "txtCP")
                        {
                            DisplayName = _procesoDonaService.ObtenerRegistroObjeto("lblCP"),
                        },
                        new PropertyVm(typeof(String), "txtDireccion2")
                        {
                            DisplayName = _procesoDonaService.ObtenerRegistroObjeto("lblDireccion2"),
                        },
                        new PropertyVm(typeof(String), "txtDireccion3")
                        {
                            DisplayName = _procesoDonaService.ObtenerRegistroObjeto("lblDireccion3"),
                        },
                        new PropertyVm(typeof(String), "txtTelefono1")
                        {
                            DisplayName = _procesoDonaService.ObtenerRegistroObjeto("lblTelefono1"),
                        },
                        new PropertyVm(typeof(String), "txtTelefono2")
                        {
                            DisplayName = _procesoDonaService.ObtenerRegistroObjeto("lblTelefono2"),
                        },
                        new PropertyVm(typeof(String), "txtEmail")
                        {
                            DisplayName = _procesoDonaService.ObtenerRegistroObjeto("lblEmail"),
                            GetCustomAttributes = () => new object[]{ new EmailAttribute() }
                        },
                        new PropertyVm(typeof(String), "txtObservaDonante")
                        {
                            DisplayName = _procesoDonaService.ObtenerRegistroObjeto("lblObservaDonante"),
                            GetCustomAttributes = () => new object[]{ new MultilineTextAttribute() }
                        },
                        new PropertyVm(typeof(Boolean), "chkRecibirPeti")
                        {
                            DisplayName = String.Empty
                        },
                        new PropertyVm(typeof(String), "txtRecibirPetiMeses")
                        {
                            DisplayName = _procesoDonaService.ObtenerRegistroObjeto("lblRecibirPetiMesesAtras")
                        },
                        new PropertyVm(typeof(String), "cmbDonacionCentro")
                        {
                            DisplayName = _procesoDonaService.ObtenerRegistroObjeto("lblDonacionCentro"),
                            Choices = _procesoDonaService.ObtenerListaCentros()
                        }
                    }

[ivansoriabia]

HTML I get:

<div class="form-group has-valid">
        <label class="control-label" for="cmbTipoDonacion">Tipo de donación</label>
        <select name="cmbTipoDonacion" class="form-control">
                <option value="C">Reposición</option>            
                <option value="V">Voluntaria</option>            
                <option value="1">Autóloga</option>            
                <option value="2">Dirigida</option>            
                <option value="4">Designada</option>            
        </select>
        <span class="help-block">
                <span class="field-validation-valid" data-valmsg-for="cmbTipoDonacion" data-valmsg-replace="true"></span>
        </span>
</div> 

The ID for the above's property cmbTipoDonacion has't been add to the select.

HTML I want:

<div class="form-group has-valid">
        <label class="control-label" for="cmbTipoDonacion" class="col-lg-4">Tipo de donación</label>
        <select name="cmbTipoDonacion" class="form-control col-lg-6">
                <option value="C">Reposición</option>            
                <option value="V">Voluntaria</option>            
                <option value="1">Autóloga</option>            
                <option value="2">Dirigida</option>            
                <option value="4">Designada</option>            
        </select>
        <span class="help-block">
                <span class="field-validation-valid" data-valmsg-for="cmbTipoDonacion" data-valmsg-replace="true"></span>
        </span>
</div> 

[mcintyre321]

So if you want the id, (I think) you have to edit https://github.com/mcintyre321/FormFactory/blob/master/FormFactory/Views/Shared/FormFactory/Property.System.String.cshtml#L34 and add id="@Model.Id" to the select.

You can override the cshtml file yourself, or you can fork the project, update the code, test the two Example projects and send me PR and I will update the nuge tpackages.

[mcintyre321]

Out of interest, why have you not used a viewmodel class and used the reflection based FF.PropertiesFor method? Are the fields data driven?

[ivansoriabia]

My idea is to receive a list with the controls from DB, so then I will have to create them dynamically. Now I'm testing without getting the controls list from DB, so I have to create the PropertyVM like the comment I have posted above.

Don't worry about the ID's, I'm using instead the name attribute for my JQuery code.

[ivansoriabia]

Finally I have used JQuery to add Boostrap classes on my dynamically created properties. So I close this issue.

[mcintyre321]

You can do it server side also by putting the html through CsQuery. Hope you're getting on well with FF!