Question

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

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

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

我目前的情况： MyFormController＆gt; ActionMethod：ImageSelected（ImageSelectorModel模型）

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

感谢您的帮助

凯文

Answer 1

如果用户正在上传图片，我建议您查看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

Answer 2

我会在主窗体上使用隐藏的输入字段来完成它。当用户单击模态弹出窗口中的图像时，使用jQuery处理click事件并将单击的图像值（文件名？）分配给隐藏的输入字段。如果正确命名隐藏的输入字段，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中显示该文件的缩略图。

ASP MVC 2：Jquery模式弹出窗口，如何返回数据

3 个答案: