0

Estoy usando net 6 con MVC en c#, El problema que tengo, es en la vista html, luego de recorrer el modelo de datos con un foreach y colocar un boton con un evento el recibe como parametro una lista de string a una funcion de javascript que inserte componentes html dentro de un div.

Cuando inspecciono el codigo generado luego de apretar el boton, veo que el evento onclick del boton se armo de la siguiente manera:

 <div>
        <button onclik="SowFiles(["file1","file2"])">Show Files</button>
 </div>

lo cual rompe el componente html por las dobles comillas, intente reemplazarlas por comillas simples, pero no funciono, ¿ Como se le puede pasar una lista de string a una funcion de javascript ?

Gracias


El modelo de datos

public class NodeFile
    {
        public int Id { get; set; }
        public string NodeName{ get; set; }
        public List<string> fileNames { get; set; }
    }

controlador de la vista:

public IActionResult Index()
{
            List<NodeFile> lstFilesNodes = new List<NodeFile>();
            lstFilesNodes.Add(new NodeFile { Id = 1, NodeName = "nodo1" });
            lstFilesNodes.ForEach(node => { node.fileNames = new List<string> { "file1", 
                                                                         "file2" }; });
            return View(lstFilesNodes);
}

El codigo completo de la vista es el siguiente

@model List<NodeFile>
@{
    ViewData["Title"] = "Home Page";
}

@foreach (var item in Model)
{
    var auxParameter = @Html.Raw(Json.Serialize(item.fileNames));
   
    <div>
        
        <button onclik="SowFiles(@auxParameter)">Show Files</button>
    </div>
}

<div id="filesNamesDiv">
</div>

@section Scripts
    {
    <script>
        $(document).ready(function () {

            function SowFiles(fileNames) {
                alert("si")
                for (var i = 0; i < fileNames.lenght;i++) {
                    $("filesNamesDiv").append("<div>imagen</div>")
                } 
            }
        })
    </script>
}

1 respuesta 1

0

No te funcionó, porque adicionalmente tienes otros errores

1.- las comillas

Cambiar esto ="SowFiles(@auxParameter)"

Por esto ='SowFiles(@auxParameter)'


2.- Es onclick con CK final, no onclik como lo tienes tu

Cambiar esto

<button onclik="SowFiles(@auxParameter)">Show Files</button>

Por esto

<button onclick='SowFiles(@auxParameter)'>Show Files</button>

3.- La función SowFiles no está dentro del ámbito adecuado

La función SowFiles solo existe dentro de la función anónima que es pasada como argumento en la función ready más información en esta otra respuesta. No obstante, tu no necesistas llamar a la función SowFiles cuando se carga el documento, así que tiene aún menos sentido

Debes cambiar esto:

$(document).ready(function () {

    function SowFiles(fileNames) {
        alert("si")
        for (var i = 0; i < fileNames.lenght;i++) {
            $("filesNamesDiv").append("<div>imagen</div>")
        } 
    }
})

Por esto

function SowFiles(fileNames) {
 alert("si")
 for (var i = 0; i < fileNames.lenght;i++) {
    $("filesNamesDiv").append("<div>imagen</div>")
 } 
}

Código con las correcciones:

@model List<NodeFile>
@{
    ViewData["Title"] = "Home Page";
}

@foreach (var item in Model)
{
    var auxParameter = @Html.Raw(Json.Serialize(item.fileNames));
   
    <div>
        
        <button onclick='SowFiles(@auxParameter)'>Show Files</button>
    </div>
}

<div id="filesNamesDiv">
</div>

@section Scripts
    {
    <script>
       function SowFiles(fileNames) {
                alert("si")
                for (var i = 0; i < fileNames.lenght;i++) {
                    $("filesNamesDiv").append("<div>imagen</div>")
                } 
            }
    </script>
}

1
  • Efectivamente fue por la motivos que mencionaste, realice 3 correciiones y funciono, algo que tmb estaba mal es en la seccion del javascript $("#filesNamesDiv") faltaba el # , y la palabra fileNames.lenght del for estaba mal escrita tambien fileNames.length. Con todas esas correcciones al funciono, habia varias errores que por consola no me los indicaba y se me pasaban por alto, gracias Commented el 30 jul. 2023 a las 11:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.