使用MVC Ajax更新部分视图中的部分视图
我有一个MVC 5 web应用程序，它包含一个名为CreateProposal的Razor，它接受一个名为ProposalViewModel的ViewModel。此视图包含对名为_Proposal的部分视图的引用，该视图也接受ViewModel。
CreateProposal View
@model STAR.UI.ViewModels.ProposalViewModel
<div class="row">
@Html.Partial("_Proposal", Model)
</div>_ExistingAttachments _Proposal还引用了另一个名为ViewModel的部分视图，该视图也接受ViewModel。
_Proposal分部
@model STAR.UI.ViewModels.ProposalViewModel
<div class="col-md-6" id="proposalAttachments">
@Html.Partial("_ExistingAttachments", Model)
</div>_ExistingAttachments分部
@model STAR.UI.ViewModels.ProposalViewModel
<div class="form-group">
<label>Existing Attachments</label><br />
@Html.Hidden("hiddenAttachmentID", "", new { @id = "hiddenAttachmentID" })
@if (Model.Attachments != null)
{
foreach (var upload in Model.Attachments)
{
<a href="~/Content/uploads/@upload.fileName">@upload.fileName</a>
<a href="#" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#ModalDeleteAttachment" data-id="@upload.fileID">Remove</a><br />
}
}
</div>_ExistingAttachments部分发出一个href链接列表，并在每个链接旁边显示一个删除链接。一旦用户单击要删除的项上的remove链接，则该条目的id将使用少量JQuery存储在隐藏文本框中。
JQuery
$(document).on('click', '.btn.btn-danger', function () {
var id = $(this).data('id');
//alert(id);
$('#hiddenAttachmentID').val(id);
});然后向用户显示一个模态确认框，一旦用户确认删除，就会进行Ajax调用，然后在部分_ExistingAttachments _Proposal中更新部分_Proposal。
$.ajax({
type: "GET",
url: '/Proposal/DeleteAttachment/',
data: { id: $("#hiddenAttachmentID").val() },
error: function () {
alert("An error occurred.");
},
success: function (data) {
alert("Worked.");
$("#proposalAttachments").html(data);
}
});MVC控制器
public ActionResult DeleteAttachment(int id)
{
//Delete entry using passed in id
ProposalViewModel model = new ProposalViewModel();
//Code to populate ViewModel
return PartialView("_ExistingAttachments", model);
}在我预期部分视图_ExistingAttachments会被刷新之前，一切都很好，但这是不可能的。
为这个长期的问题道歉，但希望能找出我做错了什么。
请帮帮忙。
更新
我应该添加，代码使它成为Ajax成功函数和警报(“work.”)；被调用。但是，与部分刷新不同，我在同一个控制器中的编辑操作被调用
[HttpPost]
public ActionResult EditProposal(ProposalViewModel model)回答 2
Stack Overflow用户
发布于 2014-10-23 08:37:54
伙计们，多亏了贾森的帮助，这件事终于解决了。在Ajax调用完成后，代码将重定向到另一个页面。显然，我不希望这种情况发生，因为我只是希望在我的页面上更新部分视图，然后保持在页面上。
罪魁祸首实际上是我模态中的确认按钮。确实是
<input type="submit" id="mySubmitDeleteAttachment" class="btn btn-primary" value="Yes, please delete" />这导致应用程序在Ajax调用之后执行POST。所以我改了这个
<button type="button" id="mySubmitDeleteAttachment" class="btn btn-default">Yes, please delete</button>现在一切都如期而至。
Stack Overflow用户
发布于 2014-10-22 17:28:08
看来你所有的标记和代码块都很好。可能是您的ajax get请求缓存了。
尝试将cache:false添加到ajax调用中
$.ajax({
type: "GET",
url: '/Proposal/DeleteAttachment/',
cache: false,
data: { id: $("#hiddenAttachmentID").val() },
error: function () {
alert("An error occurred.");
},
success: function (data) {
console.log("Worked.");
$("#proposalAttachments").html(data);
}
});https://stackoverflow.com/questions/26511138
复制相似问题
腾讯云开发者
