I want to Post a form using Ajax/XMLHttpRequest to a ASP NET Core Controller.
If i simply Post the form it gets the data right in the Controller but when using XMLHttpRequest the fields of my model get defaulted:
I have included my in my code below 2 forms: -one form that simply Posts to the url specified in the action attribute, and the other that calls a method and Post-s with XMLHttpRequest.
HTML+JS
<!DOCTYPE html>
<html>
<head>
<script>
window.submit = function () {
var form = document.getElementById("delegate-form");
var data = new FormData(form);
var xhr = new XMLHttpRequest();
var content=form.getAttribute('Content-Type');
var method=form.getAttribute('method');
var action=form.getAttribute('action');
xhr.open(method,action);
xhr.setRequestHeader('Content-Type',content);
xhr.onload = function () {
if (xhr.status == 200) {
resolve(xhr.response);
}
else if (xhr.status != 200) {
reject("Failed to submit form with status" + xhr.status);
}
}
xhr.send(data);
};
</script>
</head>
<body>
<div id="Form-without-ajax">
<form method="POST" enctype="multipart/form-data" action="http://localhost:8300/api/bulk">
<input type="text" name="Name" value="aa" />
<input type="text" name="ID" value="13"/>
<input type="file">
<br>
<input style="align-content: flex-end" type="submit" />
</form>
</div>
<br>
<div id="Form-with-ajax">
<form method="POST" id="delegate-form" enctype="multipart/form-data" action="http://localhost:8300/api/bulk">
<input type="text" name="Name" value="ab" />
<input type="text" name="ID" value="33"/>
<input type="file">
<br>
</form>
<button onclick="submit()">Submit with delegate</button>
</div>
</body>
</html>
Model
[Serializable]
public class Data {
public string Name { get; set; }
public int ID { get; set; }
}
}
.NET Controller
[HttpPost]
[Route("/api/bulk")]
public async Task TestBulkAsync(Data data) {
//data has Name=null and id=0 when using the XMLHttpRequest
}
P.S I am using multipart/form-data because i want to attach some files too besides that model.And i need a handler like in my case submit because i need to perform additional logic before submitting the form.
xhr.setRequestHeader('Content-Type',content);
Normally, if you pass a FormData object to XMLHttpRequest, it will generate the Content-Type header (which will be a multipart request with a specific boundary attribute) from the FormData object.
Here, you are overriding the Content-Type with one you are determining manually … and you are omitting the boundary attribute. The server then doesn't know where the boundaries are and everything breaks.
Don't override the Content-Type.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments