ایجاد فرم Modal با بوت استرپ در Asp.net core

با سلام 

ببینید فرم های modal و مثال های اونا داخل سایت بوت استرپ هست 

کافیه عبارت bootstrap modal form رو سرچ کنید 

فرم های. modal با یک انیمیشن خاصی نمایش داده میشن به طور مثال فرض کنید شما یه سری دسته بندی خاص داخل وب سایت خودتون دارید که میخواهید اونا رو حذف کنید وقتی روی دکمه حذف بزنید فرم مدال داخل پنجره مرورگر زیر نوار آدرس با یه انیمیشن خاص ظاهر میشه 

به طور مثال در همین سامانه پرس نت از فرم های Modal هم استفاده شده

به فرض مثال اگر شما پاسخ یکی از پرسش ها رو داده باشید و بعد متوجه شده باشید این پاسخ اشتباه بوده وقتی روی دکمه حذف پاسخ میزنید یه فرم باز میشه که اول یه تاییده از شما میخواد برای حذف و بعد روی دکمه حذف کلیک میکنید

امیدوارم تونسته باشم شما رو راهنمایی کرده باشم 

موفق باشید 🌹🌹🌹

معمولا در دو حالت از Modal استفاده میشه:

1- جهت اطلاع رسانی یا توضیحات یا امثال این. که کلا سمت کلاینت هست و با کلیک روی یه دکمه Html نمایش داده میشه.

2 - بعد از انجام یه عملیات خاص مثل حذف ، اضاف، یا هر اکشن دیگه ای.

شما مشخص نکردید کدوم حالت رو میخواین ولی در کل کدهای یه Modal بوت استرپ به شکل زیر هست و شما میتونید متن های هدر، بادی و فوتر رو به ذلخواه تغییر بدید:

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

برای مودال های اکتیو چطور کار میکنیم ؟ منظورم مودال هائی هستش که با پارشیال های مختلف تقسیم شده و داینامیک شده هستند و برای صفحات مختلف تغییر پیدا میکنند .

برای مودال  Edit  چطور عمل میکنیم ؟

آیا همچنان JQuery رو برای استخراج اطلاعات از پایگاه داده توسط Controller لازم داریم ؟

اگر JQuery داره چطوره ؟

آیا کد هایـ j Query زیر Bootstrap 5 کار میکنند ؟ : من استفاده کردم و اصلا به کنترل نمیره و جواب نمیاره 

(function ($) {
    function ApplicationRole() {
        var $this = this;

        function initilizeModel() {
            $("#MyModal").on('loaded.bs.modal', function (e) {

            }).on('hidden.bs.modal', function (e) {
                $(this).removeData('bs.modal');
            });
        }
        $this.init = function () {
            initilizeModel();
        }
    }
    $(function () {
        var self = new ApplicationRole();
        self.init();
    })
}(jQuery))

1- برای مدال های داینامیک من از jquery  استفاده میکنم. به این ترتیب که به هدر و بادی مدال یه ID میدم که بار که بخوام محتواشون تغییر کنه، محتوای جدید رو با jquery ارسال میکنم به مدال.

2- بله jquery با همه ی نسخه های بوت استرپ کار میکنه. در واقع jquery وابستگی به بوت استرپ نداره.

3- برای ارسال ازلاعات به کنترلر باید ار Ajax استفاده کرد.

نمونه ای از ارسال اطلاعات به کنترلر به وسیله Ajax :

$.ajax({
        type: "post",
        url: '/Dashboard/CreateUser',
        data: fData,

        success: function (result) {
              alert("Success")
            }
        },

        error: function () {
            alert('Failed')
        }
})

توضیحات :

- توی ajax سه مولفه اصلی وجود داره:

       type: برای ارسال اطلاعات باید "post" باشه

       url: آدرس ارسال اطلاعات ( کنترلر و اکشن)

       data: اطلاعات مورد نظر جهت ارسال

- در کدهای بالا به جز این موارد 2 متد success و error هم وجود داره.

        success : در صورتی که خطایی در ajax وجود نداشته باشه، اطلاعات ارسال شده و نتیجه از طرف کنترلر در بدنه این متد قابل هندل هست.

         error :  در صورتی که در اجرای ajax مشکلی وجود داشته باشه، این متد اجرا میشه.

نکنه : در نسخه های جدید Jquery پیشنهاد میشه به جای success و error، از done و fail استفاده بشه. ولی خب success و error هم جواب میده.

نمایش فرم مودال در بوت استرپ 4