在主页面显示/隐藏部分视图
Posted
技术标签:
【中文标题】在主页面显示/隐藏部分视图【英文标题】：Display/Hide PartialView in main page 【发布时间】：2021-06-29 17:17:03 【问题描述】：我正在使用 ASP.NET MVC 框架。在这里，我从 main.cshtml 加载 PartialView。 PartialView 包含一个模式，它应该在用户单击链接时显示。以下功能正常工作，但是当我在 main.cshtml 页面的开头加载 PartialView 时，它始终显示在顶部。我希望 PartialView 的一部分包含 headerCommentModal 应该显示，并且它应该只在用户单击链接后显示。我怎样才能做到这一点？
这就是我从 main.cshtml 调用 PartialView 的方式
@Html.Action("SubmissionHeader", "Submission", new id = 516, tab = 0 )
这是我的链接和 DisplayCommentDialog 函数，它从 PartialView 加载 headerCommentModal 并在用户单击以下链接时显示。
链接：<a href='DisplayCommentDialog' onclick="DisplayCommentDialog(); return false;"> Add Comment</a><br>
function DisplayCommentDialog()
$('#headerCommentModal').modal(
show: true,
backdrop: 'static',
keyboard: false
);
这是我的行动
[ChildActionOnly]
public ActionResult SubmissionHeader(int? id, SubmissionTabEnum tab = SubmissionTabEnum.None)
var rules = DIResolver.GetConcreteInstanceOf<ISubmissionRules>();
var model = _submissionSvc.GetSubmissionHeaderViewModel(id.GetValueOrDefault()) ?? new SubmissionHeaderViewModel();
................
TempData["SubmissionHeaderID"] = id;
return PartialView("_SubmissionHeader", model);
最后是我的部分观点。
<script>
$(function ()
$('[data-toggle="tooltip"]').tooltip()
)
</script>
@
int SubmissionHeaderID = (int)TempData["SubmissionHeaderID"];
bool isClosed = Model.SubmissionStatusTypeID == SubmissionStatusEnum.Close.GetEnumValue();
@Html.Hidden("SubmissionHeaderID", SubmissionHeaderID, new data_ng_model = "model.SubmissionHeaderID" )
@Html.JsonDataSourceVariable("securitygroupsusers", "SecurityGroupsUsersAccessRight", "Utility", Model.EntityOrganizationID.GetValueOrDefault())
<!-- _SubmissionHeaderActions start -->
<div class="stayenabledonclose" id="_SubmissionHeaderActions">
@* not a CSS class - signal to JS code that this should still be enabled when submission closed *@
@*Note: row is shared with _SubmissionHeader, so col-md value has to fit with it*@
<div class="col-md-4" ng-controller="submissionHeaderActionsController">
<div class="btn-group pull-right" style="margin-top:10px;padding-top:10px;">
<button type="button" class="btn btn-secondary dropdown-toggle" style="color:white;background-color:rgb(16,123,147);font-size:16px;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action Items
<b class="caret" style="display: inline-block"></b>
<div>
<div></div>
</div>
</button>
<div class="dropdown-menu">
@if (UC.SecurityModel.EntityOrganizationAccessRight(Model.EntityOrganizationID.GetValueOrDefault()) == AccessRightEnum.ModifySubmissions)
if (Model.CanCreateNew)
<li><a value="New Submission" class="stayenabledonclose valid" ng-click="showCreationModal($event)" aria-invalid="false">New Submission</a></li>
if (Model.CanTransfer)
<li> <a value="Transfer" class="dropdown-item stayenabledonclose" ng-click="transfer($event, 358)">Transfer</a> </li>
if (Model.CanClone)
<li><a value="Clone" class="dropdown-item stayenabledonclose" ng-click="clone($event)">Clone</a></li>
@*if (Model.CanEditComments)
<li><a value="Comments" class="dropdown-item stayenabledonclose" id="comment-btn" ng-click="showCommentModal($event)" >Comments</a></li>
*@
@*if (Model.CanReassign && !isClosed)
<li><a value="Reassign" class="dropdown-item stayenabledonclose" id="reassign-btn" ng-click="showReassignModal($event)" >Reassign</a></li>
*@
if (Model.CanExport)
<li><a ng-click="export($event)" href="@Url.Action("SubmissionHeaderActionItem", "Submission", new id = SubmissionHeaderID, item = (int) SubmissionActionItemEnum.Export)" title='Exports submission & attachments to a zip file.'>Export</a></li>
if (Model.CanPrint)
<li><a href="@Url.Action("SubmissionHeaderActionItem", "Submission", new id = SubmissionHeaderID, item = (int) SubmissionActionItemEnum.Print)" title='Exports submission to a PDF file.'>Print</a></li>
if ((Model.ArchiveStatusTypeID == 2 || Model.ArchiveStatusTypeID == 3) && Model.CanGetArchive)
<li><a href="@Url.Action("SubmissionHeaderActionItem", "Submission", new id = SubmissionHeaderID, item = (int) SubmissionActionItemEnum.GetArchive)" title='Retrieves submission archive file.'>Get Archive</a></li>
if (Model.ArchiveStatusTypeID == 3 && Model.CanDeleteArchive && UC.SecurityModel.EntityOrganizationAccessRight(Model.EntityOrganizationID.GetValueOrDefault()) == AccessRightEnum.ModifySubmissions)
<li><a href="@Url.Action("SubmissionHeaderActionItem", "Submission", new id = SubmissionHeaderID, item = (int) SubmissionActionItemEnum.DeleteArchive)" title='Deletes submission archive file.'>Delete Archive</a></li>
</div>
</div>
<div style="padding-top:20px;">
@if (Model.CanEditComments)
<div class="circle-white" data-toggle="tooltip" data-placement="bottom" title="Comments" style="float:right;margin-right:20px;">
<div class="circle-text"><a value="Comments" class="stayenabledonclose" id="comment-btn" ng-click="showCommentModal($event)">C</a></div>
</div>
@if (Model.CanReassign && !isClosed)
<div class="circle-white" data-toggle="tooltip" data-placement="bottom" title="Reassign" style="float:right;margin-right:20px;">
<div class="circle-text"><a value="Reassign" class="stayenabledonclose" id="reassign-btn" ng-click="showReassignModal($event)">R</a></div>
</div>
</div>
</div>
<div class="form-horizontal" ng-controller="submissionHeaderActionsController">
<div id="headerCommentModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="submissionComment-title" style="padding-right:19px;">
<div class="modal-dialog" role="document">
<div id="adcmodal" class="modal-content">
<div id="adcmodal" class="modal-header col-nopadding ">
<h3 class="modal-title" id="submissionComment-title">Submission Comment</h3>
<button type="button" class="close pull-right" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fas fa-times"></i></span>
</button>
</div>
<div class="modal-body submissioncomment-modal-body">
<div class="row form-group spacer">
<div class="col-md-12">
<div class="col-md-12">
@Html.Label("Recipients")
<select id="commentrecipients" class="dirtyignore" kendo-multi-select k-options="securitygroupsusersSelectOptions()" k-ng-model="initSecurityGroupsUsers()"></select>
</div>
</div>
</div>
@Html.Hidden("SubmissionHeaderID", SubmissionHeaderID)
<div class="row form-group spacer">
<div class="col-md-12">
<div class="col-md-12">
@Html.Label("Comment (will be sent to the recipients via email)")
@Html.TextArea("Comment", "", new @class = "form-control dirtyignore", rows = "2", maxlength = "1000", data_ng_model = "model.comment" )
</div>
</div>
</div>
</div>
<div id="adcmodal" class="modal-footer ">
<input type="button" id="Close" value="Close" class="adcmodal-button" data-dismiss="modal" aria-label="Close" />
<input type="button" id="Send" value="Send" class="adcmodal-button" ng-click="send(@Model.EntityOrganizationID)" />
</div>
</div>
</div>
</div>
</div>
@if (Model.SubmissionID != 0)
@Html.SubmissionReassignmentActions(Model.SubmissionID) @* Submission.SubmissionReassignment _SubmissionReassignment*@
@Html.SubmissionCreationActions() @* Submission.CreateNewSubmission _SubmissionCreation *@
@Html.SubmissionTransferActions(Model.SubmissionID) @* Submission.TransferSubmission _SubmissionTransfer *@
</div>
<!-- _SubmissionHeaderActions end -->
@using (Html.RequiredScripts())
@Html.RequirePageScript("Shared", "SubmissionHeaderActions")
这是我的 main.cshtml，其中实际对话框显示部分视图模式。这里我有@Html.Action 和 DisplayCommentDialog 函数体。
@*@if (ViewBag.ShowSsoOptinMessage)
<script type="text/javascript">
(function ($)
var fun = document.querySelector('universal-navigator');
if (fun)
fun.maybeDisplayOptInView(true);
)(jQuery);
</script>
*@
<script type="text/x-kendo-template" id="test_template">
<div id="details-container">
<p>Testing...</p>
</div>
</script>
<div id="details"></div>
<div ng-controller="submissionDashboardController">
@Html.JsonDataSourceVariable("customfieldmaps", "CustomFieldMaps", "Utility")
<script>
var includeClosed = @Model;
var preventAllGridDataLoad = true;
var preventMyGridDataLoad = true;
</script>
<!---- ListSubmissionDashboard start -->
<!-- bread crumb content -->
@Html.Action("SubmissionHeader", "Submission", new id = 516, tab = 0 )
<div class="spacer-bodybg"></div>
<!-- _SubmissionCreation start -->
@Html.SubmissionCreationActions() @* SubmissionController.CreateNewSubmission returns view _SubmissionCreation which is modal *@
<!-- _SubmissionCreation end -->
<!---- ListSubmissionDashboard end -->
<div id="dialog"></div>
<script>
$(document).ready(function ()
$("#dialog").kendoWindow(
modal: true,
visible: false,
modal: true,
visible: false,
resizable: false,
width: 450,
height: 420,
);
var detailsTemplate = kendo.template($("#template").html());
);
function showDetails(e)
var grid = $("#mysubmissionsGrid").data("kendoGrid");
$(grid.tbody).on("click", "td", function (e)
var row = $(this).closest("tr");
var rowIdx = $("tr", grid.tbody).index(row);
var colIdx = $("td", row).index(this);
//alert(rowIdx + '-' + rowIdx);
var result;
if (rowIdx != null)
dataRow = grid.dataItem(grid.tbody.find("tr").eq(rowIdx));
var entityOrganization = dataRow.EntityOrganization;
var SubmissionCode = dataRow.SubmissionCode;
var kendoWindow = $("#dialog").data("kendoWindow");
var content = "<h7><b>" + "Last Comment Created by </b> " + user.toString() + "</h7><br>" +
"<h7>" + "" + "<a href='DisplayCommentDialog' onclick=\"DisplayCommentDialog(); return false;\">" + "Add Comment" + "</a><br></h7>" +
"</div><br>";
kendoWindow.content(content.toString());
kendoWindow.open().toFront();
);
);
var kendoWindow = $("#dialog").data("kendoWindow");
kendoWindow.open().center().toFront();
function DisplayCommentDialog()
var kendoWindow = $("#dialog").data("kendoWindow");
kendoWindow.close();
alert('Before calling headerCommentModal');
$('#headerCommentModal').modal(
show: true,
backdrop: 'static',
keyboard: false
);
</script>
@using (Html.RequiredScripts())
@Html.RequirePageScript("Shared", "ShortcutLinks")
@Html.RequirePageScript("Submission", "ListSubmissionDashboard")
@Html.RequirePageScript("Shared", "GridPersonalization")
@Html.RequirePageScript("Shared", "SubmissionCreation")
【问题讨论】：
【参考方案1】：您可以轻松做到这一点。 如果我正确理解了这个主题。如下：
在您的控制器上创建一个可以调用部分的操作。
public ActionResult SubmissionHeader(int id = 516,int tab = 0)
return PartialView();
下一步将 jQuery 添加到您的项目中并使用它调用操作
$("#headerCommentModal").modal("hide");
$("#DisplayCommentDialog").click(function()
$.get("/Controller/SubmissionHeader?id=516&tab=0",function(result)
$("#headerCommentModal").modal("show");
$("#headerCommentModal").html(result);
);
);
【讨论】：
谢谢。这并不完全有效。我已经有一个动作，我还添加了完整的部分视图和 main.cshtml。我是否需要修改任何内容以适合您建议的代码。 $("#headerCommentModal").modal("show");根本不显示。 我还试图让确切的 div 隐藏。它实际上隐藏了以下代码，但是当我尝试在单击后显示 headerCommentModal 时，它也会关闭。如果我不使用以下代码隐藏它，则在单击之前和单击时显示。可能是什么问题？ $("div.row.submission-header-title").css("display", "none"); 检查您是否有机会检查此问题？我尝试了一些其他方法，我注意到除非我对这段代码进行硬编码，否则 @Html.Action("SubmissionHeader", "Submission", new id = 516, tab = 0 ) - 部分视图“headerCommentModal”不会出现在当我点击链接时。知道什么是可能的替代方案吗？如果你能扔一些灯会很有帮助。以上是关于在主页面显示/隐藏部分视图的主要内容，如果未能解决你的问题，请参考以下文章
单击按钮，在主视图中的 foreach 语句中一次显示/隐藏部分视图结果
markdown 从主页上的精选集合隐藏产品价格，但在收集页面上显示