How to Display a Datatable in Modal Popup with out using partial view.
hear is the my indax.cshtml
<button type="button" class="btn btn-info btn-infolink btn-BranchNetwork">Branch Network</button>
<div class="modal fade" id="itemModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel"> Branch Network</h4>
</div>
<div class="modal-body no-padding">
<div style="width:100%; margin:0 auto;">
<table id="branchTable">
<thead>
<tr>
<th>BranchName</th>
<th>Address</th>
<th>Manager Name</th>
<th>Mobile</th>
<th>Telephone</th>
<th>fax</th>
</tr>
</thead>
</table>
</div>
<style>
tr.even {
background-color: #F5F5F5 !important;
}
</style>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
hear i'm using /Branch/GetBranchNetwork for getting Data.
#section Scripts{
<script>
$(document).ready(function () {
$('#branchTable').DataTable({
"processing": true, // for show progress bar
"ajax": {
cache: false,
url: "/Branch/GetBranchNetwork",
type: "POST",
datatype: "json",
},
"columns": [
{ "data": "branchName", "width": "5%", },
{ "data": "address"},
{ "data": "managerName"},
{ "data": "mobile"},
{ "data": "telephone"},
{ "data": "fax"},
]
});
});
</script>
}
popup Modal section
<script>
$('.btn-BranchNetwork').on('click', function () {
var url = '/Branch/BranchNetwork';
$.get(url, function (data) {
//debugger;
$('#ItemModelContent').html(data);
$('#itemModel').modal('show');
});
});
Method
[HttpPost]
public ActionResult GetBranchNetwork()
{
WebPortalEntities db = new WebPortalEntities();
var jsonData = new
{
data = from a in db.tbl_branchNetwork.ToList() select a
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
public ActionResult BranchNetwork()
{
return PartialView("_BranchNetwork");
}
_BranchNetwork.cshtml is my Partial view and no content there.
i want to without calling partial view.load data to modal dialog
So... just put the Modal on the parent page with the table defined in it. No need for modal. BUT the table will populate when the parent page populates.
change your button html to
<button type="button" class="btn btn-info btn-infolink btn-BranchNetwork"
data-toggle="modal" data-target="#itemModel">Branch Network</button>
Related
Objective: Hide buttons for action Delete and Edit based on UserRole
Did some research and attempted a couple of solutions but unfortunately doesn't get the desired result.
#model IEnumerable<VmSTicketing.Models.Ticket>
#using VmSTicketing.Utility;
#{
ViewData["Title"] = "Index";
Layout = "~/Views/Shared/AdminLTE/_Layout.cshtml";
var RoleCheck = (User.IsInRole(SD.Role_Manager) ? "true" : "false");
}
<br />
<div class="row">
<div class="col-6">
<h2 class="text-primary">Lista tiketa</h2>
</div>
<div class="col-6 text-right">
<a class="btn btn-primary" asp-action="Upsert"><i class="fas fa-plus"></i> Novi tiket</a>
</div>
</div>
<br />
<div class="p-4 border rounded">
<table id="tblData" class="table table-striped table-bordered" style="width:100%">
<thead class="thead-dark">
<tr class="table-info">
<th>Opis</th>
<th>Datum i vrijeme slanja</th>
<th>Vrsta Tiketa</th>
<th>Status</th>
#*<th>Datum i vrijeme zavrsetka</th>*#
<th>Korisnik</th>
<th></th>
</tr>
</thead>
</table>
</div>
<partial name="UserDetails" />
#section Scripts{
<script src="~/js/ticket.js"></script>
}
Here is my JavaScript and calling DataTable
var dataTable;
$(document).ready(function () {
loadDataTable();
});
function loadDataTable() {
dataTable = $('#tblData').DataTable({
"ajax": {
"url": "/Manager/Ticket/GetAll"
},
"columns": [
{ "data": "description", "width": "10%" },
{ "data": "dateAndTime", "width": "15%" },
{ "data": "ticketType.name", "width": "10%" },
{ "data": "status", "width": "10%" },
{
"data": "applicationUser.name",
"width": "10%",
"render": function (data) {
return '<a id="' + data + '" class="text-info user-details" data-toggle="modal" data-target="#userDetails" href="' + data + '" target_blank>' + data + '</a>'
}
},
{
"data": "id",
"render": function (data) {
return `
<div class="text-center">
<a href="/Manager/Ticket/Details/${data}" class="btn btn-success text-white" style="cursor:pointer">
<i class="fas fa-info-circle"></i>
</a>
<a href="/Manager/Ticket/Upsert/${data}" class="btn btn-success text-white" style="cursor:pointer">
<i class="fas fa-edit"></i>
</a>
<a onclick=Delete("/Manager/Ticket/Delete/${data}") class="btn btn-danger text-white" style="cursor:pointer">
<i class="fas fa-trash-alt"></i>
</a>
</div>
`;
}, "width": "15%"
}
]
});
}
$("#tblData").on("click", "a.user-details", function () {
var name = $(this).attr('id');
$.get("/Manager/Ticket/GetByName?name=" + name, function (result) {
$('#ImePrezime').val(result.data[0].name);
$('#Email').val(result.data[0].email);
$('#BrTel').val(result.data[0].phoneNumber);
$("#userDetails").modal({ show: true })
});
});
function Delete(url) {
swal({
title: "Da li ste sigurni da zelite izbrisati tiket?",
text: "Necete moci vratiti podatke!",
icon: "warning",
buttons: true,
dangerMode: true
}).then((willDelete) => {
if (willDelete) {
$.ajax({
type: "DELETE",
url: url,
success: function (data) {
if (data.success) {
toastr.success(data.message);
dataTable.ajax.reload();
}
else {
toastr.error(data.message);
}
}
});
}
});
}
REFERENCE
Hide buttons when no result on filtering
Role based column visibility
I would like to have this error modal window appear if there are issues or errors that need to be displayed to the user after calling the SaveDailyCriteria action. I need the partial view to be rendered within the view where the SaveDailyCriteria action call is made. With the code that I currently have below, the return PartialView("_ErrorsModal", notification) gets called but is never displayed on my main view.
Controller
[HttpPost]
public ActionResult SaveDailyCriteria(Daily report, string EnteredCriteriaName)
{
var criteria = report.ConvertToCriteria(report);
criteria.CriteriaName = EnteredCriteriaName;
var dr = new ReportDaily();
var nameExists = dr.DoesCriteriaNameAlreadyExist(criteria);
if (dr.SaveReportCriteria(criteria, nameExists, out Notification notification) == false)
{
return PartialView("_ErrorsModal", notification);
}
else {
return View(report);
}
}
Main View
#model Company.Areas.Reports.Models.Daily
#using Company.TaxCollection.Reports;
#{
ViewData["Title"] = "Daily Report";
}
<h1>#ViewData["Title"]</h1>
<br />
#using (Html.BeginForm("DailySubmit", "Reports", FormMethod.Post, new { id = "reportForm", #class = "report-form col-9" }))
{
...
...
<div id="saveModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title float-left">Save Criteria</h4>
<button type="button" class="close" data-dismiss="modal"></button>
</div>
<div class="modal-body">
<label>Enter the name to save as:</label><input type="text" id="savedReportName" name="EnteredCriteriaName" class="form-control" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="saveSubmit" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
}
<script>
$(document).ready(function () {
var dataType = 'application/x-www-form-urlencoded; charset=utf-8';
$(function () {
$('#saveSubmit').on('click', function (evt) {
var data = $('form').serialize();
//Ajax form post
$.ajax({
type: 'POST',
data: data,
contentType: dataType,
url: '#Url.Action("SaveDailyCriteria", "Reports")',
success: function (data) {
console.log(data);
if (data.success) {
//window.location.href = data;
} else {
//window.location.href = data;
}
}
});
});
});
});
</script>
_ErrorsModal Partial View
#model Company.NotificationPattern.Notification
<!-- Modal -->
<div id="errorsModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title float-left">Warning</h4>
<button type="button" class="close" data-dismiss="modal"></button>
</div>
<div class="modal-body">
#if (Model.HasErrors || Model.HasWarnings) {
<p>#Model.GetConcatenatedErrorMessage(Environment.NewLine + Environment.NewLine)</p>
}
</div>
<div class="modal-footer">
<button type="button" id="modalConfirm" class="btn btn-primary" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
You can achieve this various ways, one option:
In your controller post method, return a json when it passes and the partial when it fails.
Within your jquery $.ajax post check for json and proceed otherwise render the result to your modal
In your case, the json returned on pass would indicate the url of the view to redirect to (not the view itself otherwise there's no way to know if it's a new view or the partial error). e.g
if (save() == false)
{
return PartialView("_ErrorsModal", notification);
}
else {
return Json({
success = true,
url = this.Url.Action("SaveDailyCriteria", new { reportId = report.ReportId }
});
}
and your javascript to:
$.ajax({
type: 'POST',
...
success: function (data) {
if (data.success)
window.location.href = data.url;
else
$("#modalId").html(data);
}
});
the alternative is to always return json but render the _ErrorsModal (on error) or View (on success) within the controller to a string and add that string as a json property. IMO better to let the MVC pipeline handle rendering to HTML so recommend the above approach.
I want to pop up my div class that contains user at password text box but nothings happen and I test also my function if its running correctly that's why I put alert in my function. This my code bellow. I try so many solution and yet still not show my div. Can any give me a best solution regarding this matter or other way to pop up the web form without leaving my current page.
#model TBSWebApp.Models.User
#{
ViewBag.Title = "UserLogin";
Layout = "~/Layout/_webLayout.cshtml";
}
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<div>
<fieldset>
<div class="container">
<div class="row">
<div class="col-xs-12">
<button id="btnShowModal" type="button" class="btn btn-sm btn-default pull-left col-lg-11 button button4">
Sign-in
</button>
<div class="modal fade" tabindex="-1" id="loginModal" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">Satya Login</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input class="form-control" type="text" placeholder="Login Username" id="inputUserName" />
</div>
<div class="form-group">
<input class="form-control" placeholder="Login Password" type="password" id="inputPassword" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary button button4">Sign</button>
<button type="button" id="btnHideModal" class="btn btn-primary button button4">
Hide
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<footer>
<p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">
©
<script>document.write(new Date().toDateString());</script>
</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
//$(document).ready(function () {
$("#btnShowModal").click(function () {
alert("test");
$("#loginModal").modal('show');
});
$("#btnHideModal").click(function () {
$("#loginModal").modal('hide');
});
// });
</script>
I already solved my problem
<script>
$(document).ready(function () {
$("#submitButton").click(function () {
if (($("#userNameTextBox").val() != "") && ($("#passwordTextBox").val() != ""))
$.ajax(
{
type: "POST", //HTTP POST Method
url: "UserLogin/UserLogin", // Controller/View
dataType: "text/html",
data:
{ //Passing data
UserID: $("#userNameTextBox").val(),
Password: $("#passwordTextBox").val(),
}
});
});
});
//$(document).ajaxStart(function () { $("#loadingImg").show(); });
//$(document).ajaxStop(function () { $("#loadingImg").hide(); });
</script>
I have a problem as follow : click button delete , then show modal popup , in modal, i have one button is "OK", when i click button "OK" , process event click of button "OK", such as call action delete via ajax.
my code snippet.
#foreach (var item in Model)
{
<tr>
<td>
#Ajax.ActionLink(" Delete", "", "", new { id = #item.UserProfileID }, new AjaxOptions()
{
HttpMethod = "GET",
InsertionMode = InsertionMode.InsertAfter,
UpdateTargetId = "",
OnSuccess = "ShowModal()"
}, new { #class = "fa fa-times btn btn-danger btn-xs", #id = "bt_del_profile" })
</td>
</tr>
}
<div id="myModal" aria-hidden="true" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-footer">
<button type="button" id="bt_del_ok" class="btn btn-success btn-sm">Ok</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function ShowModal() {
$("#myModal").modal('show');
}
$('#bt_del_ok').click(function (e) {
e.preventDefault();
$.ajax({
url: '/Profile/DelProfile',
type: 'POST',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
cache: false,
//processData: false,
data: { id: #item.UserProfileID },
success: function (result) {
alert("OK");
},
error: function (result) {
alert("Error delete");
}
});
});
</script>
The problem in here data: { id: #item.UserProfileID }, . I can not get ID in here although when i show devtool chrome , i see <a class="fa fa-times btn btn-danger btn-xs" data-ajax="true" data-ajax-method="GET" data-ajax-success="ShowModal()" href="/Home/Index/P000000002" id="bt_del_profile"> Delete</a>
Can you tell me about this? and give me some advices.
Thank you.
Even though you are using #item.UserProfileID within your java script, it's actually asp.net. If you had this value coming from javascript, you would use it like data: { id: '12345' },
Which means your code should be data: { id: '#item.UserProfileID' }. That should fix your problem.
Some 'Ideas'
You can change your show modal like this.
<div aria-hidden="true" class="modal fade myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-footer">
<button type="button" id="bt_del_ok" class="btn btn-success btn-sm">Ok</button>
</div>
</div>
</div>
Then change your ShowModal like below.
function ShowModal(userProfileId) {
$(".myModal").prop('id', userProfileId);
$(".myModal").modal('show');
}
Then in delete event;
var userProfileId = $(".myModal").prop('id');
data: { id:userProfileId },
Main objective:
Be able to click on a day from the calendar plugin then have a popup of a bootsrap modal with events that are listed for that day.
Whats going on:
I'm using a javascript plugin fullcalender. This plugin has a dayClick event which I am using. Once clicked I have ajax code to pass values to the post as shown:
<div id="calendar"></div>
#Html.Partial("Modal",null)
...
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
height: 170,
selectable: true,
editable: true,
defaultView: 'basicWeek',
dayClick: function (date, jsEvent, view) {
$.ajax(
{
url: '#Url.Action("Index","Home")',
type: "POST",
data: JSON.stringify({ date: date }),
dataType: "json",
contentType: "application/json; charset=utf-8",
cache: false
})
$("#myModal").modal();
}
});
});
</script>
from here it goes to the controller then forces related data to a partial view. Which by debugging I believe is doing it properly.
[HttpPost]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public ActionResult Index(string date)
{
if (date != null)
{
string[] dateSplit = date.Split(new char[] { 'T' });
DateTime objDate = Convert.ToDateTime(dateSplit[0]);
var content = db.Calendars.Where(x => x.startDate == objDate).ToList();
return PartialView("~/Views/Home/Modal.cshtml", content);
}
else
return PartialView("~/Views/Home/Modal.cshtml", null);
}
The problem:
Doesn't seem like data is being passed into the partial view, just the original null value. Thought passing data through the post of the index would populate the partial view.
Or could it be the javascript call $("#myModal").modal(); being called before data can populate? I've done some testing of throwing the if(Model != null) around all of the coding in the partial view and an else statement that would display a tag with elements in it. It always displays the tag.
Here is my View:
#model IEnumerable<webby.Models.Calendar>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="padding:20.5% 15%;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Events on #ViewBag.Date</h4>
</div>
<div class="modal-body">
<table>
#if(Model != null)
{
#foreach(var item in Model)
{
<tr>
<td>
#Html.DisplayFor(model => item.events)
</td>
</tr>
<tr>
<td>
#Html.DisplayFor(model => item.type)
</td>
</tr>
<tr>
<td>
#Html.DisplayFor(model => item.content)
</td>
</tr>
}
}
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
your call to the modal
$("#myModal").modal();
needs to be done inside a .success function not in the dayClick function. And you need to pass it the result data of your ajax call.