在ajax jquery表单中传递querystring参数

时间:2011-07-04 06:29:11

标签: c# asp.net-mvc-2 jquery-plugins jquery-forms-plugin

我正在尝试将一些参数传递给asp.net mvc 2应用程序。我正在使用jqueryform插件。我有3个链接,每个链接在上传文件时都会传递不同的类型。我正在使用一个隐藏字段,后来从服务器上的queystring读取。我试过这个,但请求没有发布?

<script type="text/javascript">

    $(document).ready(function () {
        function subm() {
            $('#fileUploadForm').ajaxForm({
                url: "/Home/Upload/",
                method: "POST",
                beforeSubmit: ShowRequest,
                success: SubmitSuccesful,
                error: AjaxError
            });
        }

        function ShowRequest(formData, jqForm, options) {
            var queryString = $.param(formData);
            alert('BeforeSend method: \n\nAbout to submit: \n\n' + queryString);
            return true;
        }

        function AjaxError() {
            alert("An AJAX error occured.");
        }

        function SubmitSuccesful(responseText, statusText) {
            alert("SuccesMethod:\n\n" + responseText);
        }

        $("#uploadLink").click(function () {
            // set type
            $("input[name=hiddenField]").val("Type1");
            subm();
        })



    });

</script>
<body>
    <form id="fileUploadForm" action="" enctype="multipart/form-data">
    <input type="text" name="filename" />
    <input type="file" id="postedFile" name="postedFile" />

    <input type="hidden" name="hiddenField" />
    <a id="uploadLink">upload type 1</a> <a id="uploadLink2">upload type 2</a> <a id="uploadLink3">
        upload type 3</a>
    </form>
</body>

 public FileUploadJsonResult Upload(HttpPostedFileBase postedFile)
    {
        var type = Request.QueryString["hiddenField"];
        return new FileUploadJsonResult { Data = new { message = "success" } };
    }

public class FileUploadJsonResult : JsonResult
{
    public override void ExecuteResult(ControllerContext context)
    {
        this.ContentType = "text/html";
        context.HttpContext.Response.Write("<textarea>");
        base.ExecuteResult(context);
        context.HttpContext.Response.Write("</textarea>");
    }
}

1 个答案:

答案 0 :(得分:0)

ajaxForm不发送AJAX请求。它AJAX化一个表单。如果您想强制提交AJAX,则应使用ajaxSubmit

$(function() {
    // AJAXify the form
    $('#fileUploadForm').ajaxForm({
        url: '/Home/Upload/',
        method: 'POST',
        beforeSubmit: ShowRequest,
        success: SubmitSuccesful,
        error: AjaxError
     });
});

// the next functions could be declared outside of the document.ready handler

function subm() {
    $('#fileUploadForm').ajaxSubmit();
}

function ShowRequest(formData, jqForm, options) {
    var queryString = $.param(formData);
    alert('BeforeSend method: \n\nAbout to submit: \n\n' + queryString);
    return true;
}

function AjaxError() {
    alert("An AJAX error occured.");
}

function SubmitSuccesful(responseText, statusText) {
    alert("SuccesMethod:\n\n" + responseText);
}

$("#uploadLink").click(function () {
    // set type
    $("input[name=hiddenField]").val("Type1");
    subm();
    return false;
});

另外,为什么要硬编码AJAX请求的url和方法。在构建表单时执行此操作:

<% using (Html.BeginForm("Update", "Home", FormMethod.Post, new { enctype = "multipart/form-data", id = "fileUploadForm" })) { %>
    <input type="file" id="postedFile" name="postedFile" />
    <input type="hidden" name="hiddenField" />
    <a id="uploadLink">upload type 1</a> 
    <a id="uploadLink2">upload type 2</a> 
    <a id="uploadLink3">upload type 3</a>
<% } %>

然后简单地说:

$(function() {
    $('#fileUploadForm').ajaxForm({
        beforeSubmit: ShowRequest,
        success: SubmitSuccesful,
        error: AjaxError
     });
});

这将确保您的应用程序无论在何处托管,都能正常运行。因为如果你像对象那样硬编码,如果你在IIS中的虚拟目录中部署,则url将不再有效。