動態表中每個按鈕的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>

但是問題在於，在“票證控制器更新”操作中，參數狀態和節點為空。 我能做什么？ 以及如何設置按鈕更新的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）單擊中發送的值。

  "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");
});