Dear all I am having one main view in which I have three tabs for students,Teacher,Parents I am showing their listing in the tabs now I wanted to give the functionality of add new record to all these three tabs for that I created partial view but the issue is my method is not getting call from partial view as I am using jquery ajax call to not load the entire page below is my code for main view and partial view:
MAIN VIEW CODE:
@model viewModelsWithPartialView.ViewModels.MyViewModel
@section Scripts {
<script>
$(document).ready(function () {
console.log("jquery Loaded from main");
alert('this is alert from main');
$('#propertiesDataTable').DataTable();
});
</script>
<script>
$(document).ready(function () {
$('#relegion').DataTable();
$('#customers').DataTable();
});
</script>
@* <script>
$(document).ready(function () {
$('#propertiesDataTable').DataTable({
"processing": true,
"serverSide": true,
"filter": true,
"ajax": {
"url": "@Url.Action("LoadProperties", "User")",
"type": "POST",
"datatype": "json"
},
"columns": [
],
"order": [[0, "asc"]],
"lengthMenu": [[10, 25, 50], [10, 25, 50]]
});
});
</script> *@
<script>
$(document).ready(function () {
$('#myTab a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
});
});
</script>
}
<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="property-tab" data-toggle="tab" href="#property" role="tab" aria-controls="property" aria-selected="true">Properties</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="reletive-tab" data-toggle="tab" href="#rel" role="tab" aria-controls="mycontroller" aria-selected="false">REl List</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="customer-tab" data-toggle="tab" href="#customer" role="tab" aria-controls="customer" aria-selected="false">Customers</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<!--
<div class="tab-pane fade show active" id="property" role="tabpanel" aria-labelledby="property-tab">
<div id="createPropertySection">
@await Html.PartialAsync("_CreatePropertyPartial")
</div>
<h3>Property List</h3>
<table id="propertiesDataTable" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Type</th>
</tr>
</thead>
<tbody>
@foreach (var property in Model.PropertiesList)
{
<tr>
<td>@property.Id</td>
<td>@property.Name</td>
<td>@property.Price</td>
<td>@property.TypeNavigation?.TypeName</td>
</tr>
}
</tbody>
</table>
</div>
<div class="tab-pane fade" id="rel" role="tabpanel" aria-labelledby="rel-tab">
<h3> List</h3>
<table class="table" id="relegion">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th> Type</th>
<th>Religion</th>
</tr>
</thead>
<tbody>
@foreach (var rel in Model.relist)
{
<tr>
<td>@rel.Id</td>
<td>@rel.Name</td>
<td>@rel.Gender</td>
<td>@rel.DocumentType</td>
<td>@rel.Religion</td>
</tr>
}
</tbody>
</table>
</div>
<!--
<div class="tab-pane fade" id="customer" role="tabpanel" aria-labelledby="customer-tab">
<h3>Customer List</h3>
<table class="table" id="customers">
<thead>
<tr>
<th>ID</th>
<th>Contact Name</th>
<th>Contact Title</th>
<th>Address</th>
<th>City</th>
<th>Region</th>
<th>Postal Code</th>
</tr>
</thead>
<tbody>
@foreach (var customer in Model.CustomersList)
{
<tr>
<td>@customer.CustomerId</td>
<td>@customer.ContactName</td>
<td>@customer.ContactTitle</td>
<td>@customer.Address</td>
<td>@customer.City</td>
<td>@customer.Region</td>
<td>@customer.PostalCode</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
Partial View Code:
@model viewModelsWithPartialView.ViewModels.MyViewModel
<form id="createPropertyForm">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="Name" required />
</div>
<div class="form-group">
<label for="price">Price</label>
<input type="number" class="form-control" id="price" name="Price" required />
</div>
<div class="form-group">
<label for="type">Type</label>
<input type="text" class="form-control" id="type" name="Type" required />
</div>
<button type="submit" class="btn btn-primary">Create Property</button>
</form>
@section Scripts {
<script>
$(document).ready(function () {
alert('this is me from partial');
$(document).on('submit', '#createPropertyForm', function (e) {
e.preventDefault();
$.ajax({
url: '@Url.Action("CreateProperty", "User")',
type: 'POST',
data: $(this).serialize(),
success: function (response) {
if (response.success) {
Swal.fire({
icon: 'success',
title: 'Property Added',
text: 'New property has been added successfully!',
showConfirmButton: false,
timer: 1500
});
$('#propertyList').load('@Url.Action("PropertyList", "User")');
$('#createPropertyForm')[0].reset();
} else {
Swal.fire({
icon: 'error',
title: 'Error',
text: response.message,
});
}
},
error: function () {
Swal.fire({
icon: 'error',
title: 'Error',
text: 'An error occurred while adding the property.',
});
}
});
});
});
</script>
}
Upon checkign I saw the jquery alert is working with main view but not with partial view i have everything in my layout and that is why the main view alert is working datatable are working etc.
What I have tried:
(Duplicated post from above removed)
Submit an article or tip