tablas - Pase el modelo C#de la vista a Javascript

recorrer tabla javascript

Question

Paso este ViewModel a mi Vista:

 public class DashboardViewModel
{
public List<UserTask> UserTasks {get; set;}
public List<WorkItem> WorkItems {get; set;}
} 

y desde dentro de View, estoy iterando a través de los WorkItems como este:

 @foreach (var item in Model.WorkItems)
{
@item.Name
@item.HoursLogged
<button value="@item">UPDATE</button>
}

Cuando hago clic en el botón, se abre una función jQuery.

Necesito pasar al elemento modal el ítem para mostrar todas las informaciones del ítem.

Esta es la función de JavaScript:

$(buttonEl).click(function () {
//code to open modal
var item = this.value;
});

El valor pasado en "this.value" no es un objeto sino una cadena con el espacio de nombres del WorkItem.

También he intentado con la función onclick en línea:

<button onclick="openModal(''@item'')">UPDATE</button>

pero con el mismo resultado

¿Alguna idea?

Answer 1

¡Normalmente uso esto para traducir de MVC a javascript!

@Html.Raw(Json.Encode(item))

Answer 2

@item in View imprimirá el elemento como una cadena normal (item.ToString ()). Creo que lo que quieres es analizar la cadena como un objeto Javascript, ¿verdad?

Un enfoque es implementar un método en su modelo, como JSON.stringify (). El método puede analizar el modelo C # a la cadena JSON:

{
"Name" : "Scott",
"HoursLogged" : "2"
}

Luego puede analizar la cadena del objeto JSON en la vista utilizando JSON.parse (). En este caso, puede usar el objeto JSON. Algunos pensamientos:

DO#:

public class Item
{
public string Name { get; set; }
public int HoursLogged { get; set; }
public string ToJsonString()
{
return "{" + "/"Name/":" + Name + ",HoursLogged:" + HoursLogged + "}";
}
}

JS:

var jsonStr = ''@item.ToJsonString()'';
var jsonObj = JSON.parse(jsonStr);
console.log(jsonObj.Name);
console.log(jsonObj.HoursLogged);

También puede usar Newton para stringify el modelo de C #.

Answer 3

Debe almacenar los datos que usa para realizar un bucle a una variable de JavaScript y consultarlos cuando se hace clic en el botón. Mantenga un identificador único en el atributo de datos de su botón que puede usar para consultar más adelante. Como es una matriz, simplemente puede usar una variable de contador que coincida con el índice de matriz (js).

@{ var counter = 0;}
@foreach (var item in Model.WorkItems)
{
@item.Name
<button class="updateBtns" data-index="@counter">UPDATE</button>
counter++;
}

y en la misma vista de afeitar, tenga este javascript donde serializará la colección Model.WorkItems a una matriz javascript y la almacenará en una variable.

<script>
$(function() {
var dataArr = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.WorkItems));
$(".updateBtns").click(function (e) {
e.preventDefault();
var selectedItem = dataArr[$(this).data("index")];
console.log(selectedItem);
});
});
</script>

Answer 4

Probablemente deberías retroceder unos pasos para entender qué está pasando aquí. Una solicitud web es en realidad un montón de cadenas, MVC .net hace algunas cosas para probar y facilitar la transición del uso de objetos a cadenas simples, pero como puede ver, no puede hacer todo. De modo que lo que se lleva es que trate las cosas como si fueran todas cadenas cuando se procesan en la página.

Dicho esto, hay varias maneras de resolver este problema. Como se mencionó anteriormente, puede convertir todos sus objetos WorkItem a objetos javascript y sacarlos de la matriz javascript. O lo que personalmente me gusta es simplemente hacer que el botón contenga la identificación del objeto y hacer una llamada ajax para obtener los datos más recientes del servidor.

Back end:

[HttpPost]
public string GetWorkItemById(int id)
{
//get or create WorkItem here
WorkItem workItem = new WorkItem(id);
workItem.Name = "Foobar";
workItem.HoursLogged = "127001";
return Newtonsoft.Json.JsonConvert.SerializeObject(workItem);
}

Interfaz:

 $(buttonEl).click(function () {
var id = this.value; //assuming you store the id in the button''s value
$.ajax({
type: "POST",
url: "@(Url.Action("GetWorkItemById"))",
data: ({
Id:id
}),
success: success,
dataType: dataType,
success: function(result){
var name = result.Name; // Foobar
var hoursLogged = result.HoursLogged; // 127001
//populate text fields using jquery
}
})
});