如何在 ASP.NET MVC 中使用 Ajax 调用刷新局部视图?
How to refresh partialview with Ajax call in ASP.NET MVC?
我有一个局部视图,我正在发送两个参数,然后尝试使用 $("#div").html(result)
刷新局部视图 div。使用 mvc 操作将数据正确发送到局部视图,我在控制台中看到局部视图正在通过 ajax 调用进行更新。一切都按预期工作,但主视图中的部分视图永远不会更新或刷新。所以我总是看到 SubscriptionID 和 EntityOrganizationID 是第一次初始化的,即 0.
这是main.cshtml
中的局部视图
<div id="myPartialViewDiv">
@Html.Partial("_SubmissionCommentActions", new SubmissionHeaderActionViewModel());
</div>
这是我从 java 脚本函数调用的 ajax -- 在单击按钮后调用
$.ajax({
url: '/Submission/SubmissionHeaderDetails',
type: 'POST',
async: false,
dataType: 'html',
data: { id: SubmissionID, entityOrgID: EntityOrganizationID, tab:0 },
success: function (result) {
console.log('Success... : ' + result);
}
}).done(function (response) {
alert('refore replacing partial view with latest data');
$("#myPartialViewDiv").html(result);
});
这是我的行动 -
[HttpPost]
public ActionResult SubmissionHeaderDetails(int? id, int? entityOrgID, SubmissionTabEnum tab = SubmissionTabEnum.None)
{
SubmissionHeaderActionViewModel newModel = new SubmissionHeaderActionViewModel();
newModel.SubmissionID = (int)id;
newModel.EntityOrganizationID = (int)entityOrgID;
return PartialView("_SubmissionCommentActions", newModel);
}
这是我的部分观点_SubmissionCommentActions.cshtml
@model XYZ.Domain.Model.Submission.SubmissionHeaderActionViewModel
<script>
$(function () { $('[data-toggle="tooltip"]').tooltip();})
</script>
@{
// I get correct SubmissionHeaderID, EntityOrganizationID values every time using ajax call but they never gets refreshed inside "headerCommentModal" div
var SubmissionHeaderID = 0;
int EntityOrganizationID = 0;
if (Model != null){
SubmissionHeaderID = Model.SubmissionID;
System.Diagnostics.Debug.WriteLine("SubmissionHeaderID : " + SubmissionHeaderID);
}
if (Model.EntityOrganizationID != null){
EntityOrganizationID = (int)Model.EntityOrganizationID;
System.Diagnostics.Debug.WriteLine("EntityOrganizationID : " + EntityOrganizationID);
}
Model.SubmissionID = SubmissionHeaderID;
Model.EntityOrganizationID = EntityOrganizationID;
}
@Html.Hidden("SubmissionHeaderID", SubmissionHeaderID, new { data_ng_model = "model.SubmissionHeaderID" })
@Html.JsonDataSourceVariable("securitygroupsusers", "SecurityGroupsUsersAccessRight", "Utility", Model.EntityOrganizationID.GetValueOrDefault())
<!-- _SubmissionHeaderActions start -->
<div class="stayenabledonclose">
<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 | SubmissionID: @Model.SubmissionID | EntityOrganizationID : @Model.EntityOrganizationID</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>
</div>
</div>
</div>
</div>
<!-- _SubmissionHeaderActions end -->
@using (Html.RequiredScripts())
{
@Html.RequirePageScript("Shared", "SubmissionHeaderActions")
}
这里是 SubmissionHeaderActionViewModel class
namespace XYZ.Domain.Model.Submission
{
[DataContract]
public class SubmissionHeaderActionViewModel
{
//fields will be used to determine display of action items
[DataMember]
public bool CanReassign { get; set; }
[DataMember]
public bool CanEditComments { get; set; }
[DataMember]
public bool CanClone { get; set; }
[DataMember]
public bool CanTransfer { get; set; }
[DataMember]
public bool CanCreateNew { get; set; }
[DataMember]
public int SubmissionID { get; set; }
//export/print actions are under a sub menu in the header
[DataMember]
public bool CanExport { get; set; }
[DataMember]
public bool CanExportPdf { get; set; }
[DataMember]
public bool CanExportCsv { get; set; }
[DataMember]
public bool CanPrint { get; set; }
[DataMember]
public bool CanGetArchive { get; set; }
[DataMember]
public bool CanDeleteArchive { get; set; }
[DataMember]
public bool ShowSubMenu => CanExportCsv || CanExportPdf || CanPrint || CanGetArchive || CanDeleteArchive;
[DataMember]
public int? ArchiveStatusTypeID { get; set; }
[DataMember]
public int SubmissionStatusTypeID { get; set; }
public int? EntityOrganizationID { get; set; }
}
}
也许把动作也细化一下是个好主意:
public ActionResult SubmissionHeaderDetails(SubmissionHeaderActionViewModel
model)
{
return PartialView("_SubmissionCommentActions", model);
}
并通过将结果从完成变为成功来修复您的 ajax:
$.ajax({
url: '/Submission/SubmissionHeaderDetails',
type: 'POST',
data: { SubmissionID : SubmissionID,
EntityOrganizationID: EntityOrganizationID,
tab:0 },
success: function (result) {
$("#myPartialViewDiv").html(result);
},
error: function (xhr, exception) {
...error code
return false;
}
});
我有一个局部视图,我正在发送两个参数,然后尝试使用 $("#div").html(result)
刷新局部视图 div。使用 mvc 操作将数据正确发送到局部视图,我在控制台中看到局部视图正在通过 ajax 调用进行更新。一切都按预期工作,但主视图中的部分视图永远不会更新或刷新。所以我总是看到 SubscriptionID 和 EntityOrganizationID 是第一次初始化的,即 0.
这是main.cshtml
中的局部视图<div id="myPartialViewDiv">
@Html.Partial("_SubmissionCommentActions", new SubmissionHeaderActionViewModel());
</div>
这是我从 java 脚本函数调用的 ajax -- 在单击按钮后调用
$.ajax({
url: '/Submission/SubmissionHeaderDetails',
type: 'POST',
async: false,
dataType: 'html',
data: { id: SubmissionID, entityOrgID: EntityOrganizationID, tab:0 },
success: function (result) {
console.log('Success... : ' + result);
}
}).done(function (response) {
alert('refore replacing partial view with latest data');
$("#myPartialViewDiv").html(result);
});
这是我的行动 -
[HttpPost]
public ActionResult SubmissionHeaderDetails(int? id, int? entityOrgID, SubmissionTabEnum tab = SubmissionTabEnum.None)
{
SubmissionHeaderActionViewModel newModel = new SubmissionHeaderActionViewModel();
newModel.SubmissionID = (int)id;
newModel.EntityOrganizationID = (int)entityOrgID;
return PartialView("_SubmissionCommentActions", newModel);
}
这是我的部分观点_SubmissionCommentActions.cshtml
@model XYZ.Domain.Model.Submission.SubmissionHeaderActionViewModel
<script>
$(function () { $('[data-toggle="tooltip"]').tooltip();})
</script>
@{
// I get correct SubmissionHeaderID, EntityOrganizationID values every time using ajax call but they never gets refreshed inside "headerCommentModal" div
var SubmissionHeaderID = 0;
int EntityOrganizationID = 0;
if (Model != null){
SubmissionHeaderID = Model.SubmissionID;
System.Diagnostics.Debug.WriteLine("SubmissionHeaderID : " + SubmissionHeaderID);
}
if (Model.EntityOrganizationID != null){
EntityOrganizationID = (int)Model.EntityOrganizationID;
System.Diagnostics.Debug.WriteLine("EntityOrganizationID : " + EntityOrganizationID);
}
Model.SubmissionID = SubmissionHeaderID;
Model.EntityOrganizationID = EntityOrganizationID;
}
@Html.Hidden("SubmissionHeaderID", SubmissionHeaderID, new { data_ng_model = "model.SubmissionHeaderID" })
@Html.JsonDataSourceVariable("securitygroupsusers", "SecurityGroupsUsersAccessRight", "Utility", Model.EntityOrganizationID.GetValueOrDefault())
<!-- _SubmissionHeaderActions start -->
<div class="stayenabledonclose">
<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 | SubmissionID: @Model.SubmissionID | EntityOrganizationID : @Model.EntityOrganizationID</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>
</div>
</div>
</div>
</div>
<!-- _SubmissionHeaderActions end -->
@using (Html.RequiredScripts())
{
@Html.RequirePageScript("Shared", "SubmissionHeaderActions")
}
这里是 SubmissionHeaderActionViewModel class
namespace XYZ.Domain.Model.Submission
{
[DataContract]
public class SubmissionHeaderActionViewModel
{
//fields will be used to determine display of action items
[DataMember]
public bool CanReassign { get; set; }
[DataMember]
public bool CanEditComments { get; set; }
[DataMember]
public bool CanClone { get; set; }
[DataMember]
public bool CanTransfer { get; set; }
[DataMember]
public bool CanCreateNew { get; set; }
[DataMember]
public int SubmissionID { get; set; }
//export/print actions are under a sub menu in the header
[DataMember]
public bool CanExport { get; set; }
[DataMember]
public bool CanExportPdf { get; set; }
[DataMember]
public bool CanExportCsv { get; set; }
[DataMember]
public bool CanPrint { get; set; }
[DataMember]
public bool CanGetArchive { get; set; }
[DataMember]
public bool CanDeleteArchive { get; set; }
[DataMember]
public bool ShowSubMenu => CanExportCsv || CanExportPdf || CanPrint || CanGetArchive || CanDeleteArchive;
[DataMember]
public int? ArchiveStatusTypeID { get; set; }
[DataMember]
public int SubmissionStatusTypeID { get; set; }
public int? EntityOrganizationID { get; set; }
}
}
也许把动作也细化一下是个好主意:
public ActionResult SubmissionHeaderDetails(SubmissionHeaderActionViewModel
model)
{
return PartialView("_SubmissionCommentActions", model);
}
并通过将结果从完成变为成功来修复您的 ajax:
$.ajax({
url: '/Submission/SubmissionHeaderDetails',
type: 'POST',
data: { SubmissionID : SubmissionID,
EntityOrganizationID: EntityOrganizationID,
tab:0 },
success: function (result) {
$("#myPartialViewDiv").html(result);
},
error: function (xhr, exception) {
...error code
return false;
}
});