Simple .NetCore razor page with master/detail grids and JSON queries and bootstrap modal page.
Index.cshtml
@page
@model BPMPredev1UI.Models.BPTemplate
@{
ViewData["Title"] = "Templates";
}
<div class="text-center">
<button id ="addbptbutton" type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#myModal" data-url="@Url.Action("BPTemplateModal","BPTemplate","api")"> Add modal</button>
<div id="divmaster">
<table id="tblmaster" class="table table-striped table-bordered">
<thead class="table-primary">
<tr>
<th scope="col">Template Id</th>
<th scope="col">Name</th>
<th scope="col">Functions</th>
</tr>
</thead>
<tbody id="tblmasterbody"></tbody>
</table>
</div>
<div id="divdetail">
<table id="tbldetail" class="table table-striped table-bordered">
<thead class="table-secondary">
<tr>
<th scope="col">Template Id</th>
<th scope="col">Name</th>
<th scope="col">StepId</th>
<th scope="col">Functions</th>
</tr>
</thead>
<!--id part is important. lines will be appended by id -->
<tbody id="tbldetailbody"></tbody>
</table>
</div>
<div id="notification"></div>
<div id='myModal' class='modal'>
<div class="modal-dialog">
<div class="modal-content">
<div id='myModalContent'></div>
</div>
</div>
</div>
</div>
@section scripts{
<script>
$(function () {
showmasterbpt();
});
</script>
}
Modal.cshtml
@model BPMPredev1UI.Models.BPTemplate
<<div>
<!-- Modal header vs. part is in index.cshtml. Take after header part -->
<div class="modal-header">
Details
</div>
<!-- Modal Body -->
<div class="modal-body">
<p class="statusMsg"></p>
<form role="form">
<div class="form-group">
<label for="inputName">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Enter your name" />
</div>
<div class="form-group">
<label for="id">Id</label>
<input type="text" class="form-control" id="id" placeholder="Id" />
</div>
</form>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary submitBtn" onclick="addupdbptmaster()">SUBMIT</button>
</div>
</div>Site.js
// Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
// for details on configuring this project to bundle and minify static web assets.
// Write your Javascript code.
function showmasterbpt() {
$.ajax({
url: 'http://localhost:62174/GetBPTJsonDetail',
type: "GET",
contentType: "application/json; charset=utf-8",
//data send parameter to service. controller must be suitable
data: "{}",
dataType: "json",
success: showmasterbptdata,
error: function (result) {
alert("Error");
}
});
}
function showmasterbptdata(data) {
$("#tblmasterbody").empty();
for (i in data.row) {
// var datastr = JSON.stringify(data.row[i]);
// var jsonObj = JSON.parse(datastr);
$("#tblmasterbody").append(`<tr><td>${data.row[i].BPTemplateId}</td>
<td>${data.row[i].Name}</td>
<td>
<button class = "btndetail" id="detailbutton${data.row[i].BPTemplateId}">detail</button>
<button onclick="deletemasterbpt(${data.row[i].BPTemplateId})">delete</button></td><tr>`);
$("#detailbutton" + data.row[i].BPTemplateId).on('click', $.proxy(showdetailbptdata, this, data.row[i]));
// $("#detailbutton" + data.row[i].BPTemplateId).click(function () { showdetaildata(jsonObj) });
// $("#detailbutton" + i).click($.proxy(showdetaildata, null, jsonObj));
}
//var btns;
//$('.btndetail').each(function (index, obj) {
// btns += $(this).attr('id');
//});
// alert(btns);
}
function deletemasterbpt(id) {
$.ajax({
url: '/api/BPTemplate?' + $.param({ "id": id }),
dataType: "json",
type: "DELETE",
contentType: 'application/json; charset=utf-8',
data: {id:id},
async: false,
processData: false,
cache: false,
success: function (data) {
showmasterbpt();
},
error: function (xhr) {
alert('error');
}
});
}
function deletedetail(id) {
}
function showdetailbptdata(detaildata) {
var html = "";
for (i in detaildata.BPTemplateDetails) {
html += `<tr>
<td>${detaildata.BPTemplateDetails[i].BPTemplateDetailId}</td>
<td>${detaildata.BPTemplateDetails[i].Name}</td>
<td>${detaildata.BPTemplateDetails[i].StepId}</td>
<td><button onclick="deletedetail(${detaildata.BPTemplateDetails[i].BPTemplateDetailId})">delete</button></td>
</tr>`;
}
$("#tbldetailbody").html(html);
}
function addupdbptmaster() {
var id = $('#id').val();
if (id != "") { updatebptmaster(); }
else { addbptmaster(); }
}
function addbptmaster() {
var name = $('#inputName').val();
var email = $('#inputEmail').val();
var message = $('#inputMessage').val();
var bpTemplate = { "Name": name };
if (name.trim() == '') {
alert('Please enter your name.');
$('#inputName').focus();
return false;
} else {
var bptemplateJson = JSON.stringify({ "Name": name });
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
url: 'http://localhost:62174/PostBPTJson',
dataType: "json",
data: bptemplateJson,
failure: function (errMsg) {
alert(errMsg);
},
beforeSend: function () {
$('.submitBtn').attr("disabled", "disabled");
$('.modal-body').css('opacity', '.5');
},
success: function (msg) {
$('.statusMsg').html('<span style="color:green;">Registered</p>');
$('.submitBtn').removeAttr("disabled");
$('.modal-body').css('opacity', '');
}
});
}
showmasterbpt();
}
function updatebptmaster() {
var name = $('#inputName').val();
var id = $('#id').val();
if (name.trim() == '') {
alert('Please enter name.');
$('#inputName').focus();
return false;
} else {
var bptemplateJson = JSON.stringify({"BPTemplateId":id, "Name": name });
$.ajax({
type: 'PUT',
contentType: "application/json; charset=utf-8",
url: 'http://localhost:62174/PostBPTJson',
dataType: "json",
data: bptemplateJson,
failure: function (errMsg) {
alert(errMsg);
},
beforeSend: function () {
$('.submitBtn').attr("disabled", "disabled");
$('.modal-body').css('opacity', '.5');
},
success: function (msg) {
$('.statusMsg').html('<span style="color:green;">Registered</p>');
$('.submitBtn').removeAttr("disabled");
$('.modal-body').css('opacity', '');
}
});
}
showmasterbpt();
}
$("#addbptbutton").click(function () {
var $buttonClicked = $(this);
var id = $buttonClicked.attr('data-id');
var options = { "backdrop": "static", keyboard: true };
$.ajax({
type: "GET",
url: '/api/BPTemplate/BPTemplateModal',
contentType: "application/json; charset=utf-8",
data: { "Id": id },
datatype: "json",
success: function (data) {
$('#myModalContent').html(data);
$('#myModal').modal(options);
$('#myModal').modal('show');
},
error: function () {
alert("Dynamic content load failed.");
}
});
});
//$("#closebtn").on('click',function(){
// $('#myModal').modal('hide');
$("#closbtn").click(function () {
$('#myModal').modal('hide');
});
Site.css
/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
button.accept-policy {
font-size: 1rem;
line-height: inherit;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
}
input {
max-width: 280px;
}
.entry {
min-width: 250px;
display: inline-block;
}
.details, .edit, .delete {
cursor: pointer;
color: #337ab7;
text-decoration: underline;
}
ul {
padding-left: 0;
list-style-type: none;
}
#content {
min-height: 500px;
}