Develop Reference

Bootstrap 4 Modal Will Not Load In AspNet View

Bootstrap Modal will not load. It should load as soon as the View is rendered.
I've used this method of adding javascript through a section decleration to load a modal form in the same project. So, I know the jquery and bootstrap libraries that are included in the master pages are compatible. I just cannot figure out why this time around, the modal is not loading.
Browser console is not complaining about anything
My View
#using CaptchaMvc.HtmlHelpers
#{
ViewBag.Title = "Report Post";
}
<div class="modal fade" id="ReportReasonModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-notify modal-warning" role="document">
<div class="modal-content">
<div class="modal-header text-center" style="background-color:saddlebrown; color:white;">
<h4 class="modal-title white-text w-100 font-weight-bold py-2">Report Posting</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="post" action="/Items/Process Report">
<div class="modal-body">
#Html.ValidationSummary("", new { #class = "text-danger" })
</div>
<div class="modal-footer">
#* #Html.Captcha("Refresh", "Please Enter Captcha Value Below", 7, "Is required field.", false)*#
<button value="submit" type="submit" class="btn btn-outline-danger">Submit</button>
</div>
</form>
</div>
</div>
</div>
#section scripts
{
<script>
$(function () {
$("ReportReasonModal").modal();
alert("here")
});
</script>
}
Order of javascript loaded: excerpt from rendered masterpage with the scripts section rendered
<!-- jQuery library -->
<script src="/Scripts/jquery-3.3.1.js"></script>
<!-- Popper -->
<script src="/Scripts/umd/popper.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery-ui-1.12.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/mdb/mdb.js"></script>
<script>
$(function () {
$("ReportReasonModal").modal();
alert("here")
});
</script>
The modal should appear as soon as the view is rendered

You are not using the correct jQuery selector. The # is missing, to select an element with the id of ReportReasonModal. What you are currently trying to do is select an element of type <ReportReasonModal />
$("#ReportReasonModal").modal();

Crop image asp.net web forms - unable to render saved bytes

Here are the details:
Technology: asp.net web forms (c#)
goal: allow user to upload picture and crop it circle
am using cropper.js for this with jquery
Code:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:PostBackTrigger ControlID="UploadFile" />
</Triggers>
<ContentTemplate>
<div class="container">
<label class="label" data-toggle="tooltip" title="Change your avatar">
<img class="pic-circle" id="imgProfileAvatar" runat="server" alt="avatar" />
<input type="file" class="sr-only" id="input" name="image" accept="image/*" />
</label>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
<div class="alert" role="alert"></div>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">Crop the image</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="img-container">
<img id="imageToCrop" runat="server" />
<img id="imgCropped" runat="server" />
<asp:Button ID="UploadFile" runat="server" Text="Upload" OnClick="UploadFile_Click" Style="visibility: hidden;"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="crop">Crop</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function () {
var avatar = document.getElementById('<%=imgProfileAvatar.ClientID%>');
var image = document.getElementById('<%=imageToCrop.ClientID%>');
var input = document.getElementById('input');
var $progress = $('.progress');
var $progressBar = $('.progress-bar');
var $alert = $('.alert');
var $modal = $('#modal');
var cropper;
$('[data-toggle="tooltip"]').tooltip();
input.addEventListener('change', function (e) {
var files = e.target.files;
var done = function (url) {
input.value = '';
image.src = url;
$alert.hide();
$modal.modal('show');
};
var reader;
var file;
var url;
if (files && files.length > 0) {
file = files[0];
if (URL) {
done(URL.createObjectURL(file));
} else if (FileReader) {
reader = new FileReader();
reader.onload = function (e) {
done(reader.result);
};
reader.readAsDataURL(file);
}
}
});
$modal.on('shown.bs.modal', function () {
cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 3,
});
}).on('hidden.bs.modal', function () {
cropper.destroy();
cropper = null;
});
document.getElementById('crop').addEventListener('click', function () {
var initialAvatarURL;
var canvas;
$modal.modal('hide');
if (cropper) {
canvas = cropper.getCroppedCanvas({
width: 160,
height: 160,
});
initialAvatarURL = avatar.src;
avatar.src = canvas.toDataURL();
$progress.show();
$alert.removeClass('alert-success alert-warning');
//var formData = new FormData();
var data = "{studentIdStr: '<%: this.StudentId %>', imageEncodeString: '" + canvas.toDataURL('image/jpeg') + "'}";
<%--formData.append('avatar', blob);
formData.append('studentIdStr', '<%: this.StudentId %>');--%>
//console.log(JSON.stringify(data));
$.ajax('<%= ResolveUrl("~/Dashboard/Profile.aspx/UploadProfilePic") %>', {
method: 'POST',
data: data,
contentType: "application/json; charset=utf-8",
success: function () {
$alert.show().addClass('alert-success').text('Upload success');
},
error: function () {
avatar.src = initialAvatarURL;
$alert.show().addClass('alert-warning').text('Upload error');
},
complete: function () {
$progress.hide();
},
});
// canvas.toBlob(function (blob) {
//});
}
});
});
</script>
</ContentTemplate>
</asp:UpdatePanel>
Code behind code that gets called when user clicks crop:
byte[] bytes = System.Text.Encoding.ASCII.GetBytes(imageEncodeString);
attachmentDTO.Content = bytes; // sql server data type of varbinary(max)
This works great when I initially select an image and upload it. The cropping is fine too. and so is the saving.
The problem is when I try to redraw the cropped image from database, it does not display anything (default image missing icon). Here is the code on how I am getting the image from database and returning it to UI
var theImage = imageContentRow.Content; //todo:
imgProfileAvatar.Src = "data:image/jpeg;base64," + Convert.ToBase64String(theImage);
and the control where this image is display
<img class="pic-circle" id="imgProfileAvatar" runat="server" alt="avatar" />
What am I missing? Please help!!!

figured it out.
What was happening was
canvas.toDataURL('image/jpeg')
puts the "data:image/jpeg;base64," in the contents. So to fix this what I had to do was replace "data:image/jpeg;base64," with empty string ...aka remove this string...before saving to database.

repetition of modal windows with different buttons

I have two buttons in a view that call different modal windows ("AgregarProducto") and ("CargarOrden")
Cargar O. de Compra <span class="glyphicon glyphicon-file" aria-hidden="true"></span>
Agregar Producto <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
These are loaded using the following Javascript code:
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
$(document).ready(function () {
$("body").on("click", "a.dialog-window", null, function (e) {
e.preventDefault();
var $link = $(this);
var title = $link.text();
$('#AgregarProducto.modal-title').html(title);
var url = $(this).attr('href');
if (url.indexOf('#') == 0) {
$('#AgregarProducto').modal('show');
}
else {
$.get(url, function (data) {
$('#AgregarProducto .te').html(data);
$('#AgregarProducto').modal();
}).success(function () { $('input:text:visible:first').focus(); });
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("body").on("click", "a.dialog-window", null, function (e) {
e.preventDefault();
var $link = $(this);
var title = $link.text();
$('#CargarOrden.modal-title').html(title);
var url = $(this).attr('href');
if (url.indexOf('#') == 0) {
$('#CargarOrden').modal('show');
}
else {
$.get(url, function (data) {
$('#CargarOrden .te').html(data);
$('#CargarOrden').modal();
}).success(function () { $('input:text:visible:first').focus(); });
}
});
});
</script>
}
The problem is that clicking on a button loads the window twice! (I attach a photo)
in my controllers I made sure to call a partial type view
[HttpGet]
public ActionResult AgregarProducto()
{
return PartialView();
}
[HttpGet]
public ActionResult CargarOrden()
{
return PartialView();
}
I'm using bootstrap to call my views "AddProduct" and "LoadOrder" from my main view ... my two containers:
div class="modal fade" id="AgregarProducto" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title"></h2>
</div>
<div class="modal-body"><div class="te">Espere Porfavor...</div></div>
</div>
</div>
</div>
<div class="modal fade" id="CargarOrden" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title"></h2>
</div>
<div class="modal-body"><div class="te">Espere Porfavor...</div></div>
</div>
</div>
</div>
I have never worked with modal windows, what happens? what am I doing wrong? any help for me?

You have 2 scripts, one which opens the AgregarProducto modal, and the one which opens the CargarOrden modal.
Because both scripts are executed when ever you click on a link with class="dialog-window", (which both your links have), then both scripts are executed, and both modals are displayed.
A simple solution is to just give your links an id attribute, say id="cargarorden" for the first link and id="agregarproduct" for the second, then change the scripts to
$('#cargarorden').click(function(e) {
.... // you code that opens the CargarOrden modal
});
$('#agregarproduct').click(function(e) {
.... // you code that opens the AgregarProducto modal
});
Note that since the links are not loaded dynamically, then there is no need to use event delegation using .on().
A better alternative would be to identify the associated modal in the link using a data- attribute so that only one script is required
<a data-dialog="CargarOrden" href="#Url.Action("CargarOrden", "Entradas")" ...>
and then
$('.dialog-window').click(function(e) {
// Get the associated dialog
var dialog = $('#' + $(this).data('dialog'));
....
});
and within that script, use dialog as your selector, i.e.
dialog.find('.modal-title').html(title); // instead of
dialog.modal('show'); // instead of $('#CargarOrden').modal('show');
dialog.find('.te').html(data); // instead of $('#CargarOrden .te').html(data);

Prevent Boostrap modal closing after LinkButton Click inside modal

I got a LinkButton inside a boostrap modal with a ClickFunction in codeBehind. Everytime that i click in linkButton and event in codebehind is firing, the modal is closing. I wanna to keep modal open after a linkbutton click!
Check the asp LinkButton inside modal on tag modal-body with a Click event:
<div class="modal fade" id="modalPesquisaCliente" tabindex="-1" role="dialog">
<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">Fechar</span></button>
<h4 class="modal-title" id="txtTitle"><i> Pesquisa de Clientes</h4>
</div>
<div class="modal-body">
<asp:LinkButton runat="server" ID="link" OnClick="link_Click">aaa</asp:LinkButton>
<asp:Label ID="lbl" runat="server"></asp:Label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
LinkButton Click function in code Behind:
protected void link_Click(object sender, EventArgs e)
{
lbl.Text = "aaa";
}
The issue is: Everytime i click link button inside modal, which have a
click event in codebehind, the modal is closing?
I just wanted to keep modal opened once the linkbutton was clicked

You need to set modal property like below to prevent disappear modal popup :
$('#modalPesquisaCliente').modal({
backdrop: 'static',
keyboard: false
})

I FOUND SOLUTION GUYS! THE ANSWER IS:
" When you use UPDATE PANEL and occours a postback, the postback act in all controls inside update panel, and if modals html code is inside update panel, when postback occours, the modal will be "refreshed" and seted to default value again (Thats in closed state), so if you wanna to keep modal open after a postback, you should write this html code OUT of update panel, doing this every time a postback occour inside update panel, the code of modal doesn't be "touched" and "re wrote" by postback.

You can use bootstrap model either jQuery with URL action to your code behind method or Update panel using with Scriptmanager.
WebForm:
<asp:Button ID="link" runat="server" OnClientClick="callAjaxMethod(event)" Text="Call method using Ajax" />
Code behind:
[System.Web.Services.WebMethod]
public static bool link_Click()
{
return "aaa";
}
jQuery:
function callAjaxMethod(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "SimpleAjax.aspx/IsLeapYear",
data: '',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
if (response.d) {
$('#<%=lbl.ClientID%>').val(response.d);
}
else {
$('#<%=lbl.ClientID%>').val('No value');
}
},
failure: function (response) {
$('#<%=lbl.ClientID%>').val("Error in calling Ajax:" + response.d);
}
});
}
Second Method using Update Panel
WebForm:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<fieldset>
<div class="modal fade" id="modalPesquisaCliente" tabindex="-1" role="dialog">
<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">Fechar</span></button>
<h4 class="modal-title" id="txtTitle"><i> Pesquisa de Clientes</h4>
</div>
<div class="modal-body">
<asp:LinkButton runat="server" ID="link" OnClick="link_Click">aaa</asp:LinkButton>
<asp:Label ID="lbl" runat="server"></asp:Label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
Code behind: as it is no change
protected void link_Click(object sender, EventArgs e)
{
lbl.Text = "aaa";
}
And one very simple method to use without using jquery or update panel, you can use simple jQuery to .
jQuery:
$(document).on('click', '#<%=link.ClientID%>', function (event) {
event.preventDefault();
});
event.preventDefault(); for
To prevent postback from happening as we are ASP.Net TextBox control so If we had used input html element, there is no need to use ' e.preventDefault()' as posback will not happen.

As you have mentioned jQuery, try this
$(document).on('click', '#link', function (event) {
event.preventDefault();
});

Issue while using Modals

I'm creating a modal using twitter bootstrap in my application.creating a modal on onclick event
It is working fine in firefox and chrome. but while running my application in ie8, inside that modal NewPage.aspx page is not getting viewed properly.
here is my code :
<div id="MyModal" class="modal hide in">
<div class="modal-dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<h3 id="myModalLabel">
Header</h3>
</div>
<div class="modal-content">
<div class="modal-body">
<iframe id="modal-frame" src="" style="zoom: 0.60; position: relative;" frameborder="0"
height="450" width="850"></iframe>
</div>
</div>
</div>
</div>
<button modalurl="~/NewPage.aspx" id="lnkNewModal" onclick="openMyModal(this);"
runat="server">Modal</Button>
function openMyModal(curObj) {
$("#MyModal").modal({
"backdrop": "static",
"keyboard": true,
"show": true
});
var url = $(curObj).data("modalurl");
$('#MyModal').on('show', function () {
$('#modal-frame').attr("src", url);
});
$('#MyModal').modal({ show: true });
}
Thank you all in advance for your response.

You have a slight error in the Javascript code
function openMyModal(curObj) {
var url = $(curObj).attr("modalurl"); //Note here
$('#MyModal').on('show', function () {
$('#modal-frame').attr("src", url);
});
$("#MyModal").modal({
"backdrop": "static",
"keyboard": true,
"show": true
});
}
this works perfectly , Cheers!!!