The goal of the application is to have all the tickets of a certain order (contains 1 or more tickets) printed out on paper.
I currently can load all the tickets from the order on my screen, but I'm not sure on how to proceed from here.
I can hit ctrl+p on my keyboard and pull up the Print page prompt, however the application is supposed to be used on a touchscreen by cinema customers. They wouldn't have access to a keyboard to hit ctrl+p.
How can I automate the ctrl+p action or what would be the best solution?
PrintTicket.cshtml:
#model CinemaApp.TouchApp.Models.PrintTicketViewModel
#{
ViewBag.Title = "PrintTicket";
}
#foreach (var t in Model.Tickets)
{
#Html.Partial("TicketSummary", t)
}
TicketSummary.cshtml
#model CinemaApp.Domain.Entities.Ticket
<div class="well">
<h3>
<strong>#ViewBag.MovieName</strong>
</h3>
<strong>
#ViewBag.HallName <br />
Row: #Model.RowID.ID <br />
Seat: #Model.SeatID.ID <br />
TicketType: #Model.RateName.Name
</strong>
</div>
You can fire off the print dialog by using the window.print() javascript method.
You can hide this behind a button click or use the document.ready function if you are using jquery.
http://www.w3schools.com/jsref/met_win_print.asp
Related
I am creating an ASP.net MVC application with C#.
In the main .cshtml page, I am showing a list of user names on the left hand side of the page.
When the user clicks on any Username from the left, it display the "Personal Details" form for that User in a "partial view" on the Right Hand Side of the page.
Current Functionality
There is a "Save" button on the "Personal Details" Partial view form.
User can make changes in the Personal Details and hit Save to save the changes made in the partial view.
Desired Functionality
User makes changes in the Personal Details of any record.
Now, the user forgot to hit Save and clicked on the Other Username from the left hand side.
It should "AUTOMATICALLY SAVE" the changes made in the partial view.
Is it possible to execute the Save button trigger event of the partial view from main view ?
When you want to save the form automatically you can call angular Submit on Other Username click , This snippet shows example of how.
The onUserNameClick() method invokes same angular submit.
function Ctrl($scope) {
$scope.list = [];
$scope.text = 'hello';
$scope.submit = function() {
if ($scope.text) {
$scope.list.push($scope.text);
$scope.text = '';
}
};
}
function onUserNameClick() {
angular.element('#submit').trigger('click');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app>
<div ng-controller="Ctrl">
<form ng-submit="submit()">Enter form input values to test
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Regular Form Submit" />
<pre>Form values={{list}}</pre>
</form>
</div>
</div>
<button onClick="onUserNameClick()">Other username click</button>
As shown in the picture bellow
Whenever i select any serial number i want to only show the marker which is for the selected serial number.
By default i am viewing this
Also, the search functionality is in separate partial view which is called in the chart view and the map is called in layout for chart bellow is the code for both
#using (Html.BeginForm("MultiGraph", "Home", FormMethod.Get))
{
<div class="form-inline">
#Html.DropDownList("search", null, "Select Serial Number", new { #class = "form-control", #style = "width:20%" })
<input type='text' name="start_date" id="startTime" class="form-control" placeholder="Start Date" autocomplete="off" />
<input type='text' name="End_date" id="endTime" class="form-control" placeholder="End Date" autocomplete="off" />
<input id="recall" type="submit" value="Show Chart" class="btn btn-success" autocomplete="off"/>
<a href="#Url.Action("Index","Home")">
<img src="~/Image/back-button.png" alt="Go Back" title="Go Back" >
</a>
#*<input type="button" value="Back" class="btn btn-success" onclick="#Html.ActionLink("Index","Home")"/>*#
#*<button class="btn btn-success form-control" onclick="" name="Back" value="Back"></button>*#
</div>}
Now passing this partial view into Chart view
<div style="font-family:'Times New Roman' ; font-size:large" align="center">
#Html.Partial("_Search")
</div>
Bellow is the code for embed google map
<td style="text-align:center; width:22%; font-size:large; background-color:#C8E6C9; color:black">
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1-VlXsvMWMr8EotfMcIwYKt-1SrI" width="320" height="350" style="margin-top:-383px"></iframe> </td>
How to do it i have no idea
Any help would be highly appreciated
What are you doing?
You are showing a static image with the URL
https://www.google.com/maps/d/u/0/embed?mid=1-VlXsvMWMr8EotfMcIwYKt-1SrI
in the code
<td style="text-align:center; width:22%; font-size:large; background-color:#C8E6C9; color:black">
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1-VlXsvMWMr8EotfMcIwYKt-1SrI" width="320" height="350" style="margin-top:-383px"></iframe>
</td>
Google My Maps
This static image was generated by Google My Maps which is a tool with a graphic interface that allows users to create personalized maps to check later. This tool is not meant to generate dynamic URLs for applications like you are trying to do because every URL must be manually generated.
For more information about Google My Maps you can check the following URL
https://support.google.com/mymaps/?hl=en#topic=3188329
Google Static Maps API
The solution to your problem lies somewhere else. If you want to go with a static image to display, you can use Google Static Maps API.
This API allows you to generate dynamic URLs that then return static images.
An example of this working would be
https://maps.googleapis.com/maps/api/staticmap?center=Williamsburg,Brooklyn,NY&zoom=13&size=400x400&markers=color:blue%7Clabel:S%7C11211%7C11206%7C11222&key=AIzaSyAa9-cVfW-usm6ebJTQBGYEsE2MrDWCIHU
In this example I specify the center to be "Williamsburg,Brooklyn,NY" and I create an image with zoom of 13, and a size of 400x400 pixels.
Additionally, this image also has three markers in color blue.
Do remember to create your own API_KEY and to use it in your own project. This parameter will allow you to control the number of requests made, and other information.
In this example I am using my StackOverflow API Key key=AIzaSyAa9-cVfW-usm6ebJTQBGYEsE2MrDWCIHU, but you should create your own.
Static Maps is a big web service and you can read more about it in the following link
https://developers.google.com/maps/documentation/static-maps/intro#Markers
Solution
A solution to your problem would involve the following steps:
Check which Serial number the user selected
Create an URL in your application matching the location of that serial number (remember to create an image with the right width and height values of width="320" height="350")
Put the created URL in <iframe src="CREATED_URL_HERE" style="margin-top:-383px"></iframe>
And voilá !Everything works !
There it goes, hope it helps!
I'm working on a project and i have to deal with some unusual design for me. My goal is to work with 2 different simultaneous work area. Left one should change its value between 2 different partial view. The second one (mid and right area), should change its views independently from the left one.
So, at the end, i end up with 2 different divs, left and right one and Jqueryiu Tab plugin... after clicking one of the tabs i load the partial view inside it.
<div id="conteudo">
<div class="container-abas-laterais">
<div id="abas-laterais" style="width: 100%; height: 100%">
<ul>
<li>Pendências</li>
<li>Requerimentos</li>
</ul>
</div>
</div>
<div class="container-abas">
<div id="abas">
<ul>
<li>Chamados</li>
<li>Cadastros</li>
<li>Pesquisa</li>
<li>Configuração</li>
</ul>
<div class="container-abas-conteudo">
<div id="aba-1">
<p>Conteúdo da aba um.</p>
</div>
<div id="aba-2">
<p>Conteúdo da aba dois.</p>
</div>
<div id="aba-3">
<p>Conteúdo da aba três.</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () { $("#abas").tabs(); });
$(function () { $("#abas-laterais").tabs(); });
</script>
Well, the partial views loaded directly from the tabs clicks worked really well, just as i wanted... the problem is the ones that those initial views should also call... i need to keep all the views and functions inside those divs... it should act like an iFrame.. wah, sometimes, what i do in left one should take place in right one...
So i wanted to know some tips or ways to achieve this kind of behaviour in asp.net mvc. Please, if my idea is confuse or not well detailed, just let me know...
Thanks for the help.
If I am interpreting you correctly: that you want to load up the second set of tabs based on those links in the first set? If so, it would be something like this for your links:
#Ajax.ActionLink("Requerimentos", "Requerimento", "AcessoRapido", null, new AjaxOptions{ UpdateTargetId = "aba-1", OnSuccess = "changeTabs(1)" }, null)
And the action that link invokes will need to return a PartialView as your action result. Then on a successful return, you will see that it's calling a function on success where you can change the tab to the one you want.
function changeTabs(index){
$("#abas").tabs("select", index);
}
If all the assumptions are correct, don't forget that you will need to include unobtrusive ajax in your page and also the correct key in your web.config:
<appSettings>
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
Forgive me if I have misinterpreted your question. I hope this helps.
I have used JQM SimpleDialog2 in my app. I am having one textbox and button in that dialog. i can't able to get the value from input while click on button in dialog. i have used blank mode.. Here is my code.. I am getting empty value from this code. please correct me.
<div id="myDialog" style="display:none"
data-options='{"mode":"blank","top":"10%","headerClose":false,"blankContent":true}'
<Center>please enter Your Amount here</center>
<input id="txtAmt" name="amy" value="" type="text" placeholder="Amount">
<div data-role="navbar" data-grid="a">
<ul>
<li>Submit</li>
<li>Cancel</li>
</ul>
</div>
function getAmount()
{
alert("amount: "+$("#txtAmt").val());
}
i didnt try this using SimpleDialog but this works just fine for me:
function getAmount(){
alert (document.getElementById('txtAmt').value);
}
By the way i would recommend using the built-in Popup-Dialog function instead of SimpleDialog. See here: http://jquerymobile.com/demos/1.2.0/docs/pages/dialog/index.html
I am trying to get to grips with Razor, and have hit a basic snag. I generate a small menu based on the users authenticated status. But, I am doing it wrong.
<div>
Home
List
#if (Request.IsAuthenticated)
{
Upload
Logout
}
</div>
It doesn't like the HTML within my {} section. I think it expects an HTML tag... Something like <div>, but because I am using  , it's not happy. How do I do this?
Additionally, I am trying to handle an image tag. But this is failing dismally.
#using GalleryPresentation.Models
#model IndexModel
#{
ViewBag.Title = "Craig and Melanie's Digital Moments";
}
<br/>
<div style="text-align: center">
<img src="#Html.Raw(m => m.RandomImageUrl) />
</div>
where my model is simply:
{
public class IndexModel
{
public string RandomImageUrl { get; set; }
}
}
Razor cannot detect that you are entering HTML mode. Use the special <text> Razor tag to indicate you are in HTML mode.
If you want to display content from HTML, you may use for example #Html.Raw() method. So your code migth be
<div>
Home
List
#if (Request.IsAuthenticated)
{ #Html.Raw("
Upload
Logout ")
}
</div>
nbsp means non breaking space. It is used in html to insert spaces in the middle. Since you are in the middle of a razor code, the compiler doesn't know when you use an html code, at once without a directive. Since it'll give a compile error. This is more like preprocessor directives in c. (if you know #include ). Here you simply have to use the . The correct code will look as follows.
<div>
Home
List
#if (Request.IsAuthenticated)
{
<text>
</text>
Upload
<text>
</text>
Logout
}
</div>