jQuery AJAX take value from a list and pass it to an object

I have the following @Html.DisplayFor, How could I do to take the ID and pass it to an AJAX object?

      @Html.DisplayFor(modelItem => item.Regla, new { id = "reglaid" })  

       <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input id="botonformularios" type="submit" value="Create" class="btn btn-default"  />
        </div>
    </div>

I tried with the following lines but when I pass it to the controller it shows me as null:

 $("#botonformularios").click(function () {
     var obj = {               
         Rid:$("#reglaid").children("input").val(),
         Result: $("#result").parents().children("input").val(),                        
      }
      $.ajax({
          type: 'POST',
          contentType: false,
          url: "/ZsvalWorkflow/Create",
          dataType: 'json',
          contentType: "application/json; charset=utf-8",
          data: JSON.stringify(obj),
          success: function (data) {
              alert(data)
          },
      });
  })

enter the description of the image here

 1
Author: Carlos Muñoz, 2016-01-19

3 answers

DisplayFor generates html based on the properties of an object (usually it's several div if it's a class and an element if it's a value) but in your case I imagine you just want to take the value of a single property and print it.

In those cases what is generated in the html is an element of type text so the solution in your case is to write a div around it and assign it an id or other type se selector to be able to identify it and select it with jQuery. Your code would look like this:

<div id="reglaid">
    @Html.DisplayFor(modelItem => item.Regla.Rid)
</div>

<div class="form-group">
     <div class="col-md-offset-2 col-md-10">
         <input id="botonformularios" type="submit" value="Create" class="btn btn-default"  />
     </div>
</div>

And then in your script you locate it by the id

$("#botonformularios").click(function () {
     var obj = {               
         Rid:$("#reglaid").text(),
         // Resto del código
})

Note that if you use razor in your script you are obliged to always keep it inside the cshtml so in my answer I recommend using this variant. Using jquery you can move your script smoothly to a separate file the moment your code starts to grow.

 2
Author: devconcept, 2016-01-19 22:09:27

What you should determine is how the displayfor () renders in html, remember that this is based on template to determine the result in the browser. You could use the Developer Tools (accessing with F12) to inspect the page and determine which tag it generates.

Once you determine the tag you could apply the jQuery selector to retrieve the value.

If you render to a div or span, in jquery you would use the .html () , i.e.

var regla = $("reglaid").html();
 0
Author: Leandro Tuttini, 2016-01-19 16:05:09

In your code you are not assigning the value of obj.Id this is why it gets as 0 to the action

Assuming that in the model you have the Id as the Model property and that the javascript code is inside a Razor View:

$("#botonformularios").click(function () {
    var obj = {
        Id: @Model.Id, // o el valor que necesites              
        Rid:$("#reglaid").children("input").val(),
        Result: $("#result").parents().children("input").val(),                        
    }
    $.ajax({
        type: 'POST',
        contentType: false,
        url: "/ZsvalWorkflow/Create",
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(obj),
        success: function (data) {
            alert(data)
        },
    });
})
 0
Author: Carlos Muñoz, 2016-01-19 17:52:27