Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

MVC Actionlink & Bootstrap Modal Submit

I'm developing an MVC 5 web application. Within one of my Razor Views I have a table which spits outs several rows of data. Beside each row of data is a Delete button. When the user clicks the delete button I want to have the Bootstrap Modal popup and ask the user to confirm their deletion.

@foreach (var item in Model.Data) {
<tr>
 <td>...</td>
 <td>@Html.ActionLink("Delete", "Delete", new { id = item.ID }, new { @class = "btn btn-danger btn-xs", data_toggle = "modal", data_target = "#myModal" })</td>
</tr>
}

As it is, when the user clicks the Delete button the Modal pops up fine, but I can't seem to get the ID in the Actionlink parameter to pass to the Confirm button within my Modal so that it will then be sent to the delete action in my controller.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             <h4 class="modal-title" id="myModalLabel">Delete Nomination</h4>
         </div>
         <div class="modal-body">
           Are you sure you wish to delete this nomination?
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
           <button type="button" id="mySubmit" class="btn btn-primary">Confirm</button>
         </div>
       </div>
      </div>
</div>

Can anyone please help?

Thanks.

like image 608
tcode Avatar asked May 23 '14 14:05

tcode


People also ask

What is ActionLink in MVC?

ActionLink creates a hyperlink on a view page and the user clicks it to navigate to a new URL. It does not link to a view directly, rather it links to a controller's action. Here are some samples of Html.

What is ActionLink in C#?

ActionLink(HtmlHelper, String, String, Object, Object)Returns an anchor element (a element) for the specified link text, action, route values, and HTML attributes. C# Copy.

How can we call post method using ActionLink in MVC?

ActionLink is rendered as an HTML Anchor Tag (HyperLink) and hence it produces a GET request to the Controller's Action method which cannot be used to submit (post) Form in ASP.Net MVC 5 Razor. Hence in order to submit (post) Form using @Html. ActionLink, a jQuery Click event handler is assigned and when the @Html.


1 Answers

<script type="text/javascript">

    //Everytime we press delete in the table row
    $('.delete').click(function(e) {
        e.preventDefault();

        //Update the item to delete id so our model knows which one to delete
        var id = $(this).data('id');
        $('#item-to-delete').val(id);

    });


    //Everytime we press sumbit on the modal form...
    $('#mySubmit').click(function() {

        //Get the id to delete from the hidden field
        var id = $('#item-to-delete').val();


        //Call our delete actionresult and pass over this id
        $.post(@Url.Action("Delete", "Delete"), { id : id } , function (data) {

            alert("Deleted");

        });


    });

</script>

and your html...

@Html.Hidden("item-to-delete", "", new { @id = "item-to-delete"})
@foreach (var item in Model.Data) {
<tr>
    <td>...</td>

    <td><a href="" class="btn btn-danger btn-xs delete" data-toggle= "modal" data-target="#myModal" data-id="@item.id">Delete</a></td>

</tr>
}

Your controller action I assume is something like this...

public ActionResult Delete(Guid id)
{


}
like image 148
heymega Avatar answered Sep 21 '22 20:09

heymega