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

0

I have the following @Html.DisplayFor , how could I 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 the following lines, but when I pass it to the controller, I am listed 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)
          },
      });
  })

    
asked by Andromeda 19.01.2016 в 16:42
source

3 answers

2

DisplayFor generates html based on the properties of an object (usually they are several div if it is a class and an element if it is a value) but in your case I imagine that you only 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 text type so the solution in your case is to write a div around it and assign it an id or another type of 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
})

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

    
answered by 19.01.2016 в 21:43
0

What you should determine is how to render the DisplayFor () in html, remember that it 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 can apply the jquery selector that allows you to recover the value.

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

var regla = $("reglaid").html();
    
answered by 19.01.2016 в 17:05
0

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

Assuming that in the model you have the Id as property of the model 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)
        },
    });
})
    
answered by 19.01.2016 в 18:52