jquery - 在主页面显示/隐藏部分视图
问题描述
我正在使用 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功能，它headerCommentModal从 PartialView 加载并在用户单击以下链接时显示。
关联：<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")
}
解决方案
你可以很容易地做到这一点。如果我正确理解了这个主题。如下：
在您的控制器上创建一个可以调用部分的操作。
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);
});
});
推荐阅读
- regex - perl 正则表达式，删除捕获的内容
- perl - 在 Mac 上使用 Perl 和 Ttk 闪烁 GUI 按钮
- amazon-web-services - AWS Elasticsearch Service - 如何使用 AWS Cognito 对 ES 端点进行身份验证？
- node.js - Saxon-js 是否对 xsl:param 执行 XML 语法检查？
- amazon-web-services - 使用 AWS Lambda 控制台使用 SNS 发送推送
- mysql - 使用 pip 将 mysqlclient 安装到 MacOS Bigsur 时出错
- google-chrome-extension - chrome.tabs.query 事件未触发
- css - 我的网格在纸质材料 UI 中的底部位置不起作用
- ruby-on-rails - 无法使用 react ruby on rails 注册用户并设计 gem
- php - 如何使用 PHP 从今天的日期检索 Mysql 数据