Question

I’ve read that you shouldn’t use a link for deletes. How do I change this to a button instead?

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

edit
@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

You can use anchor tag also to delete using httppost verb. you can add $.post(this.href); return false; attribute to anchor tag. More can be read 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" })