Passing data from jQueryUI dialog form to controller

Question

I'm new with ASP.NET/Javascript and I'm having a little trouble with the implementation of simple CRUD operations using jQueryUI dialog form. This is my code:

<button class="update" id="@Model.id">Update</button>
<div id="dialog-form" title="Update">
  <form>
    <fieldset>
      <input type="text" name="state" id="state">
      <input type="text" name="note" id="note">
      <input type="submit">
    </fieldset>
  </form>
</div>

<script>
      $(function() {
          var dialog,
            state = $("#state"),
            note = $("#note"),
            id = this.id, //??
            dialog = $("#dialog-form").dialog({
              autoOpen: false,
              height: 400,
              width: 350,
              modal: true,
              buttons: {
                "Ok": function() {
                  $.ajax({
                    type: "POST",
                    url: "@Url.Action("Update","Ticket")",
                    data: {
                      id: id,
                      state: state,
                      note: note
                    },
                    cache: false,
                    dataType: "json",
                    success: function(data) {
                      $("#dialog").dialog("close");
                    }
                  });
                },
                "Cancel": function() {
                  $(this).dialog("close");
                }
              }
            });

          $(".update").button().on("click", function() {
            dialog.dialog("open");
          });
        });
</script>

Finally the Update action in TicketController:

  public ActionResult Update(String id, String state, String note)
    {
        //do some stuff
    }

However nothing happens and it doesn't get into the action. Any help is greatly appreciated

What do you mean by nothing happens ? Try run your debugger and see if you get into the Update action, or add a error to your ajax — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Mar 28, 2017 at 10:12
Your form does not include any form controls for id What are you expecting to pass to that parameter? — user3559349
– user3559349, Commented Mar 28, 2017 at 10:14
Also you have not shown what the method returns - does it return a JsonResult (you have specified dataType: "json",). And what do you want to do with the data you return - you success callback does not use the data — user3559349
– user3559349, Commented Mar 28, 2017 at 10:23

Curiousdev · Accepted Answer · 2017-03-28 10:18:38Z

2

change your data as below you need to pass value rather than the object by using .val()

state = $("#state").val(),
note = $("#note").val(),
id = "Pass anything you wants"

data: { 'id':id,'state':state,'note':note },

Decorate your action method with [HttpPost]

[HttpPost]
public ActionResult Update(String id, String state, String note)
{
}

answered Mar 28, 2017 at 10:18

Curiousdev

5,7983 gold badges26 silver badges39 bronze badges

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

3 Comments

ab_mundi Over a year ago

I've opened a new question (stackoverflow.com/questions/43071012/…). Your answer is the answer for this question :)

Curiousdev Over a year ago

Ooops i'm late btw you got your answer no?

ab_mundi Over a year ago

Yep ty! (#random words to fill space)

Collectives™ on Stack Overflow

Passing data from jQueryUI dialog form to controller

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related