从局部视图打开一个弹出窗口,然后重新加载父局部视图
open a popup from partial view and reload the parent partial view
我尝试了不同的方法,使用javascript和ajax。如果您在之前遇到这种情况,请提供帮助
我有一个视图hfnlp.shtml
@model IMONLP.Models.HFADMwrap
@using ADM
@{
ViewBag.Title = "HFNLP";
}
<html>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<body>
**<div id="popup">
@if (true)
{
Html.RenderPartial("popup", Model);
}
</div>**
<div id="Quadrant">
@if (@Model.flag == 1)
{
Html.RenderPartial("grid", Model);
}
</div>
</body>
</html>
我有这个popup.cshtml,它是上面视图的部分视图。会有一个弹出窗口打开并从用户那里获取内容。它必须做这些事情。1.获取内容,将其写入模型2.关闭弹出窗口3.将控件放回父控件,父控件不应该重新加载,如果popup.cshtml(局部视图)-[父控件winodw的一部分重新加载],我很好。
这是popup.cshtml
@model IMONLP.Models.HFADMwrap
@{
ViewBag.Title = "popup";
}
<html>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script type="text/javascript">
//pop up window
$(function () {
$('#ClickMe').click(function () {
window.open('@Url.Action("FileUpload", "HFNLP")', 'FileUpload', 'height=' + (window.screen.height - 100) + ',width=700,left=' + (window.screen.width - 250) + ',top=10,status=no,toolbar=no,resizable=yes,scrollbars=yes');
});
});
</script>
<body>
<input type="button" id="ClickMe" name="ClickMe" value="New Visit"/>
</body>
</html>
点击按钮应打开弹出
最后,fileupload.cshtml,这是一个弹出窗口,当点击按钮时调用
@model IMONLP.Models.HFADMwrap
@using ADM
@{
ViewBag.Title = "FileUpload";
}
<html>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
$('#ClickMe').click(function () {
//window.opener.location.href = '@Url.Action("AfterUpload", "HFNLP", new { wrap=@Model})';*@
window.opener.location.href = window.opener.location.href;
window.close();
});
});
</script>
<body>
<br />
@using (Html.BeginForm("AfterUpload", "HFNLP"))
{
<input type="button" value="submit & View Codes" style="position: absolute; left: auto; width: auto;" id="ClickMe" name = "ClickMe"/>
@*<input type="hidden" name="a" value="@Model.Hfnlp.unstructured_text"/>*@
@if (!string.IsNullOrEmpty(Model.Hfnlp.unstructured_text))
{
@Html.TextAreaFor(m => m.Hfnlp.unstructured_text, new { name= "textBox1", @value = Model.Hfnlp.unstructured_text, style = "width: 650px; height: 400px;"})
}
else
{
@Html.TextAreaFor(m => m.Hfnlp.unstructured_text, new { style = "width: 650px; height: 400px;" })
}
}
@using (Html.BeginForm("FileUploadw", "hfNLP", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<input type="file" name="file" id="file" /><br />
<input type="submit" value="Upload" name="submit" />
}
</body>
</html>
有了这个现在的代码,我可以获得弹出窗口,调用控制器的操作并关闭弹出窗口。然后,整个父页将重新加载。我正在丢失传递给模型的数据。请帮我摆脱这种局面。
*********编辑********
public ActionResult FileUpload(HFADMwrap wrap)
{
HFNLP hf = new HFNLP();
wrap.Hfnlp = hf;
return View("FileUpload", wrap);
}
public ActionResult FileUploadw(HFADMwrap wrap, HttpPostedFileBase file)
{
HFNLP hf = new HFNLP();
if (wrap.Hfnlp == null)
{
wrap.Hfnlp = hf;
}
file = Request.Files[0];
BinaryReader b = new BinaryReader(file.InputStream);
byte[] binData = b.ReadBytes(file.InputStream.Length.ToInt32());
string filecontent = System.Text.Encoding.UTF8.GetString(binData);
hf.unstructured_text = filecontent;
/*upload and get the file content */
if (wrap.Hfnlp.unstructured_text == null)
{
return RedirectToActionPermanent("FileUpload", "FileUpload");
}
wrap.Hfnlp = hf;
return PartialView("FileUpload", wrap);
}
我现在试过这个
<div id="popup">
<input type="button" value="something" onClick="?(What should be here)"/></div>
我使用jquery ui对话框来完成这样的工作。没有理由在视图上加载部分右侧。
在我的*.cshtml中,我有一个div,它最终将成为我的对话框
<div id="delegateDialog" class="actionDialog"></div>
然后,当单击特定按钮时,将调用此方法来加载对话框:
var loadDelegateDialog = function(processInstanceID, serialNumber) {
var $dialog = $('#delegateDialog');
var title = "Delegate Workflow #" + processInstanceID;
var actionUrl = '@Url.ActionFor((TaskListController c) => c.GetDelegateDialog(Model.TaskListID, null, null))';
$.ajax({
url: actionUrl,
type: 'POST',
data: {
processInstanceID: processInstanceID,
serialNumber: serialNumber
},
dataType: 'html',
success: function(data) {
$dialog.html(data);
$dialog.dialog({
autoOpen: true,
closeOnEscape: false,
modal: true,
resizable: false,
draggable: false,
dialogClass: "no-close",
maxHeight: 600,
width: 500,
position: { my: "top", at: "top+20", of: window },
hide: { effect: "fade", duration: 250 },
show: { effect: "fade", duration: 250 },
title: title,
close: function () {
// call a method to reload your parent page via ajax
}
});
},
error: function(jqXhr, textStatus, errorThrown) {
$.notifyBar({
html: jqXhr.responseText,
cls: 'error',
delay: 10000
});
}
});
};
loadDelegateDialog js方法调用我的控制器GetDelegate对话框,返回部分视图。然后将内容放入对话框中。
以下是控制器方法:
[HttpPost]
public PartialViewResult GetDelegateDialog(int id, int? processInstanceID, string serialNumber)
{
var taskListID = id;
if (!processInstanceID.HasValue)
{
throw new InvalidOperationException(Resources.Web_ErrorMsg_MissingProcessIntanceID);
}
if (string.IsNullOrWhiteSpace(serialNumber))
{
throw new InvalidOperationException(Resources.Web_ErrorMsg_MissingSerialNumber);
}
var model = this.taskListService.BuildDelegateDialogViewModel(taskListID, processInstanceID.Value, serialNumber);
return this.PartialView("_DelegateDialog", model);
}
让对话框的关闭方法调用另一个js方法,该方法可以刷新/重新加载页面,或者,如果你不想完全重新加载,则调用AJAX来获得你想要的数据并填充页面的适当部分。
相关文章:
- 在Django中,可以在视图中创建一个包含js的变量,然后在循环模板标记中使用它
- 主干提取模型然后渲染视图
- 在视图被替换后,主干视图事件未激发,然后放回页面上
- 从 KnockoutJS 视图模型中获取值,然后在另一个视图模型上调用它
- 主干 - 渲染客户端视图,然后在保存时创建它们
- 如何使用 javascript 在 MVC 项目中加载视图,然后在其中加载部分视图
- 尝试检测网格视图的哪一行处于编辑模式,然后在选中复选框字段时调整文本框
- 查看 json,然后单击该 json 中的 links.json,并将其替换为当前 json 视图
- 从局部视图打开一个弹出窗口,然后重新加载父局部视图
- Knockout:将一个值从控制器传递到视图,然后从视图传递到视图模型
- 从ngResource获取数据,然后将结果绑定到视图
- 以编程方式添加视图,然后引用这些视图
- 如何重载然后重定向到另一个视图
- 主干创建集合,然后视图-异步
- 使用Angular将请求传递给DJANGO REST api,然后在DJANGO视图中返回这些结果
- Asp.net MVC动态WEBGRID搜索所有列,然后在同一视图中更新WEBGRID
- 在Ember.js中将参数传递给视图,然后传递给helper
- 如何在屏幕外加载HTML页面,然后将其滑入视图
- 从视图中设置一个cookie,然后从Rails中的Controller中读取它
- ASP.NET网格视图:用鼠标高亮显示行,然后更新高亮显示的行