0

In my view I have the following code which is loaded with properties from an object, which display just fine when I run my project.. But, how can I access the properties of that object in Jquery? Currently what I am getting from the console.logs is undefined.

Edit: I tried adding @Html.Raw(Json.Encode(Model) to my view and I can now see every prop of the object when I hit inspect in the html, but I still can´t access em in jquery. 

 

function EditTrabajoEnColegio(li) {
    
    console.log(li); //this displays the entire li in the console.
    //From here, I get all as undefined
    console.log(this.TrabajoId); 
    console.log(li.contrato);
    console.log(li.mesIngreso);
    console.log(li.anioIngreso);
    console.log(li.esTitular);
    console.log(li.cargoColegio);
    console.log(li.sueldoBruto);
    
    }
 <li id="[email protected]" class="list-group-item" 
 onclick="EditTrabajoEnColegio(this)">
       
            @Model.MesIngresoStJohns/@Model.AnioIngresoStJohns
            -
            @(Model.AnioEgresoStJohns != null ? 
     Model.MesEgresoStJohns.ToString() + "/" + 
      Model.AnioEgresoStJohns.ToString() : "Actualidad")
            -
            @Model.SedeNombre
            Model.TipoDocenteId 
            Model.TieneContrato          
            @Model.CargoColegio
            
            @Html.HiddenFor(x => x.TrabajoId)
            @Html.HiddenFor(x => x.SedeId)
            @Html.HiddenFor(x => x.AnioEgresoStJohns)
            @Html.HiddenFor(x => x.AnioIngresoStJohns)
            @Html.HiddenFor(x => x.MesIngresoStJohns)
            @Html.HiddenFor(x => x.MesEgresoStJohns)
            @Html.HiddenFor(x => x.FechaIngreso)
            @Html.HiddenFor(x => x.FechaEgreso)
            @Html.HiddenFor(x => x.SedeNombre)
            @Html.HiddenFor(x => x.CargoColegio)
            @Html.HiddenFor(x => x.TipoDocenteId)
            @Html.HiddenFor(x => x.EsTitular)
            @Html.HiddenFor(x => x.TieneContrato)
            @Html.HiddenFor(x => x.SueldoBruto)
        
    </li>
   }

Any help will be apreciated.

Improve this question

3 Answers 3

Reset to default
3

Your requirement is not very clear in the question, however what you are doing in the javascript is wrong.

onclick="EditTrabajoEnColegio(this)"

here this refers to the li object you create with razor. Therefore in the function EditTrabajoEnColegio li object will store the li element you pass onclick event. So even though you get a result from console.log(li) (it will print the entire li object), it will not show any values to console.log(this.TrabajoId) ('TrabajoId' is not a property of the li object, it is an attribute from your Model).

Accessing Model data is also possible by,

var data = JSON.parse('@Html.Raw(Json.Encode(Model))');

you can now play with all the values from the Model with data variable just as you use a normal Json object..

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I was able to reach a similar conclution yesterday (see my own answer) but I used var data = @Html.Raw(Json.Encode(Model)); instead of JSON.parse.. is it ok or I need to use JSON parse too? and why
According to w3schools .jsonparse is the best practice. Thanks for the info.
Json.Encode() Method will convert the object to a string of the format of a Json, Html.Raw() Method will return you an unencoded string. By using JSON.parse you can convert this string in Json format to a javascript object.
1

To future readers, I was able to resolve it.

What I did was,

JSON.parse('@Html.Raw(Json.Encode(Model))');

That allowed me to pass the defined object

And in jquery

function EditTrabajoEnColegio(li) {
$("#CargoColegio").val(li.CargoColegio);
$("#SueldoBruto").val(li.SueldoBruto);
$("#AnioIngresoStJohns").val(li.AnioIngresoStJohns);
$("#MesIngresoStJohns").val(li.MesIngresoStJohns);
}

Note that the name of the parameter does not matter in jquery, it´s just something that you get from the view.

Improve this answer

Comments

0

You need to use a javascript or jquery function such as find() 

console.log(li.find("#TrabajoID").val());

Or something like :

$(li).find("ul").each(function( index ) {
    console.log(($(this).text());
 });
Improve this answer

7 Comments

I get Uncaught TypeError: li.find is not a function at EditTrabajoEnColegio (PersonaEdit.js:331) at HTMLLIElement.onclick (119d6359-540b-4327-97af-7939b6a70a3f:536)
Oh, replace li.find("#contrato") with $(li).find("#contrato")
I´m getting undefined on every case. For example, I just tried console.log($(li).find("#SedeNombre").val()); but got undefined
Oh wait, Are you even using jquery? You probably want to use the findElementByID() if not.
Yes, I am using Jquery.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.