使用ActionLink打开Modal并在MVC中传递参数

use*_*420 5 javascript asp.net-mvc jquery twitter-bootstrap

我试图通过单击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>
Run Code Online (Sandbox Code Playgroud)

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

Max*_*ich 2

打开引导模式对话框不需要您使用,ActionLink并且正如阿德里亚诺上面提到的那样,您会混淆客户端和服务器代码。

可以使用此问题中所述的以下选项来操作引导模式。

$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');
Run Code Online (Sandbox Code Playgroud)

在你的情况下,你的代码应该看起来像这样。

@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');
    });
});
Run Code Online (Sandbox Code Playgroud)

就将数据传递到模式而言,这实际上是一个单独的问题,但这里已涵盖。

基本上,您可以处理单击事件并将值放入可见或隐藏字段中(以合适的为准)。

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

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

现在您已将值存储在模态中,可以根据需要访问该值。

  • Maxim 但即使使用上述方法,也无法在模态中的 html.beginform 中插入值。该值只能插入到文本字段、div 等中。还有其他方法吗? (2认同)