Insert checkbox dynamically by returning Json does not display Text?

Question

I’m creating a list of Checkbox according to the selection of a Select on the same screen. No event change of select is called via ajax javascript, the method that returns a Json with list(value, text) and going through this list I would dynamically create my Checkbox.

Problem: The Checkbox appear but are without Text on the screen. despite HTML begotten to be right in my view.

Code:

Method that returns Json:

SelectList lista = new SelectList(string.Empty, "SearchParameterId", "Name");
if (specificationId > 0)
{
   lista = new SelectList(db.SearchParameters
          .Include(s => s.Specification)
          .Where(sp => sp.Specification.SpecificationId == specificationId
             && sp.isActive == 1).AsEnumerable(), "SearchParameterId", "Name");
}
return Json(lista);

Javascript of View:

$("#SpecificationId").change(function () {
        $("#ParamsCheckboxes").empty();
        $.ajax({
            type: 'POST',
            url: '/DropdownCascade/GetSearchParametersBySpecification', 
            dataType: 'json',
            data: { id: $("#SpecificationId").val() },
            success: function (categories) {
                $.each(categories, function (i, category) {             

                    alert(category.Text);
                    alert(i);

                    var br = document.createElement('br');                      

                    var input = document.createElement('input');
                    input.type = 'checkbox';
                    input.name = category.Text;
                    input.id = category.Value;
                    input.value = category.Text;
                    input.textContent = category.Text;

                    document.getElementById("ParamsCheckboxes").appendChild(input);
                    document.getElementById("ParamsCheckboxes").appendChild(br);

                });
            },
            error: function (ex) {
                alert('Falha ao carregar as categorias N3.' + ex);
            }
        });
        return false;
    });

finally the dropdownlist and then the div I try to create the checkboxes inside:

<div class="form-group">
    @Html.LabelFor(model => model.Specification, 
          htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-6">
        @Html.DropDownList("SpecificationId", 
             new SelectList(string.Empty, "Value", "Text"), 
               "Selecione a Sub-Categoria", 
               htmlAttributes: new { @id = "SpecificationId", @class = "form-control" })
    </div>
</div>
<!-- START CHECKBOXES-->
<div class="form-group">
    <div class="col-md-2">
        Detalhes Técnicos:      
        <div id="ParamsCheckboxes">

        </div>      
    </div>
</div>
<!-- END CHECKBOXES-->

It returns to the screen the data, I put one alert before var checkBox = document.createElement('checkbox') with Category. Text and it shows all values, it just does not create the Checkbox.

Example of HTML generated:

<div id="ParamsCheckboxes">
   <input type="checkbox" name="1tb" id="2" value="1tb" style="color: black;"></input>
   <br>
   <input type="checkbox" name="5tb" id="3" value="5tb"></input>
   <br>
   <input type="checkbox" name="20tb" id="4" value="20tb"></input>
  <br>
</div>

The style was on my own, but that’s it. Any idea?

Answer 1

Follow a code that I generated that can help you, dynamically generating Checkbox in MVC using Jquery, I hope it helps.

$(function(){



        $('#Categoria').change(function(){


                $.ajax({
                    url: '@Url.RouteUrl(new{ action="GetSubCategoria", controller="Home"})',
                    data: {"Categoria": $('#Categoria').val()},
                        type: 'GET',
                        dataType: 'json',
                        success: function(resp) {
                        $.each(resp,function(key,value)
                        {
                           var newChk = "<input type='checkbox' name='SubCategoria' value='"+resp[key].SubCategoriaID+"' />" +resp[key].Nome + "<br />";
                           $("#ParamsCheckboxes").append(newChk);

                        });

                }, error:function(index, e, error){
                      alert(error);
    }});

        });

    });

Follow the full example on dotnet fiddle.

https://dotnetfiddle.net/cJmxBT

Answer 2

What you are developing is not the best solution, the best solution and make the Framework be responsible in the generation of this html (code snippet), but first I created a minimal example what the creation in the format of its initial idea:

Minimal example:

function createDiv(id)
{
  var div = document.createElement('div');
  return div;
}
function createLabel(content, forId = '')
{
	var label = document.createElement('label');
  if (forId != '') label.setAttribute("for",forId);
  label.innerHTML = content;
  return label;
}
function createInput(type, name, id, value)
{
  var input = document.createElement('input');  
  input.type = type;
  input.name = name;
  input.id = id;
  input.value = value;    
  return input;
}

var divInput = document.getElementById("ParamsCheckboxes");

var d1 = createDiv('div1');
var l1 = createLabel('Valor 1', 'name1');
var i1 = createInput('checkbox', 'name1', 'name1', '1');
d1.appendChild(i1);
d1.appendChild(l1);


var d2 = createDiv('div1');
var l2 = createLabel('Valor 2', 'name2');
var i2 = createInput('checkbox', 'name2', 'name2', '2');
d2.appendChild(i2);
d2.appendChild(l2);


divInput.appendChild(d1);
divInput.appendChild(d2);

<div id="ParamsCheckboxes">      
</div>

that would be the way you wanted it, from what I could perceive in your question, but, there is how it was said a better way to do something about the selection of a select and the generation of a part of HTML (part, stretch) up-to-date.

---

Example:

The proposed idea would be selection by level, and filtering the creation of elements html dynamic:

Model ():

public class Item
{
    public Item(string name, int value, int nivel)
    {
        Name = name;
        Value = value;
        Nivel = nivel;
    }
    public string Name { get; set; }
    public int Value { get; set; }
    public int Nivel { get; set; }
}

public class Items : List<Item> 
{
    public Items()
    {
        Add(new Item("Seleção 1 - 1", 1, 1));
        Add(new Item("Seleção 2 - 1", 2, 1));
        Add(new Item("Seleção 3 - 2", 3, 2));
        Add(new Item("Seleção 4 - 2", 4, 2));
        Add(new Item("Seleção 5 - 2", 5, 2));
    }
}

are two classes that will make part of the example, one is the model and the other is the list of that model so that it can be filtered by the property Nivel (the data may come from a query in your database, or from a ORM, etc..).

In the Controller instead of returning a json I will return a piece of html (one Partialviewresult) by the name of _checkBox as in the code below:

Controller:

public class HomeController : Controller
{
    private Items _items;
    public HomeController()
    {
        _items = new Items();
    }       

    [HttpGet()]
    public ActionResult Select()
    {
        return View();
    }

    [HttpPost()]
    public PartialViewResult Select(int? id)
    {
        List<Item> model = _items
                          .Where(c => c.Nivel == id.Value)
                          .ToList();

        //retornando um PartialVew com modelo tipado
        return PartialView("_checkBox", model);
    }
}

To View _checkBox was created to facilitate in the assembly part of your screen, and your html possesses:

@model IEnumerable<Models.Item>
@foreach (var item in Model)
{
    <div>
        <label>
            @Html.CheckBox(item.Name, new { value = @item.Value }) @item.Name
        </label>
    </div>
}

responsible for the creation of the filter result obtained in the selection of the input select.

To View leading would have some modifications:

@{ Layout = null; }

<!DOCTYPE html>   
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Select</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
</head>
<body>
    <div> 
        <select id="select1">
            <option>Escolha a seleção</option>
            <option value="1">Nive 1</option>
            <option value="2">Nive 2</option>
        </select>
        <div id="check1">

        </div>
    </div>
    <script>
        $(document).ready(function () {
            $("#select1").change(function (e) {
                var _id = $(this).val();
                $("#check1").html('');
                if (_id != '') {
                    $.post("@Url.Action("Select")", { id: _id }, function (data) {
                        $("#check1").html(data);
                    }, 'html');
                }                                     
            });
        });
    </script>
</body>
</html>

The select1 responsible for the filter has two levels and when chosen level 1, will be called via ajax the excerpt from that html (_checkBox) instead of the json. In the .change of select was used $.post and configured your return to html. Ready with these changes the list is mounted dynamically if problems, facilitating the changes, adding css, behavior, etc.

_References:

• Document.createelement()
• Class Partialviewresult
• Partialviewresult in ASP.NET MVC controller
• jQuery.post
• HTML5 Tutorial