How to represent this html code with razor helpers

Question

How to represent this html code with razor helpers

Navigation

#1 by (1 votes)

1

I have the following HTML code:

 <div class="form-row">
    <div class="form-group col-md-12">
       <label class="form-label">Tipo de dirección</label>
       <div class="form-inline">
          <label class="custom-control custom-radio">
             <input name="radio-direccion" value="local" type="radio" checked="checked" class="custom-control-input">
             <span class="custom-control-label">Local &nbsp;&nbsp;</span>
          </label>
          <label class="custom-control custom-radio">
             <input name="radio-direccion" value="foranea" type="radio" class="custom-control-input">
             <span class="custom-control-label">Foránea</span>
          </label>
       </div>
    </div>
 </div>
 <script type="text/javascript">
    window._getTipoDirUrl = '@Url.Action("Action", "Controller")';
 </script>

Also a ViewModel class that among other properties contains this:

public class DireccionViewModel
{
    ...
    [Display(Name = "Tipo dirección")]
    public string TipoDir {get; set;}
    ...
}

And a javascript code where I made an action based on the selected radio button:

 $("[name=radio-direccion]").on('change', function () {
    var $radio = $(this);
    $.ajax({
       url: window._getTipoDirUrl,
       data: { tipodir: $radio.val() },
       success: function (data) {
          $("#direccion").html(data);
       }
    });
 });

I need to represent the radio inputs with @ Html.CheckBoxFor () so that when the binding is done the property TypeDir is valid local or foreign (or some similar way so that in the controller I know which option has been selected) and also that the javascript code works correctly.

javascript c# asp.net-mvc razor

asked by Carlos 23.11.2018 в 11:32

source

1 answer

Collection Set constructor how can I substitute a date using compile_obj.subn?

score 1 · Accepted Answer

I will assume that the class DireccionViewModel is also the viewmodel of the razor view, that is to say that at the beginning of the view there is a directive @model DireccionViewModel . So we will modify that viewmodel to do what you want.

@ Html.RadioButtonFor ()

I imagine you want to convert that html code and use the razor helper Html.RadioButtonFor instead of CheckBoxFor because if you use check boxes you would be allowing multiple types of address and it is contradictory that it is local and also foreign.

Html.RadioButtonFor is the helper that renders a radio button with the parameters that we passed to it. The theme with this helper is that it only renders a radio button - which is not very helpful if you use it alone. That's why what you usually do is render two or more.

The ViewModel

In your viewmodel you must have all the information you need in the view. In this case for radio buttons we need two values. Local and Foreign

Add to the viewmodel a list that we will use to render the radio buttons in the view:

public class DireccionViewModel
{
    ...
    [Display(Name = "Tipo dirección")]
    public string TipoDir {get; set;}
    ...

    //las opciones de los radio buttons
    public IEnumerable<string> DirOptions { get; set; } = new List<string> {"foránea", "local"};
}

The view

In the view what we do is iterate the list of options we have in the viewmodel and call RadioButtonFor for each element. Having it in a list has the advantage that if you then need to add other options you just have to add an item to the list.

To render the radios and link it to your property TipoDir we do something like this:

@foreach (var opt in Model.DirOptions)
{
    <div class="radio">
        <label class="radio-inline">
            @Html.RadioButtonFor(x => x.TipoDir, opt, new { @class = "form-control" }) @opt
        </label>
    </div>
}

What we are doing is calling the helper always using the same property of the viewmodel to which we want to link the selection ( TipoDir ) with the possible radio options.

The javascript code

The part of the javascript code I do not know exactly what it does but it seems some request ajax alserver sending the info that you have in the form. You should make sure it still works after these changes. For now the only thing I know that you will have to change is the name by which you look for the radio button that changes in the script:

<script>

    //fijate que ahora el radio button se llama TipoDir. Igual que la property del viewmodel.         
    $("[name=TipoDir]").on('change', function () {
        // tu codigo acá
    });

</script>

I hope it serves you.