Use ActionLink to open Modal and pass parameter in MVC

Question

I am trying to open my bootstrap modal on the same page by clicking on the ActionLink and passing a parameter as below:

@foreach (Items item in Model)
{
  @Html.ActionLink("Download", "#", new { data-id = '@item.Name' } )
}

//Modal
<div id="dModal" class="modal hide fade" aria-hidden="true">
   <div class="modal-body">
      @using (Html.BeginForm("getCSV", "Download", new { filename = data-id }, FormMethod.Post, null))
      {
        <button id="btnCSV" type="submit">Download CSV</button>
      }
      //other options for excel, word etc
   </div>
</div>

In the ActionLink I have kept actionName parameter to #, this is because the modal is on the same page and the action will be decided when the user selects the options in the modal. The reason for not calling the download action method directly is because the user has options to download in various formats excel, csv etc.

You're mixing client and server side. "#" isn't a valid controller name (you're server side) as "data-id" is not a valid property name (it's an expression to calculate data value MINUS id value, again you're server side). Replace your ActionLinks with plain links where target URL is javascript. There you'll display modal dialog and in JavaScript you'll post code. Download will start with a simple window.location.href = yourcalculatedurl — Adriano Repetti, Jan 14 '14 at 12:51

score 4 · Answer 1 · answered Apr 06 '17 at 09:02

4

This is how I show a bootstrap modal form using an html.actionlink

@Html.ActionLink("ModalPopUp", "#", new { id = parameter }, new { @data_toggle = "modal", @data_target = "#YourModalId"})

answered Apr 06 '17 at 09:02

NesNej Otto

41
3

score 2 · Answer 2 · edited May 23 '17 at 11:54

Opening a bootstrap modal dialog doesn't require you to use an ActionLink and as Adriano mentions above you're confusing client and server code.

A bootstrap modal can be manipulated using the following options as described in this question.

$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');

and in your case your code should look something like this.

@foreach (Items item in Model)
{
  <a href="javascript:void(0);" data-id="@item.Name" class="OpenDialog">Download</a>
}

$(function () {
    $(".OpenDialog").click(function (e) {
        $('#myModal').modal('show');
    });
});

In terms of passing data to the modal that's really a separate question but it is covered here.

Basically you can handle the click event and put the value in a visible or hidden field (whichever is appropriate).

So you might change the above code to something like this

$(function () {
    $(".OpenDialog").click(function (e) {
        $("#myModal #id").val($(this).data("id"));
        $("#myModal").modal('show');
    });
});

and now you have the value stored in your modal which can be accessed as required.

Maxim I did the above BUT how do I access the "@item.Name" value in the modal and feed the value in " new { filename = @item.Name } " ?? — user2906420, Jan 14 '14 at 13:08
Maxim but even with the above It will not be possible to insert the value in my html.beginform in the modal. The value can only be inserted in a text field, div etc. Is there another way ? — user2906420, Jan 14 '14 at 14:25
y como acceder a ese valor data("id") , es decir guardar el id que se esta enviando al modal en una variable var? — Huntzberger, Sep 19 '19 at 14:50

Use ActionLink to open Modal and pass parameter in MVC

2 Answers2

Linked