1

我正在考虑向我的 mvc 项目添加一个 jquery 模态弹出窗口。我一直在看http://www.weirdlover.com/2010/05/20/mvc-render-partial-modal-pop-up-via-jquery-and-colorbox-demo/发帖。

我的场景：我有一个包含几个输入字段（文本框、复选框）的页面。我想要一个链接来打开一个模式弹出窗口来选择一个图像。我有一个控件，它将显示所有图像并允许用户选择图像。我了解如何在上面列出的站点之后打开模式弹出窗口。

我现在不明白的是如何将所选图像名称（myimage.jpg）返回到我的原始页面视图并将其设置为模型上的一个属性，而所有其他模型更改保持不变。

我目前拥有的：MyFormController > ActionMethod:ImageSelected(ImageSelectorModel model)

如果它有效，我如何获取我的“MyFormModel”（以及所有其他更改），设置 MyFormModel.ImageName = model.ImageName 并调用 View(myFormModel)。

谢谢你的帮助

凯文

4

3 回答 3

0

如果用户正在上传图片，我建议您查看 AJAX 上传：http: //valums.com/ajax-upload/。您可以异步抓取图像文件，将其保存到磁盘，并将保存的图像路径（等）作为 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");
    }

请记住：这是一种解决方法，因为浏览器会防止异步文件上传。因此，您可能需要考虑在表单提交过程中添加第二页。在第二个页面上，用户可以使用标准文件输入字段和表单帖子来处理上传图像。http://forums.asp.net/p/1237419/2253919.aspx

于 2010-07-16T06:49:03.330 回答
0

我会在主窗体上使用隐藏的输入字段来做到这一点。当用户单击模式弹出窗口中的图像时，使用 jQuery 处理单击事件并将单击的图像的值（文件名？）分配给隐藏的输入字段。如果您正确命名隐藏的输入字段，ModelBinder 将自动将文件名绑定到您的模型对象，您无需手动更新它。

在主窗体上：

<%= Html.HiddenFor( x => x.ImageFileName ) %>

一些jQuery：

$("#popup a.candidateImage").click(function() {
    $("form input[name=ImageFileName]").value = $("img", this).attr("src");
    // probably also close the modal?
}

我没有对此进行测试，但是您应该明白...如果已填充，我可能还会尝试在主窗体上的 ImageFileName 中显示文件的缩略图。

于 2010-07-16T16:43:20.180 回答
0

我使用ASP.NET MVC2和 AjaxUploader 的新版本：

当我打电话给我的控制器时：

公共 JsonResult AddImg（HttpPostedFileBase 用户文件）

UserFile 始终为空...

剧本：

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>
<% } %>

你有想法吗 ？非常感谢和抱歉我的英语不好^^我是法国人。

于 2010-07-26T11:11:48.247 回答