ارسال پارامتر از View به فرم مودال (Pop Up) در Bootstrap 4

پاسخ هوش مصنوعی

برای ارسال پارامتر از View به یک فرم مودال در Bootstrap 4 در ASP.NET Core، می توانید از AJAX برای بارگذاری پارامترها به یک Partial View استفاده کنید. در زیر یک مثال کامل آورده شده است:

ابتدا ساختار HTML مودال را در View خود اضافه کنید:

<button type="button" class="btn btn-primary" id="openModal">باز کردن مودال</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">عنوان مودال</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="modalBody"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">بستن</button>
            </div>
        </div>
    </div>
</div>

در مرحله بعد، شما باید یک تابع کد JavaScript برای باز کردن مودال و بارگذاری Partial View اضافه کنید:

$(document).ready(function() {
    $('#openModal').click(function() {
        $.ajax({
            url: '/Controller/GetPartialView', // مسیر اکشن شما
            type: 'GET',
            data: { id: 1, name: 'example' }, // ارسال پارامترها
            success: function(result) {
                $('#modalBody').html(result);
                $('#myModal').modal('show');
            },
            error: function() {
                alert('خطا در بارگذاری مودال');
            }
        });
    });
});

اکنون در Controller خود باید اکشنی برای بازگردانی Partial View بنویسید:

public IActionResult GetPartialView(int id, string name) {
    // انجام عملیات با پارامترها
    return PartialView("_YourPartialView", yourModel); // بازگردانی Partial View
}

در نهایت، Partial View خود را به شکل دلخواه طراحی کنید:

<div>
    <p>آی دی: @Model.Id</p>
    <p>نام: @Model.Name</p>
</div>

با این کدها، شما می توانید پارامترهایی را از View به یک فرم مودال در Bootstrap 4 ارسال کنید و Partial View مربوطه را بارگذاری نمایید.

نحوه ارسال پارامتر به فرم های Modal در بوت استرپ

ببینید دقیقا همین لینکی که خودتون هم قرار دادید روش کار رو کاملا واضح توضیح داده. کافی هست یک پروژه خالی رو ایجاد کنید و کدهایی که براتون قرار داده شده در ویوی index یا هر ویوی دیگه ای کپی و پیست کنید و مشاهده کنید که فرم Modal به راحتی کار میکنه.

اما نکته ای که هست اینه که چجوری پارامتر به فرم مودال ارسال کنیم. برای ارسال مقدار یا پارامتر هم روشهای متفاوتی هست که یکی از این روشها رو براتون اینجا مثال میزنم.

• شما یک پروژه خالی رو ایجاد کنید و دقیقا طبق لینک کدها رو کپی و پیست کنید داخل ویوی index (نمایش فرم مودال در bootstrap 4)
• خب حالا کدهایی مربوط به بخش Modal را می تونید جدا کنید. یک ویو به نام _myModal ایجاد کنید و کدهای بخش مودال رو داخلش کپی و پیست کنید. سپس طبق دستور زیر این ویو رو به صورت یک پارشیال ویو صدا بزنید.

<button type="button" id="btnshowmodal" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
</button>

<!-- The Modal -->
@await Html.PartialAsync("_myModal")

• حالا می تونید داخل پارشیال ویوی خودتون یک تگ form به همراه 2 تا input هم اضافه کنید تا مقادیر این input ها رو به صورت پارامتر ارسال کنیم. بنابراین کدهای درون پارشیال ویوی شما میشه مثل زیر :

<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

            <form asp-controller="Home" asp-action="GetInfoFromModal">
                <input id="firstname" name="firstname" type="text" />
                <input id="family" name="family" type="text" />
            </form>

        </div>
    </div>
</div>

• همونطوری که می بینید دو تا input با نام های firstname و family اضافه کردیم. خب حالا میتونید توسط دستورات جی کوئری خیلی راحت به این پارشیال ویو مقدار ارسال کنید. دقت کنید که کدهای جاوا اسکریپت رو درون ویوی index باید بنویسید. بنابراین در انتها ویوی index شما مطابق زیر خواهد بود.

@{
    ViewData["Title"] = "Home Page";
}

<button type="button" id="btnshowmodal" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
</button>

<!-- The Modal -->
@await Html.PartialAsync("_myModal")


@section Scripts{ 
    <script>
        $("#btnshowmodal").on("click", function () {
            $("#firstname").val('ali');
            $("#family").val('rajabi');
        });
    </script>
}

خب حالا اگر پروژه رو اجرا کنید و روی دکمه Modal کلیک کنید مطابق تصویر زیر پارامترهاتون به فرم مودال ارسال شده.

سورس این پروژه هم که با Core 5 و بوت استرپ 4.3.1 هست براتون قرار میدم.

دانلود سورس