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

نحوه ارسال پارامتر به فرم های 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 هست براتون قرار میدم.

دانلود سورس