Develop Reference

ASP.NET MVC - Open Table in new window and print

I'm using ASP.NET MVC and have a table with 9 columns which shows results from the database where the user can filter values based on columns. The table structure looks like this:
<table class="tableMain" id="x">
<thead>
<tr class="trMain">
<th class="thMain">
#Html.DisplayNameFor(model => model.ID)
</th>
<th class="thMain">
#Html.DisplayNameFor(model => model.YEAR)
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr class="trMain">
<td class="tdMain">
#Html.DisplayFor(modelItem => item.ID)
</td>
<td class="tdMain">
#Html.DisplayFor(modelItem => item.YEAR)
</td>
<td class="tdMain">
<input type="checkbox" class="chkCheckBoxId" name="airlineId" value="#item.ID" />
</td>
<td class="tdMain">
#Html.ActionLink("EditValue", "Edit", new { id = item.ID })
</td>
</tr>
}
</tbody>
</table>
Now I need a button, so that the dynamically generated table opens in a new window and the print dialog opens automatically. I had this piece of code:
<div class="line-btn">
<input type="submit" value="print" onclick="printTable()" class="btn fl btn-print">
</div>
<script language="javascript">
function printTable()
{
var printContent = document.getElementById("x");
var windowUrl = 'about:blank';
var num;
var uniqueName = new Date();
var windowName = 'Print' + uniqueName.getTime();var printWindow = window.open(num, windowName, 'left=50000,top=50000,width=0,height=0');
printWindow.document.write(printContent.innerHTML);
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}
</script>
The problem here is that the table is completely unsorted when printed so the rows/columns are shifted.
I found this example:
https://datatables.net/extensions/buttons/examples/print/simple.html
This is exactly what I need (open the table in a new window and open print dialog). But unfortunately this sample has a lot of code in the javascript files that I don't need. There is a search field included and a pagination.
Can someone help me please? Thank you very much!

Ok I found a good solution.
This is the code I used:
<script src="#Url.Content("~/Scripts/jquery-3.5.1.js")" type="text/javascript"></script>
<script>
var myApp;
myApp = (function (app) {
$('#x').click(function () {
myApp.print();
});
app.print = function () {
$.ajax({
url: 'Home/Print',
success: function (data) {
if (myApp.arePopupsBlocked()) {
alert('please allow popups.');
}
var printWindow = window.open();
if (printWindow) {
$(printWindow.document.body).html(data);
} else {
alert('please allow popups.');
}
},
error: function () {
alert('Error');
}
});
};
app.arePopupsBlocked = function () {
var aWindow = window.open(null, "", "width=1,height=1");
try {
aWindow.close();
return false;
} catch (e) {
return true;
}
};
return app;
})(window.myApp || {})
</script>
and right before the table-tag the link to click:
<style>
/* suppress link for printing */
##media only print {
a {
display: none;
}
}
</style>
[print table]
There opens no new window but the table is well formated for printing.

jQuery AJAX, conditional not working

My function makes a search by ID and by name, and I'm doing it in MVC. The problem is that it enters the conditional (if) and the AJAX is run correctly, but then it also goes to the else and runs it too. Apparently my data in the dialog is blank because it send the alert window. It sometimes opens the dialog correctly, but when I change the module and come back the if and else are run again and the blank dialog appears.
What can be happening? When I make the first click, it blocks, I click again and then the data appears...
function buscaProducto(url, cod, name) {
if (cod.length != 0 || name.length != 0) {
var producto = name;
var identidad = cod;
$.ajax({
url: url,
type: "POST",
dataType: "html",
error: AjaxFailure,
beforeSend: AjaxBegin,
data: { productoNombre: producto, identidad: identidad },
success: function (data) {
$("#dialog").dialog({
bigframe: true,
modal: true,
autoOpen: true,
width: 900,
heigth: 700,
resizable: false,
});
$("#progressbar").hide();
$("#dialog").html(data);
console.log("Entregó los datos al #dialog");
}
});
}
else {
alert("<p>Debe ingresar una opcion de busqueda</p>", $(window).height() / 3)
this.abort();
}
}
I think the cache might be stuck
the controller
[HttpPost]
public ActionResult BusquedaProducto(string productoNombre, string identidad)
{
if (productoNombre.Equals(""))
{
if (identidad.Equals(""))
{
return HttpNotFound();
}
else
{
var code = (from p in db.GN_Portafolio
where p.CodigoPortafolio.StartsWith(identidad) && p.SenSerial == true
select p).ToList();
if (code.Equals("0"))
{
return HttpNotFound();
}
else
{
return View(code);
}
}
}
else
{
var producto = (from p in db.GN_Portafolio
where p.NombrePortafolio.StartsWith(productoNombre)
select p).ToList().Take(100);
if (producto.Equals("0"))
{
return HttpNotFound();
}
else
{
return View(producto);
}
}
}
the view
#model IEnumerable<SifActivoFijo.Models.GN_Portafolio>
<form class="items">
<label>items por Pagina: </label>
<select>
<option>5</option>
<option>10</option>
<option>15</option>
</select>
</form>
<input name="button" type="button" onclick="$('#dialog').dialog('close');" value="Cerrar" />
<table class="tablas">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.CodigoPortafolio)
</th>
<th>
#Html.DisplayNameFor(model => model.NombrePortafolio)
</th>
<th></th>
</tr>
</thead>
<tbody id="pagina">
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.CodigoPortafolio)
</td>
<td>
#Html.DisplayFor(modelItem => item.NombrePortafolio)
</td>
<td>
<input class="seleccion" type="button" value="Seleccionar" />
</td>
</tr>
}
</tbody>
</table>
<div class="holder"></div>
<script type="text/javascript">
$(document).ready(function () {
$('input.seleccion').click(function () {
var codigo = $(this).parent().prev().prev();
var nombre = $(this).parent().prev();
$('#activoFijo_GN_Portafolio_CodigoPortafolio').val($.trim(codigo.text()));
$('#GN_Portafolio_CodigoPortafolio').val($.trim(codigo.text()));
$('#nombrePortafolio').val($.trim(nombre.text()));
$("#activoFijo_DescripcionActivoFijo").val($.trim(nombre.text()));
document.getElementById("dialog").innerHTML = '<div id="progressbar" class="progressbar" style="display: none;"></div>';
$("#dialog").dialog('close');
});
});

You are using return type as ActionResult in server side method. So this return your entire view, then page will get reload. So this has happening. So please change your methods return type to any other like string, Jsonresult, etc.,  

Checkbox (model) dosn't change value when checked

Ive made some checkboxes in a View. The checkboxes is implemented via the ViewModel with bool properties. I'm currently trying to change a query in the controller to "date" or "month" depending if the checkbox has been checked. However in the Controller it always jumps the the "else statement" even if "Month" has been checked. Month is always False.
I suspect the JavaScript code might be wrong.
This User Interface:
In my Controller method i try to do the following:
Controller:
var request = GoogleAnalyticsService.Data.Ga.Get("ga:59380223", start, end, "ga:visitors");
var request = GoogleAnalyticsService.Data.Ga.Get("ga:59380223", start, end, "ga:visitors");
if (model.Month)
{
request.Dimensions = "ga:month";
request.Sort = "-ga:month";
}
else
{
request.Dimensions = "ga:date";
request.Sort = "-ga:date";
}
request.MaxResults = 10000;
Google.Apis.Analytics.v3.Data.GaData d = request.Execute();
In The view ive implemented my Viewmodel and tried writing some javascript checking if what checkbox have ´been checked and if to return true or false:
View:
<table class="adminContent">
<tr>
<td class="adminTitle">
#Html.NopLabelFor(model => model.StartDate):
</td>
<td class="adminData">
#Html.EditorFor(model => model.StartDate)
</td>
</tr>
<tr>
<td class="adminTitle">
#Html.NopLabelFor(model => model.EndDate):
</td>
<td class="adminData">
#Html.EditorFor(model => model.EndDate)
</td>
</tr>
<tr>
<td class="data" colspan="2">
#Html.CheckBoxFor(model => model.Date, new { id = "Day" }) // -- Checkbox Date
#Html.LabelFor(model => model.Date)
</td>
</tr>
<tr>
<tr>
<td class="data" colspan="2">
#Html.CheckBox("chkMonth", new { #onclick = "updatemyhidden(this)" }) // -- Checkbox Month
#Html.HiddenFor(model => model.Month, new { id = "Month" })
#Html.LabelFor(model => model.Month)
</td>
</tr>
</tr>
<tr>
<td class="adminTitle">
#Html.NopLabelFor(model => model.GAStatisticsId ):
</td>
<td class="adminData">
#Html.DropDownList("GAStatisticsId", Model.AvailableGAStatistics)
<input type="button" id="GAStatisticsReport-Submit" class="t-button" value="#T("Admin.Common.Search")" />
</tr>
</table>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="/Scripts/jquery.min.js"></script>
<script type="text/javascript">
$("#GAStatisticsReport-Submit").click(function () {
if ($("select[name='GAStatisticsId'] option:selected").text() == "Visitors Report")
drawChartVisitors()
if ($("select[name='GAStatisticsId'] option:selected").text() == "Orders Report")
drawChartOrders()
if ($("select[name='GAStatisticsId'] option:selected").text() == "Conversion Report")
drawConversion()
function updatemyhidden(chkbox) {
$("#Month").val(chkbox.checked);
}
})
google.load("visualization", "1", { packages: ["corechart"] });
google.load("visualization", "1", { packages: ["treemap"] });
function drawChartVisitors() {
$.get('/GAStatistics/GetVisitors', {
StartDate: $('##Html.FieldIdFor(model => model.StartDate)').val(),
EndDate: $('##Html.FieldIdFor(model => model.EndDate)').val(),
},
function (data) {
var tdata = new google.visualization.DataTable();
tdata.addColumn('date', 'Date');
tdata.addColumn('number', 'Visitors');
for (var i = 0; i < data.length; i++) {
if ($("#Month").is(":checked")) {
var dateStr = data[i].Date.substr(0, 4);
}
else {
var dateStr = data[i].Date.substr(0, 4) + "-" + data[i].Date.substr(4, 2) + "-" + data[i].Date.substr(6, 2);
}
tdata.addRow([new Date(dateStr), parseInt(data[i].Visitors)]);
}
The if-statements in the controller dosnt seem to operate depending on what i select in the view.
Note: im not using httpPost/get as the data is loaded with Google Charts and i don't want the whole page to re-aload each time a new request is selected.

Is because you set bool field on the month so it will rendered as true/false for your checkbox. You have a look at the rendered HTML for the month checkbox., and no matter you checked or not the data still send back to server as true/false depend what been set when rendering the page. This value will never change.
So i suggest you either add one more property in your viewmodel to keep try check/unchecked state and in the view rendered it as hidden field and update this hidden field whenever checkbox is ticked/unticked.
Or the month field render as hidden field and add one more checkbox in the page to update the month field when checkbox is checked/unchecked
Let say we use 2nd approach, the code will look something like this, (I did not test the code below). I hope this helps:
#Html.CheckBox("chkMonth", new { #onclick = "updatemyhidden(this)" })
#Html.HiddenFor(model => model.Month)
<script type="text/javascript">
function updatemyhidden(chkbox) {
$("#Month").val(chkbox.checked);
}
</script>

JavaScript How Can I achive this in delete dialog

OK So I have view with data in table and i made delete option like in this tutorial
http://ricardocovo.com/2010/09/02/asp-mvc-delete-confirmation-with-ajax-jquery-ui-dialog/
But Now I have a question How Can I get a Name from the correct line to write something like this
Do you really want to delete "Product Name"

I think he asked about ASP.NET MVC, not Web forms, so the code will be as below
The view will be
<table id="table">
<tr>
<td>Id</td>
<td>Name</td>
<td> </td>
</tr>
#foreach(var item in Mode.Items) {
<tr>
<td>#item.Id</td>
<td>#item.Name</td>
<td><button class="deleted-link" value="Delete">delete</button></td>
</tr>
}
</table>
<div id="delete-dialog" title="Confirmation">
</div>
and the Jquery script on the view should be
$(function(){
//alert($('.deleted-link'));
$('.deleted-link').each(function(){
$(this).click(function(data){
var id = $(this).parent().parent().find('td :first').html();
$('#delete-dialog').html('<p>Are you sure you want to delete the item with id = {' + id + '} ?</p>');
$('#delete-dialog').dialog('open');
});
});
$('#delete-dialog').dialog({
autoOpen: false, width: 400, resizable: false, modal: true, //Dialog options
buttons: {
"Continue": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
});
You can see the code example at http://jsfiddle.net/SVgEL/
Hope this help.

You can try some thing Like this
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
ImageButton imb = (ImageButton)e.Row.FindControl("deleteButton");
string recordName = e.Row.Cells[3].Text;
imb.OnClientClick = "return confirm('Are You sure Want to Delete the record:- "+ recordName.ToUpper()+" ? ');";
}
}
Normal click Event with button
Delete

What about passing the model to the view and displaying the name?
Cant add comments, sorry for posting here in answers space.
If you dont want to pass the model you can always just pass the name as a parameter to the delete function from the table view.

Assuming that you are already using jQuery, check this out:
<script type="text/javascript">
function removeCar(theLink) {
var theTR = $(theLink).parents('tr');
var model = $(theTR).children('td._model').html();
var theConfirm = confirm("Are you sure you want to remove " + model + "?");
if (theConfirm == true)
$(theTR).remove();
}
</script>
<table>
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Audi</td>
<td class="_model">A3</td>
<td>Remove</td>
</tr>
<tr>
<td>Audi</td>
<td class="_model">A4</td>
<td>Remove</td>
</tr>
<tr>
<td>Audi</td>
<td class="_model">A5</td>
<td>Remove</td>
</tr>
</tbody>
</table>

MVC - Opening PartialView in a jquery dialog

I have a problem that's been driving me crazy for days. So I have an html table with items in it. The point is basically to click a button and open a jquery dialog with a message, asking me if I want to delete the selected item. Now the delete part can come next cause as it is I can't even display the dialog with the confirmation message. What I do is click one of the delete icons on my table to delete an item of my choosing, but as the partialview with the dialog finishes loading, jquery throws an undefined function error. The following pattern has already been implemented on another similar funcionality (table with clickable icon, shows dialog) but I can't find out whats wrong here.
Here's the code of the table in the "main" view.
<table width="100%" cellspacing="0" border="0" align="center" cellpadding="3"
style='table-layout: fixed'>
<tr class="tr-header">
<th width="20px">
</th>
<th width="200px">
File Name
</th>
<th width="120px">
Type
</th>
<th width="130px">
Date
</th>
<th width="480px">
Comments
</th>
</tr>
#foreach (var item in Model.Uploads)
{
<tr>
<td align="center">
#using (Ajax.BeginForm("DeleteUpload", "Candidate",
new { id = item.UploadID },
new AjaxOptions { UpdateTargetId =
"DeleteUploadForm",
HttpMethod = "Get" }))
{
#*<a href='#Url.Action("DeleteUpload", new { id = item.UploadID })'>
<img src="#Url.Content("~/icons/delete.png")" alt="Click to delete upload" border="0" /></a>*#
<input type="image" name="DeleteUpload" id="DeleteUpload" src="#Url.Icon("delete.png")"/>
}
</td>
<td align="center">
#(item.FileName);
</td>
<td align="center" nowrap="nowrap">
#item.UploadType
</td>
<td align="center" nowrap="nowrap">
#item.UploadDate
</td>
<td align="justify" style="overflow:auto">
#Html.Raw(Html.Encode(item.Comments).Replace("\n", "<br />"))
</td>
</tr>
}
</table>
<div id="DeleteUploadForm">
</div>
As you notice in the first column I have two ways of calling the controller commented, the one with the input image doesn't do a submit when I click it and the anchor link can call the controller and the partialview where I have the dialog, but jQuery library "crashes" when its all done.
This is the controller.
public ActionResult DeleteUpload(int id)
{
Upload UploadToDelete = CandidateProxy.GetUploadByID(this.CurrentUser.DbInfo, id);
return PartialView(UploadToDelete);
}
Nothing too spectacular there. Then it calls the following partial view.
#model Project.Entities.Uploads
<script src="#Url.Script("jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Script("jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="#Url.Script("jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script src="#Url.Script("ui/jquery.ui.core.js")" type="text/javascript"></script>
<script src="#Url.Script("ui/jquery.ui.widget.js")" type="text/javascript"></script>
<script src="#Url.Script("ui/jquery-ui-1.8.23.custom.js")" type="text/javascript"></script>
<script src="#Url.Script("ui/jquery.ui.mouse.js")" type="text/javascript"></script>
<script src="#Url.Script("ui/jquery.ui.button.js")" type="text/javascript"></script>
<script src="#Url.Script("ui/jquery.ui.draggable.js")" type="text/javascript"></script>
<script src="#Url.Script("ui/jquery.ui.position.js")" type="text/javascript"></script>
<script src="#Url.Script("ui/jquery.ui.resizable.js")" type="text/javascript"></script>
<script src="#Url.Script("ui/jquery.ui.dialog.js")" type="text/javascript"></script>
<script src="#Url.Script("ui/jquery.effects.core.js")" type="text/javascript"></script>
<script src="#Url.Script("dialog/DeleteUploadDialog.js")" type="text/javascript"></script>
<div="DeleteUploadDialog">
#using (Html.BeginForm("DeleteUpload", "Home", FormMethod.Post))
{
<fieldset>
<div>
<br />
Do you want to delete the following file? #Model.UploadName
</div>
<input type="submit" name="submit" value="Delete" class="toolbar-button" />
<input type="button" name="submit" value="Cancel" class="toolbar-button" />
</fieldset>
}
</div>
This is the partialview that holds the design for my dialog. It will eventually send to the Controller a request to delete an upload which is easy cause I'm more familiar with server-side coding but this whole front-end thing is very new to me. Finally here's the DeleteUploadDialog.js file where I have written the dialog's properties.
$(function () {
$("#DeleteUploadDialog").dialog({
autoOpen: true,
modal: true,
width: 950,
height: 350,
close: function (event, ui) {
$("#DeleteUploadDialog").remove();
}
});
});
So that's my code. Anything else you'd like to know about it let me know. Thanks in advance!

Making a server round trip just for confirmation is not a good idea. you can take confirmation on client side using below custom confirmation dialog. This will not block your script execution also.
I have created custom confirmation box, you may try this:
function ConfirmationBox(pTitle, pText, pButtonType, pParam, pCallBack, pCancelCallback) {
if (pButtonType == null) pButtonType = "okcancel";
$('<div></div>').appendTo('body').html(pText)
.dialog({
resizable: false,
modal: true,
title: pTitle,
buttons: GetButtons(pButtonType),
autoOpen: true,
width: 'auto'
, Close: function (event, ui) {
$(this).remove();
}
});
$("input[type=submit], input[type=button]").button();
$("#confirmDialog button").button();
return this;
function GetButtons(pButtonType) {
var cBtn;
switch (pButtonType) {
case "yesno":
cBtn = {
"Yes": function () {
if (pCallBack && pCallBack.length > 0) {
window[pCallBack](pParam);
}
$(this).dialog("close");
return true;
},
"No": function () {
if (pCancelCallback && pCancelCallback.length > 0) {
window[pCancelCallback](pParam);
}
$(this).dialog("close");
return false;
}
}
break;
case "okcancel":
cBtn = {
"Ok": function () {
if (pCallBack && pCallBack.length > 0) {
window[pCallBack](pParam);
$(this).dialog("close");
}
return true;
},
Cancel: function () {
if (pCancelCallback && pCancelCallback.length > 0) {
window[pCancelCallback](pParam);
$(this).dialog("close");
}
return false;
}
}
break;
}
return cBtn;
}
}
Parameter details:
pTitle: Title of your dialog
pText: Text of dialog
pButtonType: Here we have 2 option yesno | okcancel
pParam: parameter to callback function
pCallBack: Success callback (function to call on "Yes" click)
pCancelCallback: Cancel callback (function to call on "No" click )

I think that what you are trying to do here is an overhead. You are opening a dialog and removing it on close.. Wouldn't be simpler to do sth like this:
$(buttonDelete).click(function () {
var confirmDelete = confirm("Are you sure you want to delete this item?");
if (confirmDelete === true) {
$.ajax({
url: '/Home/DeleteAttachment',
dataType: "json",
type: "POST",
data: { "id": id },
success: function () {
$(rowToDelete).remove();
}
});
}
});
and
[HttpPost]
public JsonResult DeleteAttachment(int id)
{
DeleteAttachment(id);
return Json("ok");
}
if you really want to return partial you can do sth like this:
$(buttonDelete).click(function () {
var confirmDelete = confirm("Are you sure you want to delete this item?");
if (confirmDelete === true) {
$.ajax({
url: '/Home/DeleteAttachment',
dataType: "html",
type: "POST",
data: { "id": id },
success: function (response) {
$(divId).replace(response);
}
});
}
});
and
[HttpPost]
public PartialViewResult DeleteAttachment(int id)
{
Upload UploadToDelete = CandidateProxy.GetUploadByID(this.CurrentUser.DbInfo, id);
return PartialView(UploadToDelete);
}

Shouldn't it be
autoOpen: false
instead of
autoOpen: true
Then in your click event something like
$("#DeleteUpload").click(function()
{
$("#DeleteUploadDialog").dialog("open");
});