close
دانلود آهنگ جدید
ارسال درخواست POST به RazorPage Handler و آپلود فایل به صورت Ajax

یک توسعه دهنده .Net

ارسال درخواست POST به RazorPage Handler و آپلود فایل به صورت Ajax

image upload,ajax file upload,razorpages,

من برای پروژه ام نیاز به یک ادیتور متنی داشتم که من SummerNote  رو امنخاب کردم هم سادست هم زیباست و هم سبک و سریع. در این ادیتور وقتی عکسی را میخواهیم اضافه کنید به صورت پیشفرض به base64 تبدیل میکنه و در متن می گنجاند(کاری به بد یا خوب بودنش ندارم). اما من نیاز داشتم عکس انتخابی رو درون سرور آپلود کنم. پس دست به کار شدم !برای ارسال ajax به صورت Post در Razor Pages Handler Method باید 2 نکته را مدنظر داشت1- باید همراه با درخواست مقدار RequestVerificationToken فرم نیز فرستاده شود.2- نام data…

ارسال درخواست POST به RazorPage Handler و آپلود فایل به صورت Ajax

ارسال  درخواست POST به RazorPage Handler و آپلود فایل به صورت Ajax 769

من برای پروژه ام نیاز به یک ادیتور متنی داشتم که من SummerNote  رو امنخاب کردم هم سادست هم زیباست و هم سبک و سریع. در این ادیتور وقتی عکسی را میخواهیم اضافه کنید به صورت پیشفرض به base64 تبدیل میکنه و در متن می گنجاند(کاری به بد یا خوب بودنش ندارم). اما من نیاز داشتم عکس انتخابی رو درون سرور آپلود کنم. پس دست به کار شدم !


برای ارسال ajax به صورت Post در Razor Pages Handler Method باید 2 نکته را مدنظر داشت

1- باید همراه با درخواست مقدار RequestVerificationToken فرم نیز فرستاده شود.

2- نام data فرستاده شده  در ajax  باید هم نام با متغییر ورودی Handler  ما باشد(model binder).


همانطور که در پست قبل گفتم برای دسترسی به Handler های سقارشی آدرس صفحه را به آدرس زیر تغییر میدم


@page "{handler?}/{id:int?}"


با این کار به Url تمیزتری برای دسترسی به handler  سفارشی خواهیم داشت. حالا بریم سراغ کد های جاوااسکریپت و جی کوئری




<link href="~/summernote/summernote.css" rel="stylesheet" />

    <script src="~/summernote/summernote.js"></script>

    <script src="~/summernote/lang/summernote-fa-IR.js"></script>

    <script>

        $(document).ready(function() {

            $('#Course_CourseDescription').summernote({

                lang: 'fa-IR' , // default: 'en-US'

                height: 250,

                callbacks: {

                    onImageUpload: function(files, editor, $editable) {

                        console.log('onImageUpload');

                        sendFile(files[0],editor,$editable);

                    }}

            });

        });



        


        function sendFile(file,editor,welEditable) {

            data = new FormData();

            data.append("file", file);

            $.ajax({

                url: './CreateCourse/Upload',

                beforeSend: function (request) {

                    request.setRequestHeader("RequestVerificationToken", $("[name='__RequestVerificationToken']").val());

                },

                data: data,

                cache: false,

                contentType: false,

                processData: false,

                type: 'POST',

                success: function(data){

                    // alert(data);

                    $('#Course_CourseDescription').summernote("insertImage", data, 'filename');

                },

                error: function(jqXHR, textStatus, errorThrown) {

                    console.log(textStatus+" "+errorThrown);

                }

            });

        }

    </script>


نکته مهم در کد این هست کهباید به data.append("file", file); توجه کنید نام فایل ما این هست که باید در پارامتر ورودی متد handler  ما باشد.اگر همنام نباشد در سمت سرور چیزی دریافت نمیشود.

ونکته دیگر که اگر دقت نکنید مشکل ساز میشود آدرس دهی میباشد  url: './CreateCourse/Upload',  اگر آدرس دهی مشکل داشته باشد ارور syntax در کنسول مرورگر رخ میدهد

باید به قسمت  beforeSend جی کوئری ajax  هم توجه کنید که مسئول ارسالRequestVerificationToken به سمت handler ما هست . اگر این قسمت نباشد ارور 400 در کنسول مرورگر رخ میدهد.


حالا باید به Code behind  بریم و کد های متد Handler سفارشی با نام Upload  را ببینیم:


public ActionResult OnPostUpload(IFormFile file)

        {

            if (file.Length <= 0 && file !=null) return null;


            var fileName = Guid.NewGuid() + Path.GetExtension(file.FileName).ToLower();




            var path = Path.Combine(

                Directory.GetCurrentDirectory(), "wwwroot/MyImages",

                fileName);


            using (var stream = new FileStream(path, FileMode.Create))

            {

                file.CopyTo(stream);


            }




            var url = $"{"/MyImages/"}{fileName}";



            return new JsonResult(url);

        }



به IFormFile file دقت کنید که هم نام فایل ما در کد جی کویریمون هست. بقیه کد ها که برای آپلود عکس روی سرور هست.



توجه دشته باشید که ما از route value  برای ارسال فایل (ها) استفاده نکردیم ! اون پارامتر ورودی برای model binding هست که فایل رو از سمت کاربر بگیره