Open the Same Page as Both Normal and Bootstrap Pop-Up - asp.net-mvc

Question

As you can see in the picture below I have a form for adding notes and a form for editing notes on my page. What I want to do is: When I click edit button ("Düzenle" in my page), I want to open the window on the right as a pop-up.
The part codes on the left side of the picture ProjeListPartial.cshtml:
#model List<tbl_Not>
#if (Model.Any())
{
<div class="col-md-12 col-sm-12">
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption caption-md">
<i class="icon-bar-chart font-dark hide"></i>
<span class="caption-subject font-dark bold uppercase"><a>Proje Notları Toplam: #Model.Count() </a></span>
</div>
</div>
<div class="portlet-body">
<div class="scroller" style="height: 338px;" data-always-visible="1" data-rail-visible1="0" data-handle-color="#D7DCE2">
<div class="general-item-list">
#foreach (var item in Model)
{
<div class="item">
<div class="item-head">
<div class="item-details">
<a class="item-name primary-link">#item.Adi</a>
<br />
#if (Fonksiyonlar.KulYetSvys((int)Sabitler.YtkSeviyesi.TamYetki))
{
<span class="item-label">#item.tbl_Kullanici.Adi</span>
}
<span class="item-label">#item.EklenmeTarihi.ToString("dd.MM.yyy")</span>
#if (Fonksiyonlar.KulYetSvys((int)Sabitler.YtkSeviyesi.BirimTamYetki) || Fonksiyonlar.KulYetSvys((int)Sabitler.YtkSeviyesi.TamYetki))
{
<span class="item-status">
<!-- This is my edit code -->
Düzenle
<!-- -->
Sil
</span>
}
</div>
</div>
<div class="item-body"> #item.Icerik </div>
</div>
}
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-left: 0px;">
<div class="col-md-12">
<div class="dataTables_paginate paging_bootstrap_number hidden-print" id="sample_3_paginate">
<ul class="pagination" style="visibility: visible;">
#Html.Raw(ViewBag.Sayfalama)
</ul>
</div>
</div>
</div>
}
else
{
<h3>Not Bulunmamaktadır.</h3>
}
The part codes on the right side of the picture Ekle.cshtml:
#model tbl_Not
#{
ViewBag.Title = "Not";
bool IsProjeNotu = Model.ProjeID > 0 ? true : false;
if (IsProjeNotu)
{
Layout = null;
}
}
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-file-o"></i>Not Ekle/Düzenle
</div>
<div class="tools">
</div>
</div>
<div class="portlet-body #(IsProjeNotu?"portlet-collapsed":"")">
<form method="post" role="form" action="#Url.Action("Ekle", "Not", new { ProjeID = Model.ProjeID, BirimID = Model.BirimID, IsProjeNotu = IsProjeNotu })">
<input type="hidden" name="ID" value="#Model.ID" />
<div class="form-body">
#if (!IsProjeNotu)
{
<div class="col-lg-6 formbox pl">
<span>Birim Adı:</span>
<select name="BirimID" id="Birim" class="form-control">
#Html.Raw(ViewBag.Birim)
</select>
</div>
<div class="col-lg-6 pl pr formbox" onchange="return IlGetir();">
<span>Proje Adı:</span>
<select name="ProjeID" id="Projeler" class="form-control"></select>
</div>
}
<div class="col-md-6 pl formbox">
<span>İl/İller:</span>
<select multiple id="Iller" class="form-control">
#foreach (tbl_Il item in ViewBag.Iller)
{
<option value="#item.ID">#item.Adi</option>
}
</select>
<button id="SolaYolla" type="button" class="btn blue btn-sm" data-style="slide-up" data-spinner-color="#333">
<i class="fa fa-plus"></i> Ekle
</button>
</div>
<div class="col-md-6 formbox pr">
<span>İl Çıkar</span>
<select multiple id="SecilenIller" name="IlID" class="form-control">
#foreach (tbl_NotIlIliski item in Model.tbl_NotIlIliski.ToList())
{
<option value="#item.IlID">#item.tbl_Il.Adi</option>
}
</select>
<button id="SagaYolla" type="button" class="btn blue btn-sm" data-style="slide-up" data-spinner-color="#333">
<i class="fa fa-close"></i> Çıkar
</button>
</div>
<div class="col-md-12 formbox pr pl">
<span>Başlık:</span>
<input type="text" maxlength="250" class="form-control" style="width: 230px;" value="#Model.Adi" name="Adi" />
</div>
<div class="col-md-12 formbox pr pl">
<span>İçerik:</span>
<textarea class="mceEditor" style="width: 230px;" name="Icerik">#Model.Icerik</textarea>
</div>
</div>
<div class="col-md-12 formbox pr pl">
<span>Not Durumu:</span>
#foreach (var item in Sabitler.NotDurum)
{
<label class="mt-radio mt-radio-outline" style="margin-left: 15px;">
#item.Adi
<input #( Model.DurumID == 0 ? (item.ID == 1 ? "checked='checked'" : "") : (item.ID == Model.DurumID ? "checked='checked'" : "") ) type="radio" value="#item.ID" name="DurumID" />
<span></span>
</label>
}
</div>
<input type="submit" class="btn blue" id="Kaydet" onclick="$('#SecilenIller option').prop('selected', true);" value="Kaydet" />
</form>
</div>
When I click edit button (Düzenle), this is how a screen comes out: