更改刪除動作鏈接到按鈕

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

您也可以使用錨標籤來刪除使用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" }) 

Answer 2

我讀過，你不應該使用的鏈接刪除。

這是正確的。

我該如何將它改爲按鈕？

使用形式與提交按鈕，將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動詞（因爲DELETE未在標準的HTML形式的支持）：

@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) 
{ 
    ... 
} 

---

UPDATE：

現在你已經發布您的實際代碼看來你已經有一個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之外的形式，以避免形式嵌套。