使用Javascript / jQuery的模态弹出的对话框MVC 4 /渲染局部视图 [英] javascript/jquery modal popup dialog MVC 4 / render partial view
问题描述
我一直在使用DevEx preSS PopupControl。他们看起来不错，pretty，但他们不显示在iOS / Android设备上的滚动条。所以我想拿出一个替代方案。我立即使用只是用于显示局部视图，只读和关闭按钮。
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.
我不熟悉使用jQuery，所以我有一个很难的所有不同的岗位拼凑这个话题。
I am not familiar with jquery so I am having a hard time piecing together all the different posts about this topic.
我index.cshtml与许多不同的部分景色的门户。其中的部分观点是客户端的列表。客户端名称为客户详细的链接。这是我需要弹出的对话框。
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.
与客户名单（注意链接调用javascript函数传递我想要查看的ID局部视图：
Partial view with client list (note the link calls a javascript function passing the ID I want to view:
<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>
目前的JavaScript在index.cshtml处理弹出：
current javascript in index.cshtml that handles the popup:
<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是，我要替换当前对话框。我想该对话框是一个特定的高度，无论内容的大小。
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.
要显示在对话框中的局部视图的例子：
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>
控制器：
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);
}
我能有一个弹出式窗口，呈现不同的局部视图（可能是通过添加硬盘codeD参数，如面积= 1，面积= 2的方法调用客户端）？还是应该有详细（客户端访问，方向......）的每个区域中的一个弹出窗口。
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...).
推荐答案
示例使用静态对话框（无AJAX）
定义 DIV 在局部视图你的对话内容：
Define a div for your dialog content in a partial view:
@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.
动态对话框的内容（AJAX）
您的部分对话容器是空的开始：
Dialog container for your partial is empty initially:
<div id="client-detail-modal"><!-- Client Partial, empty for now --></div>
通过AJAX获取部分：
Get the partial via 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");
});
});
动态内容（没有AJAX）
触发元素来填充对话框将填充数据另一种方式的属性，然后使用JavaScript替换的内容。
Another way to fill the dialog would be to populate the data attributes of the trigger element then replace content using 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);
});
这篇关于使用Javascript / jQuery的模态弹出的对话框MVC 4 /渲染局部视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
