上传asp.net mvc 2后没有出现对话框

时间:2011-05-09 07:30:21

标签: asp.net-mvc-2 jquery-dialog

成功上传后我的对话框没有弹出?上传工作正常,但$(“#dialog-confirm”)。对话框不起作用?

<h2>
    upload Data</h2>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="../../Scripts/jqueryform.js" type="text/javascript"></script>
<script src="../../Scripts/jblock.js" type="text/javascript"></script>

<script src="../../Content/jquery-ui-1.8.12.custom/js/jquery-ui-1.8.12.custom.min.js"
    type="text/javascript"></script>

<link href="../../Content/jquery-ui-1.8.12.custom/css/ui-lightness/jquery-ui-1.8.12.custom.css"
    rel="stylesheet" type="text/css" />



<script type="text/javascript">
    $(function () {
        $("#ajaxUploadForm").ajaxForm({
            iframe: true,
            dataType: "json",
            beforeSubmit: function () {
                $("#ajaxUploadForm").block({ message: '<h1><img src="/Content/busy.gif" /> uploading file...</h1>' });
            },
            success: function (result) {
                $("#ajaxUploadForm").unblock();
                $("#ajaxUploadForm").resetForm();
                $.growlUI(null, result.message);

                //alert(result.message);

                //does not popup??
                $("#dialog-confirm").dialog({
                    resizable: false,
                    height: 140,
                    modal: true,
                    buttons: {
                        "Ok":
                        function () {
                            alert('ok');
                            $(this).dialog("close");
                        }
                    ,
                        Cancel: function () {
                            $(this).dialog("close");
                        }
                    }
                });


            },
            error: function (xhr, textStatus, errorThrown) {
                $("#ajaxUploadForm").unblock();
                $("#ajaxUploadForm").resetForm();
                $.growlUI(null, 'Error uploading file');
            }
        });
    });
</script>
<form id="ajaxUploadForm" action="<%= Url.Action("AjaxUpload", "Home")%>" method="post"    enctype="multipart/form-data">
<fieldset>
    <legend>Upload a file</legend>
    <label>
        File to upload:
        <input type="file" name="file" />(100MB max size)</label>
    <input id="ajaxUploadButton" type="submit" value="Submit" />
</fieldset>
</form>


  public FileUploadJsonResult AjaxUpload(HttpPostedFileBase file)
    {
        // TODO: Add your business logic here and/or save the file
        System.Threading.Thread.Sleep(2000); // Simulate a long running upload

        // Return JSON
        return new FileUploadJsonResult { Data = new { message = string.Format("{0} uploaded successfully.", System.IO.Path.GetFileName(file.FileName)) } };
    }

1 个答案:

答案 0 :(得分:0)

我看到您正在使用jquery.form插件来对表单进行AJAX化并从控制器操作中返回JSON。以下是documentation对此方案的说法:

  

由于无法上传   使用浏览器的文件   XMLHttpRequest对象,Form Plugin   使用隐藏的iframe元素来提供帮助   有了这个任务。这是常见的   技术,但它有固有的   限制。 iframe元素是   用作表格的目标   提交操作意味着   服务器响应写入   iframe中。如果回复,这很好   type是HTML或XML,但不起作用   如果响应类型是脚本也是如此   或JSON,两者都经常包含   需要重复的字符   找到时使用实体引用   HTML标记。

     

应对挑战   脚本和JSON响应,表单   插件允许这些响应   嵌入textarea元素和它   建议你这样做   这些响应类型在使用时   与文件上传相结合。

因此要使用此服务器,服务器的响应需要如下所示:

<textarea>{ message: 'file uploaded successfully' }</textarea>

这个自定义FileUploadJsonResult在您的控制器操作中正在做什么?