Question

我有一个设备列表，每行包含一个删除按钮。单击删除按钮，我需要弹出一个对话框以获取删除的原因，然后单击确定，提交带有deivce Id的父表单。 cshtml看起来像

foreach(var device in (Collection<Device>)ViewBag.Devices)
{
<tr>
<td> device.Name </td>
<td> device.Description </td>
<td>
    @using (Html.BeginForm("delete", "Devices", new {id="delete-device-form"}))
                      {
                          <input type="hidden" name="deviceId" id="deviceId" value="@device.Id" />
                          <input type="hidden" name="selectedAssignStatus" id="selectedAssignStatus" value="" />
                          <input type="hidden" name="selectedreason" id="selectedreason" value="" />
                          @Html.HttpMethodOverride(HttpVerbs.Delete)
                          <button type="button" name ="btnDelete" id="btnDelete" value="@device.Id" class="unassign"> Delete</button>

                          <div id="dialog-message" title="Provide a Reason for Unassignment" class="hide">
                              <ul>
                                  <li>
                                      <span>
                                          @Html.DropDownList("DeviceAssignmentStatuses", null, string.Empty, new {style = "width: 250px;"})
                                          @Html.Label("Device Assignment Status")
                                      </span>
                                  </li>
                                  <li>
                                      <span>  
                                          <label>
                                              Select a reason for unassignment</label>
                                      </span>
                                      <span>
                                          <textarea id="reason" cols="30" rows="3"></textarea>
                                      </span>
                                  </li>
                              </ul>   
                          </div>
                      }
</td>
</tr>
}

我的jquery看起来像这样

$(".unassign").button().click(function () {
    $("#dialog-message").dialog({
        modal: true,
        width: 350,
        buttons: {
            OK: function () {
                alert($(this).val());
                var $form = $(this).closest("form"); //not working
                $form.submit();
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });
});

我需要帮助在OK：function（）中找到按钮的正确父级，以便我可以在提交时获得deviceId的正确隐藏fld值。任何帮助赞赏。谢谢，

Answer 1

 var $form = $(this).parents("form"); //this probably will not work too

以及它不起作用的原因是因为dialog-box $(this)内部没有引用按钮，它指的是对话框，请尝试以下

$(".unassign").button().click(function () {
      $btnThis = $(this);
    $("#dialog-message").dialog({
        modal: true,
        width: 350,
        buttons: {
            OK: function () {
                alert($(this).val());
                var $form = $btnThis.closest("form"); //not working
                $form.submit();
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });
});

Answer 2

抱歉复制并粘贴3nigma。我会评论说推杆 $ btn这作为OK：函数中的参数遮蔽了第一个定义。试试这个：

$(".unassign").button().click(function () {
  $btnThis = $(this);
$("#dialog-message").dialog({
    modal: true,
    width: 350,
    buttons: {
        OK: function () {
            alert($(this).val());
            var $form = $btnThis.closest("form"); // works in fiddle
            $form.submit();
            $(this).dialog("close");
        },
        Cancel: function () {
            $(this).dialog("close");
        }
    }
});

}）;

Answer 3

$("#DeviceAssignmentStatuses").change(function () {
    $("#selectedAssignStatus").val($(this).val());
});

$("#reason").change(function () {
    $("#selectedreason").val($(this).val());
});

$(".unassign").button().click(function () {
    var btnThis = $(this);
    $("#dialog-message").dialog({
        modal: true,
        width: 350,
        buttons: {
            OK: function () {
                alert($("#selectedAssignStatus").val());
                alert($("#selectedreason").val());
                var $form = $(btnThis).closest("form");
                $($form.find("selectedAssignStatus")).val($("#selectedAssignStatus").val());
                $($form.find("selectedreason")).val($("#selectedreason").val());
                $form.submit();
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });
});

在List中查找按钮的父窗体

3 个答案: