Passing querystring parameter in ajax jquery form
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.
加载中,请稍侯......
精彩评论