Question

我需要在弹出窗口中显示详细信息。我不知道该怎么做。我需要在MVC3 Razor视图中完成它。

我的控制器 -

public ViewResult ViewDetail(Int32 id)
{
  var q = from p in db.accs
          where p.id == id
          select p;
  return View(q.FirstOrDefault());
}

我的观点 -

<td>@ Html.ActionLink("View Detail", "ViewDetail", new { id=item.id }) </td>

Answer 1

这种任务并不是ASP.NET MVC / Razor所做的。考虑使用像JQuery UI Dialog这样的Javascript库。您必须向页面添加几个JQuery UI脚本，但是收益是一个非常简单的API;您可以使用一行代码从任何HTML元素（例如id mydiv ）创建基本对话框：

$( "#mydiv" ).dialog();

当然，您可以应用自定义和主题。

当然，你可以简单地使用Javascript：

alert("my details here");

获得一个基本的模态弹出窗口，但我猜这不是你想要的。

Answer 2

使用Jquery UI ModalForm显示您的数据。

假设您要在jquery的模态弹出窗口中显示以下内容。

<div id="displayinmodal">
<input type="file" id="file" name="file" />
<input type="submit" id="submitdata" value="Upload" />
</div>

现在就像这样编写你的jquery。

<script>
$(document).ready(function(){
     $("#displayinmodal").dialog({ //displayinmodal is the id of the div you want to display in modal popup
         autoOpen: true
     });
});
</script>

就是这样。你应该在你的浏览器中获得Modal弹出窗口。

希望这有帮助

Answer 3

如果你想要一个简单的没有多余的模式（内容不多），你可以像这样使用JavaScript警告：

alert('Hello from a modal popup');

如果你想要一个更漂亮的选项，常见的解决方案是使用jQuery UI的对话框，它允许一个模态选项。看看这里有关此选项的演示：

http://jqueryui.com/demos/dialog/#modal

代码非常简单;以下应该为您使用Google的CDN作为脚本和股票jQuery UI CSS的来源做一切：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
    $(function() {
        $( "#details" ).dialog({
            modal: true
        });
    });
</script>

<div id="details">
    Hello from a modal popup
</div>

如何在mvc3中显示模态弹出窗口？

3 个答案: