.Net Core MVC Bootstrap Modal Kullanımı(Jquery ile)

Merhaba arkadaşlar,
Bu yazımda Bootstrap Modali Jquery ile kullanımdan bahsediyor olacağım.
Genelde bütün örnekler Modal’da veri göstermek üzerine olduğu için ben modal ile veri eklemeyi göstereceğim.

Bu yazının adını .Net Core MVC diye başlattım fakat yaptıklarım UI(User Interface) kısımlarını ilgilendirdiği için .Net MVC’de de geçerli olacaktır.
Boş bir MVC projesi açarak başlayalım. Ben .Net Core MVC projesi açtım.

Öncelikle bir model oluşturarak başlayalım.

namespace ModalWithJquery.Models
{
    public class FakeDataModel
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string FullName { get; set; }
    }
}

Sonrasında Controller tarafıyla ilerleyelim.
HomeController içerisine CreateModal isimli methodlar ekledim.

using Microsoft.AspNetCore.Mvc;
using ModalWithJquery.Models;
using System.Diagnostics;

namespace ModalWithJquery.Controllers
{
    public class HomeController : Controller
    {
        private readonly ILogger<HomeController> _logger;

        public HomeController(ILogger<HomeController> logger)
        {
            _logger = logger;
        }

        public IActionResult Index()
        {
            return View();
        }

        public IActionResult CreateModal()
        {
            return PartialView("_ModalView");
        }

        [HttpPost]
        public IActionResult CreateModal(FakeDataModel model)
        {
            // todo db operations etc...

            return Json($"{model.FullName} kaydı eklendi !");
        }

        public IActionResult Privacy()
        {
            return View();
        }

        [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
        public IActionResult Error()
        {
            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
        }
    }
}

Gördüğünüz üzere, CreateModal bir PartialView dönüyor. Diğer CreateModal methodunu ise post olarak işaretledim, işlemleri yapıp json olarak dönüş yapıyoruz. Fake data alıp direkt dönüş yaptım ben test amaçlı 🙂

Şimdi Html tarafına geçelim. Views > Home > Index.cshtml açıp aşağıdaki gibi düzenledim.

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

<div id="modal-view"></div>

<p>
    <button class="btn btn-primary" type="button" id="btnInsert" data-url="@Url.Action("CreateModal", "Home")">Yeni Kayıt Ekle</button>
</p>

@section Scripts {
    <script>

        $("#btnInsert").click(function (e) {

            var url = $(this).data('url');

            var modal = $("#modal-view");

            $.get(url).done(function (data) {
                modal.html(data);
                modal.find('.modal').modal('show');
            });
        });
    </script>
}

Bir adet yeni kayıt oluşturmak için kullanacağımız buton ekledim. Bu butonda data-url etiketine dikkatinizi çekmek isterim. Bu kısım bizim modal olarak açacağımız partial view dönen controllerımızı işaret etmektedir.

Jquery kodlarına bakarsanız eğer btnInsert butonuna tıklandığında, data-url kısmında yazan url’i alıyorum ve get ile istek atıyorum. İstek sonucunda bize bir partial view dönüyor. Bu partial view’ı Index.cshtml içine alıp modal şeklinde açabilmemiz için en yukarıda görebileceğiniz modal-view isimli boş div’in içerisine data olarak ekliyorum. Sonrasında ise show diyerek moodali açıyorum.

Şimdi Views > Home > klasörü altına _ModalView.cshtml isimli bir view ekleyelim ve Modal olarak kullanacağımız PartialViewımızı hazırlayalım.
_ModalView.cshtml;

<div class="modal fade" id="ModalCrate" tabindex="-1" aria-labelledby="ModalCrateLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Yeni Kayıt Oluştur</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">

                <div class="mb-3">
                    <label for="FirstName" class="col-form-label" disabled>First Name</label>
                    <input id="FirstName" class="form-control" type="text"/>
                </div>

                <div class="mb-3">
                    <label for="LastName" class="col-form-label" disabled>Last Name</label>
                    <input id="LastName" class="form-control" type="text"/>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Kapat</button>
                <button type="button" class="btn btn-primary" id="btnModalSave" data-save="modal-create">Oluştur</button>
            </div>
        </div>
    </div>
</div>

<script>
    $("#btnModalSave").click(function () {
        var requestModel = new Object();
        requestModel.FirstName = $("#FirstName").val();
        requestModel.LastName = $("#LastName").val();
        requestModel.FullName = requestModel.FirstName + " " + requestModel.LastName;

        $.post("/Home/CreateModal", requestModel).done(function (res) {
            $('#modal-view').find('.modal').modal('hide');
            alert(res);
        });
    });
</script>

Modalimizi bu şekilde ekrana çıkartmış olduk;
Oluştur butonuna bastığımızda CreateModal methoduna gidiyoruz ve işlemlerimiz yapıp modali kapatıyoruz alert ile gelen cevabı ekrana bastım.

İşlemler bu kadar.

Umarım yardımcı olabilmişimdir.

Herkese iyi çalışmalar dilerim.