How can i render partial view as modal popup on button click? - asp.net-mvc

I am trying to render partial view from controller on button click event to view the details. But unfortunately its not working.
My Controller Action
OwnerController.cs
public IActionResult ShowpopUp(int id) {
var venue = _context.Venues.FirstOrDefault(x=>x.Id==id);
return PartialView(venue);
}
My View All.cshtml
#model List<Venue>
<table class="table table-hover">
<thead>
<th> Property Name </th>
<th colspan="2">Action</th>
</thead>
<tbody>
#foreach(var x in Model)
{
<tr>
<td>
#x.Name
</td>
<td>
<a class="btn btn-default btn-sm" id="#x.Id" onclick="Details(this.id)">Show</a>
</td>
</tr>
}
</tbody>
</table>
<script>
function Details(id)
{
$.get("#Url.Action("ShowpopUp","Owner")/"+id,
function(data) {$('.modal-body').html(data);})
$("#myModal").modal("show");
}
$('#myModal').on('hidden.bs.modal', function(e){
$('.modal-body').html("");
})
}
</script>
myModal
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Details</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

The following example should help achieve your requirement of rendering partial view as modal popup using jQuery Ajax, please check it.
All.cshtml
#model IEnumerable<Venue>
#{
ViewData["Title"] = "All";
}
<h1>All</h1>
<table class="table table-hover">
<thead>
<th> Property Name </th>
<th colspan="2">Action</th>
</thead>
<tbody>
#foreach (var x in Model)
{
<tr>
<td>
#x.Name
</td>
<td>
<a class="btn btn-default btn-sm" id="#x.Id" onclick="Details(this.id)">Show</a>
</td>
</tr>
}
</tbody>
</table>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Details</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#section scripts{
<script>
function Details(id) {
$.get("#Url.Action("ShowpopUp","Owner")/" + id,
function (data) {
$('.modal-body').html(data);
});
$("#myModal").modal("show");
}
</script>
}
ShowpopUp action
public IActionResult ShowpopUp(int id)
{
var venue = _context.Venues.FirstOrDefault(x => x.Id == id);
//specify the name or path of the partial view
return PartialView("_VenueDetail", venue);
}
_VenueDetail.cshtml (partial view under Views/Shared folder)
#model Venue
<h1>Venue Details</h1>
<h2>Id: #Model.Id</h2>
<h2>Name: #Model.Name</h2>
Test Result

Related

How do I access query data in modal popup

This seems like it should be simple but nothing is in ASP.NET Core MVC. I would simply like to present the results of a query in a table inside a modal popup. The modal is opening but the table is empty. Not just that but the table is getting created before I even click the button to show the modal. I'm hoping some kind person out there can help me.
This is the controller action method:
public async Task<IActionResult> GetStudies(int id)
{
var results2 = (from s in _context.Studies
join sn in _context.StudyNodes on s.Id equals sn.StudyId
where sn.NodeId == id
select new BundleNodeViewModel
{
StudyId = s.Id,
StudyName = s.Name
}).ToList();
return Ok(results2);
}
This is the function calling the action:
getStudies = (url, id) => {
$.ajax({
type: 'GET',
url: url,
data: {
'id': id
},
success: function (res) {
console.log(res);
$("#formModal").find(".modal-body").html(res.Name);
$("#formModal").find(".modal-title");
$("#formModal").modal('show');
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
console.log(response);
alert("error");
}
})
};
And this is the modal popup:
<div id="formModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" id="close_" style="background-color:transparent; color:aquamarine; border-style:none">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Assigned Studies</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-md-4">
<form asp-action="Bind" asp-controller="Studies">
<div class="form-group">
<table class="table table-hover" style="height: 300px">
<thead>
<tr class="position-sticky" style="color:aliceblue; background-color:#126E75">
<th class="text-start">
Study
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr class=" table-light">
<td class="text-start">
#item.StudyName
</td>
</tr>
}
</tbody>
</table>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="button" id="btnClosePopup" value="Close" data-dismiss="modal" class="btn btn-danger" />
</div>
</div>
</div>
</div>
I'm really confused about the order in which things are happening. For some reason the code in the modal runs when the parent page is loaded and not when you click the button on the parent page to open the modal. So the model in the foreach() statement is not the model I need it to be. When I click on the open modal button I expect it to go to the controller, get the data and return it to the modal where I can loop through the object and create a table.
Any ideas anyone?
I didn't understand your question but I have tried to do what you might want to do.
we have created dummy data which should you get from the ajax.
If you don not want to open the modal on page load please remove the Document Ready part.
try to place the 'getStudies' function body to your ajax's success block.
$(document).ready(()=>{
getStudies();
});
var data = [
{ 'StudyId': 1,'Name':"STD 10"},
{'StudyId' : 2,'Name':"STD 11"}
];
let getStudies = (url, id) => {
$("#formModal").find("tbody").html('');
$.each(data,(index,val) =>
{
let tr=`<tr class="table-light"><td class="text-start">${val.Name}</td></tr>`;
$("#formModal").find("tbody").append(tr);
});
$("#formModal").modal('show');
};
<html>
<head>
<title>kaushal</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body> <button onClick="getStudies()">open modal</button>
<div id="formModal" style="width:100%;border:1px solid red;" class="modal fade in" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" id="close_" style="background-color:transparent; color:aquamarine; border-style:none">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Assigned Studies</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-md-4">
<form asp-action="Bind" asp-controller="Studies">
<div class="form-group">
<table class="table table-hover" style="height: 300px">
<thead>
<tr class="position-sticky" style="color:aliceblue; background-color:#126E75">
<th class="text-start">
Study
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="button" id="btnClosePopup" value="Close" data-dismiss="modal" class="btn btn-danger" />
</div>
</div>
</div>
</div>
</body>
</html>

Displaying a Modal in Partial View in Asp.net Mvc

After clicking "Advanced search" button i want to open a modal from a partial view where i can apply custom search
Here is my Index.cshtml page for showing data table
#model SmartAdmission.Web.Areas.Admin.Models.InstituteViewModel
#{
ViewBag.Title = "Index";
Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Program Level List</h3>
</div>
<div class="box-body">
#if (TempData["Message"] != null)
{
<div class="alert alert-#TempData["alertType"]">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
#TempData["Message"]
</div>
}
#*<input type="hidden" id="hiddenProvinceId" />*#
<table id="instituteTable" class="table table-bordered table-striped">
<thead>
<tr>
<th>
<button type="button"
class="btn btn-default btn-md" data-toggle="modal"
data-target="#advancedSearchModal"
id="advancedsearch-button">
<span class="glyphicon glyphicon-search"
aria-hidden="true"></span> Advanced Search
</button>
</th>
</tr>
<tr>
<th>Institute Name</th>
<th>Province</th>
<th>Course Name</th>
<th>Program Level</th>
<th>Tution Fee</th>
<th>Ielts</th>
<th>Action</th>
</tr>
</thead>
<tbody>
#{
foreach (var institute in Model.Institutes)
{
<tr>
<td>
#Html.DisplayFor(m => institute.InstituteName)
</td>
<td>
#Html.DisplayFor(m => institute.Province.Name)
</td>
#foreach (var discipline in institute.Disciplines)
{
foreach (var course in discipline.Courses)
{
<td>
#Html.DisplayFor(m => course.CourseName)
</td>
<td>
#Html.DisplayFor(m => course.ProgramLevel.Name)
</td>
<td>
#Html.DisplayFor(m => course.TutionFeePerYear)
</td>
<td>
#Html.DisplayFor(m => course.IeltsMinRequirement)
</td>
}
}
<td>
<a href="#Url.Action("EditInstitute", "Institute" , new { id = institute.Id }, null)" class="btn">
<i class="glyphicon glyphicon-edit"></i>
</a>
<i class="glyphicon glyphicon-trash"></i>
</td>
</tr>
}
}
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form action="/Admin/Institute/DeleteInstitute" method="post">
<div class="modal-header">
<h5 class="modal-title">Delete Item</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Do you want to delete this record?</p>
<input type="hidden" id="id" name="id" value="" />
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger">Yes, Delete!</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
#section scripts
{
<script>
$(document).ready(function () {
$('#instituteTable').DataTable()
});
$(function () {
$("#mydialog").dialog({
modal: true,
width: "800px",
autoOpen: false
});
});
function ConfirmDelete(id) {
$("#id").val(id);
$('.modal').modal('show');
}
</script>
}
This is my partial view
#model SmartAdmission.Web.Areas.Admin.Models.AdvanceSearchModel
<div id="advancedSearchModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form action="/Admin/Institute/GetCustomInstitute" method="post">
<div class="modal-header">
<h5 class="modal-title">Advance Search</h5>
#*<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>*#
</div>
<div class="modal-body">
#Html.TextBoxFor(m=>m.InstituteName)
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger">Yes, Delete!</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
i have tried ajax call on button click and refer the url to the action which return a partial view but that didn't work for me.

Bootstrap modal in ASP.NET MVC opening the modal only for the first id

I have created a simple crud operation for testing the bootstrap modal. I am trying to open my other views in bootstrap modal. But only the first row details is opening for edit operation. I mean the edit form is opening only for the first id. Then the modal is not working anymore.
Here is my Index Page-
#model IEnumerable<AMSTest.Models.tbl_category>
....
<a id="btnCreate" data-toggle="modal" href="#myModal" class="btn btn-primary">Create</a>
<table class="table table-hover">
<tr>
<th>#Html.DisplayNameFor(model => model.category_name)</th>
<th>#Html.DisplayNameFor(model => model.category_image)</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>#Html.DisplayFor(modelItem => item.category_name)</td>
<td>#Html.DisplayFor(modelItem => item.category_image)</td>
<td>
<a id="btnEdit" data-id="#item.category_id" data-toggle="modal" class="btn btn-primary" href="#myModal">Edit</a>
#Html.ActionLink("Details", "Details", new { id=item.category_id }) |
#Html.ActionLink("Delete", "Delete", new { id=item.category_id })
</td>
</tr>
}
</table>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledBy="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<div id="modal-content"></div>
</div>
</div>
</div>
</div>
#section scripts{
<script>
$('#btnCreate').click(function (eve) {
$('#modal-content').load("/Category/Create");
});
$('#btnEdit').click(function (eve) {
$('#modal-content').load("/Category/Edit/" + $(this).data("id"));
});
$('#btnDetails').click(function (eve) {
$('#modal-content').load("/Category/Details/" + $(this).data("id"));
});
$('#btnDelete').click(function (eve) {
$('#modal-content').load("/Category/Delete/" + $(this).data("id"));
});
</script>
}
Now what should I do?

Boostrap Modal not working on ASP.NET MVC

I have readed a lot of blogs and articles about showing MVC partial views using Boostrap modals. It seems that I have exactly what I'm seen on the material consulted but still it doesn't show the modal. I just need to show the partial view with the Album details in a modal. The controller is working fine when I load the URL through the browser.
This is the Index HTML code where the modal is shown:
<tbody>
#foreach( var album in Model.Albums)
{
<tr data-toggle="modal" data-target="#albumModal" data-url="#Url.Action("Album", new { id = album.Id })">
<td>#album.Title</td>
<td>#album.Artist</td>
<td>#album.Genre</td>
<td>#album.Year</td>
</tr>
}
</tbody>
Partial View
<div class="modal fade" id="albumModal" tabindex="-1" role="dialog" aria-labelledby="albumModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="albumModalLabel">Album Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4">
<div class="row">
<label>Album<input class="form-control" type="text" id="title" /></label>
</div>
<div class="row">
<label>Artist <input class="form-control" type="text" id="artist" /></label>
</div>
<div class="row">
<label>Genre <input class="form-control" type="text" id="genre" /></label>
</div>
<div class="row">
<label>Year <input class="form-control" type="text" id="year" /></label>
</div>
</div>
<div class="col-md-8">
<table class="table table-condensed table-striped">
<thead>
<tr>
<th>Track</th>
<th>Song Title</th>
<th>Length</th>
</tr>
</thead>
<tbody class="tracks"></tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
HomeController
[HttpGet]
public ActionResult Album(int? id)
{
if (id == null) return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
var albumInfo = _service.GetAlbumInfo((int) id);
if (albumInfo == null) return HttpNotFound();
return PartialView("_Album", albumInfo);
}
Script
$(document).ready(function() {
$('.list-element').click(function () {
debugger;
var $buttonClicked = $(this);
var url = $buttonClicked.attr('data-url');
$.get(url, function (data) {
$('#albumContainer').html(data);
$('#albumModal').modal('show');
});
});
});
In almost all of the SO questions counsulted, they wasn't using data-target but I am. What do I need to modify to achieve that the modal shows?
VIEW
#model ShowModal
<table>
<tbody>
<tr data-toggle="modal" data-target="#albumModal" data-url="#Url.Action("Album", new { id = album.Id })">
<td>#album.Title</td>
<td>#album.Artist</td>
<td>#album.Genre</td>
<td>#album.Year</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div class="modal" id="albumModal" tabindex="-1" role="dialog" aria-labelledby="albumModal">
#Html.Partial("_albumPartial", Model)
</div>
CONTROLLER
[HttpGet]
public ActionResult Album(int? id)
{
ShowModal modal = new ShowModal();
var albumInfo = _service.GetAlbumInfo((int) id);
modal.Info1 = albumInfo.Info1;//and other fields
return PartialView("_albumPartial", modal);
}
SCRIPT
<script>
$(document).ready(function () {
$("#albumModal").on("show.bs.modal", function (e) {
var button = $(event.relatedTarget) // Button that triggered the modal
var url = button.data('url') // or button.attr("data-url") or get here just the id and create the URL here
$.get(url, function (data) {
$('#albumModal').html(data);
$('#albumModal').modal('show');
});
});
});
</script>

mvc Get a value of element in different cshtml with jquery

I have a page ("mypage.cshtml") and two partial view page ( partial1.cshtml, partial2.cshtml )
when Im in mypage click a button and display a modal which call partial1 with #Html.Partial("patial1") in a modal(bootstrap modal). it consist of html. when I a click a button on this modal it calls another modal consist of partial2..
Here is the issue; When I load the page begining (in mypage ) I need to get the value of checkbox that standing in second modal, that is partial2.
During I view this modal I can get this value with this:
$("input[type='checkbox'][id='4']").val();
it gives me the value which I expect but at the begining(in mypage.cshtml) this returns "undefined" :S
I couldnt understand this stuation both of these modal located in mypage but why I cant get these elements values untill I reach them ?
here is view mypage:
<div id="stack1" class="modal fade" tabindex="-1" data-width="400">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">#Model.Kurulus.TESIS_ADI</h4>
</div>
<div class="modal-body">
<form id="formKaydet" method="post" action="../KurulusBilgileri/KurulusBilgileriniGuncelle">
<div class="row">
<div class="col-md-12">
#Html.Partial("KurulusBilgileriniGuncelle", Model)
</div>
<div class="modal-footer">
<input type="hidden" name="SANAYI_TIPI" id="input_id" />
<input type="hidden" name="SANAYI_TIPI_DIGER" id="input_sanayitipi" />
<button type="button" data-dismiss="modal" class="btn default">Geri</button>
<a class="btn orange" onclick="sanayitipleriKaydet()">Kaydet A</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="stack2" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">#Model.Kurulus.TESIS_ADI</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
#Html.Partial("SanayiTipiSecim", Model.SanayitipiModel)
</div>
</div>
</div>
<div class="modal-footer">
#*<button type="button" data-dismiss="modal" class="btn">Close</button>
<button type="button" class="btn yellow">Ok</button>*#
</div>
</div>
</div>
</div>
and my second modal (SanayiTipiSecim)
<table class="table-full-width">
<thead>
<tr>
<th></th>
<th><strong>Sanayici Tipi</strong></th>
<th><strong>Açıklama</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="SANAYI_TIPI" onclick="javascript:sanayitipiTotextarea(1)" id="1" value="Boya Sanayi">
</td>
<td>
Boya Sanayi
</td>
<td>
Boya üretimi yapan imalathaneler
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="SANAYI_TIPI" onclick="javascript:sanayitipiTotextarea(2)" id="2" value="Enerji üretimi ve dağıtımı">
</td>
<td>
Enerji üretimi ve dağıtımı
</td>
<td>
Ör. Enerji üretim merkezleri, enerji ara istasyonları vb?
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="SANAYI_TIPI" id="3" onclick="javascript:sanayitipiTotextarea(3)" value="Elektrik ve Elektronik Mühendisliği">
</td>
<td>
Elektrik ve Elektronik Mühendisliği
</td>
<td>
Elektronik parçaların üretimi vb?
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="SANAYI_TIPI" id="4" onclick="javascript:sanayitipiTotextarea(4)" value="Genel Mühendislik, imalat ve montaj">
</td>
<td>
Genel Mühendislik, imalat ve montaj
</td>
<td>
Herhangi bir mühendislik aktivitesi, üretim veya montaj vb?
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="SANAYI_TIPI" id="5" onclick="javascript:sanayitipiTotextarea(5)" value="Gıda ve içecek">
</td>
<td>
Gıda ve içecek
</td>
<td>
Gıda, alkollü içki vb?
</td>
script blocks in first page:
<script src="~/Scripts/js/kurulusbilgileri.js"></script>
<script>
sanayitipleriKaydet = function () {
debugger
var data = new Object()
data.ISIM = $("input[name='ISIM']").val();
data.ADRES_METIN = $("input[name='ADRES_METIN']").val();
data.TELEFON = $("input[name='TELEFON']").val();
data.FAKS = $("input[name='FAKS']").val();
data.E_POSTA = $("input[name='E_POSTA']").val();
data.SORUMLU_ISIM = $("input[name='SORUMLU_ISIM']").val();
data.SORUMLU_SOYISIM = $("input[name='SORUMLU_SOYISIM']").val();
data.FAALIYET_ALANI = $("input[name='FAALIYET_ALANI']").val();
data.CEVRE_BILGI = $("input[name='CEVRE_BILGI']").val();
data.BELEDIYE_MUCAVIR_ALAN = $("input[name='BELEDIYE_MUCAVIR_ALAN']:checked").val();
debugger
data.OSB_YERLESIK = $("input[name='OSB_YERLESIK']:checked").val();
data.KIYI_TESISI = $("input[name='KIYI_TESISI']:checked").val();
data.VERSIYON = $("input[name='VERSIYON']:checked").val();
data.SANAYI_TIPI = window.localStorage.getItem("sanayitipiid");
window.localStorage.removeItem("sanayitipiid");
debugger
var jsondata = JSON.stringify(data);
$.ajax({
type: "POST",
contentType: 'application/json',
url: "/KurulusBilgileri/KurulusBilgileriniGuncelle",
data: jsondata,
success: function (result) {
debugger
var jsondata = JSON.parse(result)
if (jsondata.Passed) {
debugger
$('#tdISIM').empty();
$('#tdISIM').append(data.ISIM);
$('#tdADRES_METIN').empty();
$('#tdADRES_METIN').append(jsondata.data.ADRES_METIN);
$('#tdTELEFON').empty();
$('#tdTELEFON').append(jsondata.data.TELEFON);
$('#tdFAKS').empty();
$('#tdFAKS').append(jsondata.data.FAKS);
$('#tdE_POSTA').empty();
$('#tdE_POSTA').append(jsondata.data.E_POSTA);
$('#tdSORUMLU_ISIM').empty();
$('#tdSORUMLU_ISIM').append(jsondata.data.SORUMLU_ISIM);
$('#tdSANAYI_TIPI > #tdtxtSANAYI_TIPI').empty();
$('#tdSANAYI_TIPI > #tdtxtSANAYI_TIPI').append(jsondata.data.SANAYI_TIPI);//sanayitipi id si...
$('#tdFAALIYET_ALANI > #tdtxtFAALIYET_ALANI').empty();
$('#tdFAALIYET_ALANI > #tdtxtFAALIYET_ALANI').append(jsondata.data.FAALIYET_ALANI);
$('#tdCEVRE_BILGI > #tdtxtCEVRE_BILGI').empty();
$('#tdCEVRE_BILGI > #tdtxtCEVRE_BILGI').append(jsondata.data.CEVRE_BILGI);
debugger
if (jsondata.data.BELEDIYE_MUCAVIR_ALAN == "1") {
$("#tdBELEDIYE_MUCAVIR_ALAN > input[name='radioBelediyeMucavirAlan']").prop('checked', true);
}
else
$("#tdBELEDIYE_MUCAVIR_ALAN > input[name='radioBelediyeMucavirAlan']").prop('checked',false);
if (jsondata.data.OSB_YERLESIK == "1") {
$("#tdOSB_YERLESIK > input[name='radioOsbYerlesik']").prop('checked', true);
}
else
$("#tdOSB_YERLESIK > input[name='radioOsbYerlesik']").prop('checked',false);
if (jsondata.data.KIYI_TESISI == "1") {
$("#tdKIYI_TESISI > input[name='radioKiyiTesisi']").prop('checked', true);
}
else
$("#tdKIYI_TESISI > input[name='radioKiyiTesisi']").prop('checked',false);
if (jsondata.data.VERSIYON == "1") {
$("#tdVERSIYON > input[name='radioVersion']").prop('checked', true);
}
else
$("#tdVERSIYON > input[name='radioVersion']").prop('checked',false);
}
},
error: function () {
alert("ajax process in error");
}
});
}
</script>
kurulusbilgileri.js:
$(function () {
$("#btnSanayiTipiKaydet").on('click', sanayitipleriKaydet)
});
sanayiTipiTextGetir = function (id)
{
var text = $('input[id=' + id + ']').val();
debugger;
return text;
}
sanayitipilistesinigoster = function () {
$("#stack2").show();
}
sanayitipiTotextarea = function (id) {
$("#divSanayiTipi").show(600, null);
var sanayitipi = $("#" + id).val();
window.localStorage.setItem("sanayitipiid", id);
$("#input_sanayitipi").val(sanayitipi);
$("#input_id").val(id);
$("#stack2").modal('toggle');
}
Since you load your partial trough a modal, I'm assuming that the actual loading is done using AJAX. This means that when you first load your HTML page (the initial one), the partial is not yet part of the DOM (might have not been requested from the server). This in turn means that you checkbox is also not part of the DOM, and therefore is returned as undefined.

Resources