Passing querystring parameter in ajax jquery form_问答_开发者

Passing querystring parameter in ajax jquery form

开发者 https://www.devze.com 2023-03-16 22:08 出处：网络

I am trying to pass some parameters to an asp.net mvc 2 application. I am using the jqueryform plugin. I have 3 links that each pass a different type when uploading the file. I am using a hiddenfield

I am trying to pass some parameters to an asp.net mvc 2 application. I am using the jqueryform plugin. I have 3 links that each pass a different type when uploading the file. I am using a hiddenfield that is later read from the queystring on the server. I have tried this but the request does not get posted?

<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) {
            v开发者_开发技巧ar 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>");
    }
}

ajaxForm doesn't send an AJAX request. It AJAXifies a form. If you want to force the AJAX submission you should use 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;
});

Also why are you hardcoding the url and method of the AJAX request. Do this when constructing your form:

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

and then simply:

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

This will ensure that your application will work no matter where it is hosted. Because if you hardcode the url as you did and if you deploy in a virtual directory in IIS the url will no longer be valid.