سلام
من کلاس زیر را نوشته ام
public partial class Person
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public byte[] Image { get; set; }
}
و کنترلر زیر را هم دارم
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(Person person)
{
if (ModelState.IsValid)
{
db.People.Add(person);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(person);
}
وview زیر را هم دارم
@model Modal5.Models.Person
@{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Create</h2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Person</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="form-group">
<div class="row">
<div class="col-12 col-md-12 text-center">
<div class="col-9">
<input type="file" name="Photo" id="imgInp" />
</div>
</div>
<div class="col-12 col-md-12 text-center ">
<img id="blah" src="#" alt="عکس " style="width: 200px; height: 300px;" />
</div>
</div>
</div>
</div>
</div>
}
<div class=" col-lg-6 text-center">
<button Id="Insert" value="Insert" class=" btn btn-success rounded ">
<span>Insert</span>
</button>
</div>
<div>
@Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function () {
readURL(this);
});
</script>
<script>
$(function () {
var a = $("#Insert");
a.on("click", function () {
debugger;
var token = $('input[name=__RequestVerificationToken]').val();
var dataObject = {
FirstName: $("#FirstName").val(),
LastName: $("#LastName").val(),
Image: $("#imgInp").val()
};
$.ajax({
url: '@Url.Action("Create", "People")',
data: {
__RequestVerificationToken: token,
person: dataObject
},
type: "POST",
success: function (res) {
}, error: function () {
}
});
});
});
</script>
@Scripts.Render("~/bundles/jqueryval")
}
اما نمیدانم چگونه باید عکس را به کنترلر برای ثبت انتقال بدهم
بایدچه کدی بنویسم
باتشکر
در سمت سرور یعنی اکشن شما باید یک ورودی از نوع HttpPostedFileBase دریافت کنید. پس از آن در client یعنی کد های جاوااسکریپتی شما باید از FormData هنگام ارسال فایل استفاده کنید. فایل عکس مورد نظر به همراه اطالاعات دیگر را درون FormData قرار داده و ارسال می کنیم.
var person = {
FirstName: $("#FirstName").val(),
LastName: $("#LastName").val()
};
var form = new FormData();
var files = $("#imgInp").get(0).files;
if (files.length > 0) {
form.append("photo", files[0]);
}
form.append("FirstName", person.FirstName);
$.ajax({
data:form
})
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(Person person,HttpPostedFileBase photo)
{
if (ModelState.IsValid)
{
db.People.Add(person);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(person);
}
سلام
باتشکر ازراهنمای شما مهندس من کد زیر را نوشتم
<script>
$(function () {
var a = $("#Insert");
a.on("click", function () {
debugger;
var person = {
FirstName: $("#FirstName").val(),
LastName: $("#LastName").val()
};
var form = new FormData();
var files = $("#imgInp").get(0).files;
if (files.length > 0) {
form.append("photo", files[0]);
}
form.append("FirstName", person.FirstName);
$.ajax({
url: '@Url.Action("Create", "People")',
data: form,
type: "POST",
success: function (res) {
}, error: function () {
}
});
});
});
</script>
اما در کنسول مرورگر ارور زیر را میدهد
TypeError: 'append' called on an object that does not implement interface FormData.
مهندس ajax را چگونه باید مقدار دهی کنم
باتشکر
باید دو option رو به رو را به ajax بدید processData: false, contentType: false :
$.ajax({
url: '@Url.Action("Create", "People")',
data: form,
type: "POST",
processData: false,
contentType: false,
success: function (res) {
}, error: function () {
}
});
سلام
مهندس اگر بخواهیم ValidateAntiForgeryToken استفاده کنیم
من کد را بصورت زیر تغییر دادم اما کار نکرد باید چکارکنم
<script>
$(function () {
var a = $("#Insert");
a.on("click", function () {
var person = {
FirstName: $("#FirstName").val(),
LastName: $("#LastName").val()
};
var token = $('input[name=__RequestVerificationToken]').val();
var form = new FormData();
var files = $("#imgInp").get(0).files;
if (files.length > 0) {
form.append("photo", files[0]);
}
form.append("FirstName", person.FirstName);
form.append("LastName", person.LastName);
$.ajax({
url: '@Url.Action("Create", "People")',
data: {
__RequestVerificationToken: token,
person: form
},
type: "POST",
processData: false,
contentType: false,
success: function (res) {
}, error: function () {
}
});
});
});
</script>
آن هم باید داخل همان formData قرار بدید:
form.append("__RequestVerificationToken",token);
هیچ کاربری تا کنون از این پست تشکر نکرده است
با ما تماس بگیرید تا در این مسیر همراهتان باشیم :)