Question

我有一个jquery UI窗口，它有一组文本框和一个图像上传器。我已经把它运行得很好，但是我遇到了图像上传器的问题。

当用户点击上传他们的图片时，代码触发正常，但在回发后返回到同一页面，但显示为平面页面（即没有UI窗口，没有样式）。

IM猜测，由于页面有回发，因此它对之前的状态一无所知。对于noob有点问题道歉，我通常会参与MVC项目，并且可以在我的睡眠中做到这一点。

任何人都可以就我的行为提出任何建议。代码：

这会从网格加载窗口：

$("a[name^='editSection_']").on("click", function (e) {
    e.preventDefault();

    var id = $(this).data("id");
    var divDiag = $("#addEdit");


    $.ajax({
        url: "/edit.aspx?id=" + id,
        success: function (data) {
            $(divDiag).html(data);
            $(divDiag).dialog({
                show: { effect: 'drop', direction: "up" },
                title: "Editing Feature Box",
                height: 800,
                width: 740,
                modal: true,
                resizable: false,
                option: "show",
                close: function (ev, ui) {
                    window.location.reload(true);
                }
            });
        },
        error: function (data) {
            $(divDiag).html(data);
            $(divDiag).dialog({

                show: { effect: 'drop', direction: "up" },
                title: "Editing Feature Box",
                height: 800,
                width: 740,
                modal: true,
                resizable: false,
                option: "show",
                close: function (ev, ui) {
                    window.location.reload(true);
                }
            });
        }
    });

这是图片上传器的HTML ..

        <asp:FileUpload ID="editImage" runat="server" />
        <asp:Button ID="btnUploadImage" Text="Upload" runat="server" OnClick="btnUploadImage_Click" />
        <asp:Label ID="lblUpload" runat="server"></asp:Label>

代码在btnUploadImage上运行：

    protected void btnUploadImage_Click(object sender, EventArgs e)
    {
        if (editImage.HasFile)
        {
            try
            {
    .....code to upload sits here

上传完成后，我想直接回到与之前状态相同的UI窗口。

任何帮助非常感谢

Answer 1

你是对的，文件上传控件在页面上执行完整的回发，以便上传文件，以便打开的对话框丢失。从我看到你有两个选择：

在回发之后以与之前相同的状态重新打开Jquery对话框（在您的情况下，这可能是不可能或不可取的）
将“文件上载”控件更改为其他内容。也许ajax上传在这里是更好的选择，例如this one。

Answer 2

如果你擅长jquery，那么使用以下jquery组件你必须为你的解决方案定制这个

Dropzonejs

在回发后停止jquery ui窗口关闭

2 个答案: