Asp.net mvc ASP MVC 2:Jquery模式弹出窗口,如何返回数据
我正在考虑将jquery模式弹出窗口添加到我的mvc项目中。我一直在看帖子 我的设想: 我有一个带有几个输入字段的页面(文本框、复选框)。我想有一个链接,将打开一个模式弹出选择一个图像。我有一个控件,将显示所有图像,并允许用户选择一个图像。我了解如何打开上面列出的站点后的模式弹出窗口 我现在不明白的是如何将选定的图像名称(myimage.jpg)返回到我的原始页面视图,并将其设置为模型上的属性,而所有其他模型更改保持不变 我目前拥有的: MyFormController>ActionMethod:ImageSelected(ImageSelector模型) 如果有效,我如何获取我的“MyFormModel”(以及所有其他更改),设置MyFormModel.ImageName=model.ImageName并调用视图(MyFormModel) 谢谢你的帮助Asp.net mvc ASP MVC 2:Jquery模式弹出窗口,如何返回数据,asp.net-mvc,modalpopups,Asp.net Mvc,Modalpopups,我正在考虑将jquery模式弹出窗口添加到我的mvc项目中。我一直在看帖子 我的设想: 我有一个带有几个输入字段的页面(文本框、复选框)。我想有一个链接,将打开一个模式弹出选择一个图像。我有一个控件,将显示所有图像,并允许用户选择一个图像。我了解如何打开上面列出的站点后的模式弹出窗口 我现在不明白的是如何将选定的图像名称(myimage.jpg)返回到我的原始页面视图,并将其设置为模型上的属性,而所有其他模型更改保持不变 我目前拥有的: MyFormController>ActionMethod
Kevin如果用户正在上载图像,我建议您查看AJAX上载:。您可以异步获取映像文件,将其保存到磁盘,并将保存的映像路径(等)作为JsonResult返回。javascript的外观如下所示:
new AjaxUpload('image-input', {
action: '/Photo/Add',
onComplete: function (file, response) {
//using Fowler's json2
var photo = JSON.parse(response);
if (photo.IsValid) {
//do what you want with your photo
//photo.Path should contain the saved image's location
}
else {
alert("Sorry. You tried to upload an invalid file.");
}
}
});
在您的照片控制器中:
[HttpPost]
public JsonResult Add(HttpPostedFileBase UserFile)
{
if (UserFile == null)
{
//something bad happened, no file
}
string filePath = "/Path/To/Image/Image.jpg";
//this isn't unit test friendly.
//just quick and dirty:
string fullPath = HostingEnvironment.MapPath(filePath);
UserFile.SaveAs(fullPath);
var model = new JsonPhotoAdd
{
IsValid = true,
Path = filePath
};
return Json(model, "text/html");
}
请记住:这是一个解决办法,因为浏览器会防止异步文件上传。因此,您可能需要考虑在表单提交过程中添加第二页。在第二个页面上,用户可以通过一个标准的文件输入字段和一个表单帖子来处理上传图像 我会在主窗体上使用一个隐藏的输入字段。当用户在模式弹出窗口中单击图像时,使用jQuery处理单击事件,并将单击图像的值(文件名?)分配给隐藏的输入字段。如果正确命名隐藏的输入字段,ModelBinder将自动将文件名绑定到模型对象,而无需手动更新 关于主要形式:
<%= Html.HiddenFor( x => x.ImageFileName ) %>
我没有测试这个,但你应该知道。。。如果已填充,我可能还会尝试在主窗体上的ImageFileName中显示文件的缩略图。我使用ASP.NET MVC2和AjaxUploader的新版本: 当我呼叫我的控制器时:
[HttpPost]
public JsonResult Add(HttpPostedFileBase UserFile)
{
if (UserFile == null)
{
//something bad happened, no file
}
string filePath = "/Path/To/Image/Image.jpg";
//this isn't unit test friendly.
//just quick and dirty:
string fullPath = HostingEnvironment.MapPath(filePath);
UserFile.SaveAs(fullPath);
var model = new JsonPhotoAdd
{
IsValid = true,
Path = filePath
};
return Json(model, "text/html");
}
公共JsonResult AddImg(HttpPostedFileBase用户文件)
用户文件始终为空…
剧本:
function createUploader() {
var uploader = new qq.FileUploader({
element: document.getElementById('file-uploader-demo1'),
action: '/Evenement/AddImg',
name: 'UserFile',
});
}
在我看来,表格是可以的
<% using (Html.BeginForm("AddImg", "Evenement", FormMethod.Post, new { enctype = "multipart/form-data" }))
{ %>
<div id="file-uploader-demo1"></div>
<% } %>
你有什么想法吗?非常感谢和抱歉我的英语不好^^我是法国人 嘿,谢谢你的回答。我需要创建一个图像上传(将在单独的页面上创建),这提供了一个很好的例子。我试图做的是创建一个控件,它将显示在一个弹出窗口中,允许用户选择一个已经上传的图像。控件将有一个图像列表,用户只能选择一个图像。我只是不知道如何从模式弹出窗口返回图像名称,该名称可以放在我的视图模型上,而不会丢失以前的更改。当用户选择一个图像并点击sumbit时,我将研究如何执行上面的ajax调用。如果这还不够,也许你可以提供你正在使用的代码?