在MVC中使用ActionLink打开Modal并传参答案

【问题标题】：Use ActionLink to open Modal and pass parameter in MVC在MVC中使用ActionLink打开Modal并传参
【发布时间】：2014-02-02 12:52:33
【问题描述】：

我试图通过单击 ActionLink 并传递如下参数在同一页面上打开我的引导模式：

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

在ActionLink中我将actionName参数保留为#，这是因为模态在同一页面上，当用户选择模态中的选项时将决定动作。之所以不直接调用下载动作方法是因为用户可以选择下载各种格式的excel、csv等。

【问题讨论】：

您正在混合客户端和服务器端。 “#”不是有效的控制器名称（您是服务器端），因为“data-id”不是有效的属性名称（它是计算数据值 MINUS id 值的表达式，同样您是服务器端）。将您的 ActionLinks 替换为目标 URL 为 javascript 的纯链接。在那里您将显示模态对话框并在 JavaScript 中发布代码。下载将从一个简单的 window.location.href = yourcalculatedurl 开始

标签： javascript jquery asp.net-mvc twitter-bootstrap

【解决方案1】：

这就是我使用 html.actionlink 显示引导模式表单的方式

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

【讨论】：

【解决方案2】：

打开引导模式对话框不需要您使用 ActionLink，正如 Adriano 上面提到的那样，您混淆了客户端和服务器代码。

可以使用this question 中所述的以下选项来操作引导模式。

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

在你的情况下，你的代码应该是这样的。

@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');
    });
});

就向模态传递数据而言，这确实是一个单独的问题，但已涵盖here。

基本上，您可以处理点击事件并将值放在可见或隐藏字段中（以适当的为准）。

所以你可以把上面的代码改成这样

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

现在您已将值存储在您的模态中，可以根据需要进行访问。

【讨论】：

Maxim 我做了上述但我如何访问模式中的“@item.Name”值并将值输入“new { filename = @item.Name}”？？
Maxim 但即使使用上述方法也无法在模态中的 html.beginform 中插入值。该值只能插入文本字段，div等。还有其他方法吗？
y como acceder a ese valor data("id") , es decir guardar el id que se esta enviando al modal en una variable var?