将 Delete ActionLink 更改为按钮

Question

我了解到您不应该使用链接进行删除。如何将其更改为按钮？

 @Html.ActionLink("Delete", "Delete", new { id = Model.ListOfRecipients[i].RecipientId,applicationId=Model.ApplicationId },  new { @class = "button delete_recipient" }) 

编辑 @using (Html.BeginForm()) {

        <div id='added_recipients'>

          <table class='header'>
            <tr>
                @if (Model.ListOfRecipients != null)
                {
                <td class='recipient-title'>
                    @if (Model.ListOfRecipients.Count == 1) {@Model.ListOfRecipients.Count.ToString() <span>Recipient</span>}
                    @if (Model.ListOfRecipients.Count > 1)  {@Model.ListOfRecipients.Count.ToString() <span>Recipients</span>}

                </td>
                <td class='express'>
                  Express
                </td>
                <td class='quantity'>
                  Quantity
                </td>
                <td class='action'>
                </td>
                }
            </tr>
          </table>


            @if (Model.ListOfRecipients != null)
            {
                for (int i = 0; i < Model.ListOfRecipients.Count; i++)
                { 

                <div class='recipient-wrapper'>
                    <div class='decision_block'>
                        <table class='recipient'>
                            <tr>
                                <td class='recipient-title'>
                                    @Html.HiddenFor(model=>model.ListOfRecipients[i].RecipientId)
                                    <h3>
                                    @if(Model.ListOfRecipients[i].RecipientTypeId==1)
                                    {
                                        @Html.DisplayTextFor(model => model.ListOfRecipients[i].MedicalLicensingAuthorityName) 
                                        @Html.HiddenFor(model => model.ListOfRecipients[i].MedicalLicensingAuthorityName)                           
                                     }
                                    else
                                    {
                                        @Html.DisplayTextFor(model => model.ListOfRecipients[i].RecipientName) 
                                        @Html.HiddenFor(model => model.ListOfRecipients[i].RecipientName)
                                    }
                                    </h3>
                                    <div class='delivery-type'>
                                        Delivery Type: @Html.DisplayTextFor(model => model.ListOfRecipients[i].DeliveryType)
                                                       @Html.HiddenFor(model => model.ListOfRecipients[i].DeliveryType)
                                    </div>
                                </td>
                                <td class='na express'>
                                    @Html.CheckBoxFor(model => model.ListOfRecipients[i].ExpressIndicator)
                                    @Html.HiddenFor(model => model.ListOfRecipients[i].ExpressIndicator)
                                </td>
                                <td class='quantity'>
                                    <h3>
                                      Qty @Html.DisplayTextFor(model => model.ListOfRecipients[i].Quantity)
                                          @Html.HiddenFor(model => model.ListOfRecipients[i].Quantity)
                                    </h3>
                                </td>
                                <td class='action'>
                                    <input class='button edit_recipient' type='button' value='Edit' />

                                   @* <input class='button delete_recipient' type='button' value='Delete' />*@


                                @Html.ActionLink("Delete", 
                                                 "Delete", 
                                                  new { id = Model.ListOfRecipients[i].RecipientId,applicationId=Model.ApplicationId },  
                                                  new { @class = "button delete_recipient",onlick = "$.post(this.href); return false;" }) 


                                </td>
                            </tr>
                        </table>
                        <div class='recipient_editable'>
                            <br />
                            <hr />


                            <br />
                            <input class='button update_recipient' type='button' value='Update' />
                            <a class='button cancel_update' href='#'>Cancel</a>
                        </div>
                    </div>
                </div>

                }
            }


        </div>

        <input class='button' type='submit' value='Continue' />

        }

Answer 1

我了解到您不应该使用链接进行删除。

没错。

如何将其改为按钮？

使用带有提交按钮的表单，该按钮将POST 发送到Delete 控制器操作：

@using (Html.BeginForm("Delete", null, new { id = Model.ListOfRecipients[i].RecipientId, applicationId = Model.ApplicationId }, FormMethod.Post))
{
   <button type="submit" class="button delete_recipient">Delete</button>
}

并模拟 DELETE HTTP 动词（因为标准 HTML 表单不支持 DELETE）：

@using (Html.BeginForm("Delete", null, new { id = Model.ListOfRecipients[i].RecipientId, applicationId = Model.ApplicationId }, FormMethod.Post))
{
   @Html.HttpMethodOverride(HttpVerbs.Delete)
   <button type="submit" class="button delete_recipient">Delete</button>
}

然后使用 HttpDelete 属性装饰您的 Delete 控制器操作：

[HttpDelete]
public ActionResult Delete(int id, int applicationId)
{
    ...
}

---

更新：

现在您已经发布了您的真实代码，您似乎已经在 for 循环之外拥有了一个 HTML 表单。由于无法嵌套表单，因此此解决方案将不起作用。所以一种可能性是使用 AJAX：

@Ajax.ActionLink(
    "Delete", 
    "Delete", 
    new { 
         id = Model.ListOfRecipients[i].RecipientId,
         applicationId = Model.ApplicationId 
    },
    new AjaxOptions {
        HttpMethod = "DELETE",
        OnSuccess = "function() { alert('The item has been deleted'); }"
    },
    new { 
         @class = "button delete_recipient",
    }
) 

如果您不想使用 AJAX，则必须在主 Html.BeginForm 之外生成这些表单，以避免表单嵌套。

Answer 2

您也可以使用锚标记来删除使用httppost 动词。您可以将$.post(this.href); return false; 属性添加到锚标记。更多可以阅读here

    $(".delete_recipient").click(function() {
     $.post(this.href); 
     return false;
    });

@Html.ActionLink("Delete", "Delete", new { id = Model.ListOfRecipients[i].RecipientId,applicationId=Model.ApplicationId },  new { @class = "button delete_recipient" })