动态表中每个按钮的Jquery-Ui对话框表单

Question

我正在生成一个 HTML 表格，其中每行都有一个按钮，必须打开一个 Jquery ui 对话框表单。

//The table
<table class="table table-reporting table-condensed table-striped" id="tableoperator">   
    <tbody>
        @for (int h = 0; h < Model.ToList().Count; h++)
        {
            <tr>                      
                <td class="hidden-phone hidden-tablet">
                    <button class="update" id="@Model.ElementAt(h).id">Update</button>
                </td>
            </tr>
        }
    </tbody>
</table> 

//The dialog form
<div id="dialog-form" title="Update Ticket" >
<form>
    <fieldset>
        <label for="state">State</label>
        <input type="text" name="state" id="state" class="text ui-widget-content ui-corner-all">
        <label for="note">Note</label>
        <input type="text" name="note" id="note" class="text ui-widget-content ui-corner-all">
        <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
</form>

<script>
        $(function () {
            var dialog,
              state = $("#state").val(),
              note = $("#note").val(), 
              id = id of button Update??
              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) {
                            $(this).dialog("close");
                                }
                            });
                    },
                     "Cancel": function () {
                         $(this).dialog("close");
                     }}
            });

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

但问题是在TicketController 的Update 动作中，参数state 和node 都是空的。我能做些什么？以及如何设置按钮更新的 id = id？

//////// 编辑：这是正确的代码（由@Igor 建议）

<script>
    $(function () {
        var state = $("#state").val(),
          note = $("#note").val(),
          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': $(this).data("idt"), 'state': $("#note").val(), 'note': $("#note").val() },
                        cache: false,
                        dataType: "json",
                        success: function (data) {
                        $(this).dialog("close");
                            }
                        });
                },
                 "Cancel": function () {
                     $(this).dialog("close");
                 }}
        });

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

Answer 1

1.在打开对话框之前将点击按钮的id存储在dialog数据属性中。

2.在“确定”点击中检索要发送的值。

  "Ok": function () {
    var id = dialog.data("buttonid");
    var state = $("#state").val();
    var note = $("#note").val(); 
    $.ajax({
      ...

$(".update").button().on("click", function () {
  dialog.data("buttonid", this.id);
  dialog.dialog("open");
});