C# javascript/jquery 模态弹出对话框 MVC 4 / 渲染局部视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16577011/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript/jquery modal popup dialog MVC 4 / render partial view
提问by Gina Marano
I have been using the DevExpress PopupControl. They look nice and pretty but they do not display the scrollbars on iOS/Android devices. So I want to come up with an alternative. My immediate use is just for displaying a partial view, read only and a close button.
我一直在使用 DevExpress PopupControl。它们看起来很漂亮，但它们不会在 iOS/Android 设备上显示滚动条。所以我想提出一个替代方案。我的直接用途只是用于显示部分视图、只读和关闭按钮。
I am not familiar with jquery so I am having a hard time piecing together all the different posts about this topic.
我不熟悉 jquery，所以我很难将所有关于这个主题的不同帖子拼凑在一起。
My index.cshtml is a portal with many different partial views. One of the partial views is a list of clients. The client name is a link to client detail. This is where I need the popup dialog.
我的 index.cshtml 是一个具有许多不同部分视图的门户。部分视图之一是客户列表。客户名称是指向客户详细信息的链接。这是我需要弹出对话框的地方。
Partial view with client list (note the link calls a javascript function passing the ID I want to view:
带有客户端列表的部分视图（注意该链接调用了一个传递我想要查看的 ID 的 javascript 函数：
<table style="text-align: left;">
@if ((Model != null) && (Model.Items != null))
{
foreach (WebMVC.Models.VisitDetails p in Model.Items)
{
sTime = p.StartTime.ToString("MM/dd") + " " + p.StartTime.ToShortTimeString().PadLeft(8,'_') + " - " + p.EndTime.ToShortTimeString().PadLeft(8,'_');
<tr>
<td style="width: auto">
@Html.DevExpress().HyperLink(
settings =>
{
settings.Name = "indexHyperLinkClient" + p.VisitID.ToString();
settings.Properties.Text = @p.NameNumZone;
settings.Properties.ClientSideEvents.Click =
string.Format("function(s, e) {{ MethodClient('{0}'); }}", p.Account);
}
).GetHtml()
</td>
</tr>
}
}
</table>
current javascript in index.cshtml that handles the popup:
处理弹出窗口的 index.cshtml 中的当前 javascript：
<script type="text/javascript">
var _clientId;
function MethodClient(clientid) {
_clientId = clientid;
popClient.PerformCallback();
popClient.Show();
}
function OnBeginCallbackClient(s, e) {
e.customArgs["clientid"] = _clientId;
}
<script type="text/javascript">
popClient is the current dialog that I want to replace. I would like the dialog to be a specific height regardless of the content size.
popClient 是我要替换的当前对话框。无论内容大小如何，我都希望对话框具有特定的高度。
example of the partial view to be displayed in the dialog:
要在对话框中显示的局部视图示例：
@model WebMVC.Models.ClientDetail
@{
DateTime now = DateTime.Today;
int age = now.Year - Model.Birthdate.Year;
if (Model.Birthdate > now.AddYears(-age))
{
age--;
}
string sBirthdate = Model.Birthdate.ToShortDateString() + " (Age: " + age + ")";
}
<div id="contentDiv">
<span class="display-label">@Html.DisplayNameFor(model => model.NameNumZone):</span>
<span class="display-field">@Html.DisplayFor(model => model.NameNumZone)</span>
<br />
<span class="display-label">@Html.DisplayNameFor(model => model.Sex):</span>
<span class="display-field">@Html.DisplayFor(model => model.Sex)</span>
<br />
<span class="display-label">@Html.DisplayNameFor(model => model.Birthdate):</span>
<span class="display-field">@Html.DisplayFor(model => @sBirthdate)</span>
<br />
<span class="display-label">@Html.DisplayNameFor(model => model.Address):</span>
<span class="display-field">@Html.DisplayFor(model => model.Address)</span>
<br />
</div>
Controller:
控制器：
public ActionResult Details()
{
string id = "";
if (!string.IsNullOrEmpty(Request.Params["clientid"]))
id = Request.Params["clientid"];
int clientid = 0;
if (id != "")
clientid = Convert.ToInt32(id);
ClientDetail cl;
if (clientid != 0)
ClientDetail cl = GetClientDetails(clientid);
else
ClientDetail cl = new ClientDetail();
return PartialView("ClientPopupPartial", cl);
}
Can I have one popup and render different partial views (maybe by adding a hardcoded param such as area = 1, area = 2 to the method client call)? Or should there be one popup for each area of detail (client, visit, directions...).
我可以有一个弹出窗口并呈现不同的局部视图吗（可能通过在方法客户端调用中添加一个硬编码参数，例如 area = 1, area = 2）？或者是否应该为每个细节区域（客户、访问、方向...）设置一个弹出窗口。
采纳答案by Jasen
Example with a static dialog (No AJAX)
静态对话框示例（无 AJAX）
Define a divfor your dialog content in a partial view:
div在局部视图中为您的对话框内容定义一个：
@model ClientDetail
<h2>Client Detail</h2>
@Html.DisplayFor(m => m.NameNumZone)
@Html.DisplayFor(m => m.Birthdate)
...
Dialog trigger and partial view:
对话框触发和局部视图：
<a href="#" class="dialog-trigger" data-clientId="@p.Account">@p.NameNumZone</a>
<div id="client-detail-modal">
@Html.Partial("ClientDetail", Model.Item)
</div>
Javascript:
Javascript：
$(document).ready(function() {
// setup the dialog
$("#client-detail-modal").dialog({
modal: true,
autoOpen: false,
height: 100,
width: 200
});
// bind the click event
$(".dialog-trigger").on("click", function(event) {
event.preventDefault();
$("#client-detail-modal").dialog("open"); // show dialog
});
});
Now if you have more than one client on a page you'll need a dialog per client. After a few clients it gets ugly. Instead, fill the dialog content dynamically.
现在，如果页面上有多个客户端，则每个客户端都需要一个对话框。在几个客户之后，它变得丑陋。相反，动态填充对话框内容。
Dynamic dialog content (AJAX)
动态对话框内容 (AJAX)
Dialog container for your partial is empty initially:
您部分的对话框容器最初是空的：
<div id="client-detail-modal"><!-- Client Partial, empty for now --></div>
Get the partial via AJAX:
通过 AJAX 获取部分：
$(".dialog-trigger").on("click", function(event) {
event.preventDefault();
var clientId = $(this).data("clientId");
$.ajax({
url: "Client/Details/" + clientId,
type: "GET",
})
.done(function(result) {
$("#client-detail-modal").html(result).dialog("open");
});
});
Dynamic content (No AJAX)
动态内容（无 AJAX）
Another way to fill the dialog would be to populate the dataattributes of the trigger element then replace content using javascript.
填充对话框的另一种方法是填充data触发器元素的属性，然后使用 javascript 替换内容。
<a href="#" class="dialog-trigger"
data-clientId="@p.Account"
data-birthdate="@p.Birthdate">@p.NameNumZone</a>
$(".dialog-trigger").on("click", function(event) {
var clientId = $(this).data("clientId");
var birthdate = $(this).data("birthdate");
// now replace content with new values
$("span.birthdate").text(birthdate);
});
回答by Shiva Saurabh
Put this content in your style sheet
将此内容放在您的样式表中
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 80%;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
and in the code use the following
并在代码中使用以下内容
<a href="#openModal" target="">Open Modal</a>
<div id="openModal" class="modalDialog" data-theme="c">
<div>
<a href="#close" title="Close" class="close" target="">X</a>
<h2>Pop up</h2>
<p>Pop up content. You can add your controls and content here</p>
</div>
</div>
this logic worked for me. Hope it works for you also.
这个逻辑对我有用。希望它也适用于您。
Instead of using <a href="#close" title="Close" class="close" target="">X</a>for closing it is preferred you navigate to some parent page instead.
而不是<a href="#close" title="Close" class="close" target="">X</a>用于关闭它首选您导航到某个父页面。
