Is there any way to open a new window if the Submit Button is inside #using Html.BeginForm? I tried the following but it doesn't work?
#using (Html.BeginForm("SetCol", "Document", FormMethod.Post, new {target="_blank"})){
<div class="modal-body" data-height-relative="20">
.
.
.
</div>
<div class="modal-footer">
<div class="pull-right">
<input type="submit" value="Senden" class="btn btn-primary"/>
<a href="#ViewData["closeUrl"]" class="btn btn-primary" #(ViewData["closeUrl"] == "#" ? "data-dismiss=modal" : "")>#Translations.Close</a>
</div>
</div>
}
The output is a PDF File:
<html>
<body marginwidth="0" marginheight="0" style="background-color: rgb(38,38,38)">
<embed width="100%" height="100%" name="plugin" src="http://localhost:54906/Document/SetCol?id=108" type="application/pdf">
</body>
</html>
Below line works for me with your code. May be something related to your action method.
#using (Html.BeginForm("About", "Home", FormMethod.Post, new { target = "_blank" }))
As you mentioned in your comment, that this method returns a PDF file, you can use window.open like:
window.open("../Document/SetCol", "_blank");
or
window.open("#Url.Action("LoadReport", "ExportReport")" + link, "_blank");
You will have to define a click event handler obviously.
Related
I know there are similar questions, but the answers and suggestions are not working for me and i am unable to understand the error.
On click of a button, I want to load another HTML in a new tab. When I try, "www.google.com", I am able to do so. But when I try to load an HTML which I have, I am unable to do so.
Here is the relevant html code :
<div id="button">
<a href="www.google.com"
target="_blank"><input type="button" value="Visualisation"></a><!-- THIS WORKS -->
<form action="/Users/tarun/Work/marchDemo/public/views/tree_custom.html"
target="_blank">
<input type="submit"
value="Go to Google" />
</form><!-- THIS Fails -->
<input type=button
onClick="location.href='tree_custom.html'"
value='click here'
target="_blank"><!-- THIS Fails -->
</div>
The error I get is this, which I am not able to debug :
Error: Not Found
at /Users/tarun/Work/marchDemo/app.js:41:13
at Layer.handle [as handle_request] (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:312:13)
at /Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:280:7
at Function.process_params (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:330:12)
at next (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:271:10)
at /Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:618:15
at next (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:256:14)
at Function.handle (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:176:3)
at router (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:46:12)
You can use onclick="window.open('tree_custom.html')" with target="_blank" instead of using location.href
<div id="button">
<a href="www.google.com"
target="_blank"><input type="button" value="Visualisation"></a><!-- THIS WORKS -->
<form action="/Users/tarun/Work/marchDemo/public/views/tree_custom.html"
target="_blank">
<input type="submit"
value="Go to Google" />
</form><!-- THIS works -->
<input type=button onclick="window.open('tree_custom.html')"
value='click here'
target="_blank"><!-- THIS WORKS -->
</div>
Check working plunker : https://plnkr.co/edit/PQk5al?p=preview
If you're using Angular, I would suggest using ng-click. Then you can bind a method that's defined in your controller to the ng-click. Which will open a new tab with the desired url when the user clicks your button.
body.html
<div ng-controller="exampleCtrl as ctrl">
<button ng-click="ctrl.directToGoogle()"></button>
</div>
index.js
angular.module('exampleModule', [])
.controller('exampleCtrl', ['$scope', '$window',
function ($scope, $window) {
$scope.directToGoogle = function () {
$window.open('https://www.google.com', '_blank')
}])
This would be a simple and contrived example of how to bind a method to ng-click and do what you described in your question earlier.
I have two html pages. In the main page, when a link is clicked, the url behind the link should be opened in a small inline window. After searching a lot I found that I could use Innerhtml to load the url into a small div (I also tested iframe and ajax but they did not work in chrome). 1. Is it possible to call a function defined in main page, inside the innerhtml? 2. Inside the main page and innerhtml page I have the same tabs and objects of same name, and one of the tabs is called map. when a button is clicked in innerhtml, I want a point to be added in the map of main page not the map of innerhtml itself.
Here is a part of the code:
<script>
function load_home(url) {
document.getElementById("content").innerHTML = '<object type="text/html"
data = "' + url + '" > < /object>';
}
</script>
<ul class="list-group gn-resultview">
<li class="list-group-item" data-ng-repeat="md in searchResults.records" gn-displayextent-onhover="" gn-zoomto-onclick gn-fix-mdlinks="">
<div class="media-body">
<div draggable id="content"> </div>
<h4>
<input gn-selection-md type="checkbox" ng-model="md['geonet:info'].selected" ng-change="change()" />
<!-- Icon for types -->
<a ng-href="#/metadata/{{md.getUuid()}}" onclick="load_home(this.href);return false;" title="{{md.title || md.defaultTitle}}">
<i class="fa gn-icon-{{md.type[0]}}" title="{{md.type[0] | translate}}"/>
{{(md.title || md.defaultTitle) | characters:80}}</a>
</h4>
<p class="text-justify" dd-text-collapse dd-text-collapse-max-length="350" dd-text-collapse-text="{{md.abstract || md.defaultAbstract}}"></p>
<blockquote ng-if="md.getContacts().resource">{{::md.getContacts().resource}}</blockquote>
</div>
<div>
<gn-links-btn></gn-links-btn>
</div>
</li>
</ul>
In the innerhtml page you can call a function of main page such as "test()" like this:
parent.test()
So as an example:
In the innerhtml url:
<script>
function test1()
{
parent.test();
}
</script>
in the innehtml page:
<button type="button"
class="btn btn-default btn-sm btn-block"
data-ng-show="hasAction(mainType)"
onclick="test1()" >
some friends and I have started a team project but we are stuck at this point. We made a function of the site to add comments under every post. The problem is that when submit is clicked it adds the comment but doesn't refresh the page which causes some problems. The author stays "anonymous" and when refresh button is clicked it shows an alert:
The page that you're looking for used information that you entered. Returning to that page might cause any action you took to be repeated. Do you wish to continue?
However, if we just type the URL again and click ENTER everything is good: the author shows up and the comment appears only once. So the only solution for us is to redirect to the same page. Here is the form:
<div style="text-align: left">
<div><i>Leave your comment</i>
</div>
<form method="post">
<fieldset>
<p>
<textarea rows="10" class="form-control" type="text" id="1" name="commentText" style="height: 100px"></textarea>
</p>
<p>
<input type="submit" name="buttonSubmit" onclick="redirect" value="Add comment" class="btn btn-default" style="" />
</p>
</fieldset>
</form>
</div>
This is how the comments are printed on the page:
<h3>Comments</h3>
<br>
<div>
#foreach (var comment in ViewBag.Comments) {
<section class="row">
<article class="post col-md-12">
<div class="about">
Posted on <i>#comment.Date</i>
#if (comment.AuthorId != null) { #: by <i>#comment.Author.FullName</i>
}else { #: by <i>anonymous</i>
}
</div>
<div class="body">#comment.Text</div>
</article>
</section>
}
</div>
Thanks in advance!
Use the #Ajax.BeginForm() helper.
In the AjaxOptions(), you'll want to set the Httpmethod to "Post", InsertionMode.InsertBefore (or After depending on where you want new comments), and UpdateTargetId = "your-comment-div".
You'll need to include jquery.unobtrusive-ajax.js so the Ajax helper works correctly. You can use the nuget package manager to pull it in. Be sure to add it to your jquery bundle.
Then, you need to create the post action in your controller to accept the comment params and return a partial view.
Doing thIs keeps the Ajax confined to a razor helper and controller method.
View:
#using (Ajax.BeginForm("AjaxAddComment",
"MyController",
/* route params */,
new AjaxOptions()
{
InsertionMode = InsertionMode.InsertBefore,
UpdateTargetId = "commentsDiv",
HttpMethod = "Post"
}, htmlAttributes: new { /* ... */ }))
{
<div class="form-horizontal">
#* comment form... *#
</div>
}
...
<div id="commentsDiv">
<div class="comment">...</div>
<div class="comment">...</div>
</div>
Controller:
[HttpPost]
//[ValidateAntiForgeryToken]
public async Task<PartialView> AjaxAddComment(string comment, /*...other params*/)
{
var newComment = ... // comment viewModel
// add comment to db
await db.SaveChangesAsync();
return PartialView("_CommentPartial", newComment);
}
_CommentPartial:
<div class="comment">
...
</div>
I'm fairly new to Angular and very new to using the ui-router, so I could be missing something obvious.
If I launch my results.html page on its own, everything from the Web API is bound correctly through the controller and shows up as expected.
When I start from index.html and click on the button that calls $state.go(), I am navigated to the results.html page .. but none of the data from the controller shows up. The controller & service are still being called though - because I put console.log() statements to verify that the object I want is being returned after $state.go() and it is - the template just isn't registering it.
Here is my code for my ui-router and main controller:
// script.js
var app = angular.module('BN', ['ui.router']);
// configure our routes
app.config(function ($locationProvider, $stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('');
$stateProvider
.state('default',{
url:'/',
templateURL:'index.html',
controller: 'MainController'
})
.state('results', {
url:'/results',
controller: 'ResultsController',
controllerAs: 'vm',
templateUrl: 'Results/Results.html'
})
.state('instructor', {
url:'/api/instructors/:id',
templateUrl: 'Instructors/Instructor.html'
});
$locationProvider.html5Mode(true);
});
app.controller('MainController', MainController);
function MainController ($state) {
var vm = this;
vm.Submit=function( ){
$state.go('results');
};
}
So Results.html renders perfectly fine launched on it's own, but when navigated to - the controller is called but not bound to the html template.
You have your index.html file set up properly, but after that you're using ui-router incorrectly.
In your index.html file where you have:
<body ui-view>
this tells ui-router to load the contents of your templates into the body of your document, so your templates should just be snippets of html to be rendered within your body tag. So you should delete everything from results.html until all that remains is this:
<div id="headerBar" >
<div class="form-group" id="headerBar" >
<input class="form-control input-lg" type="text" id="inputlg" placeholder="Zipcode" />
<button id="sub" class="btn btn-default btn-lg" type="submit" ng-click="vm.getInstructors()">Find an Instructor!</button>
</div>
</div>
<table>
<tr ng-repeat="Instructors in vm.instructors">
<td style="padding-top:5px;">
<div>
<nav class="navbar">
<div class="container-fluid">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" name="searchString" >
</div>
<button type="submit" class="btn btn-default" value="Filter">Search</button>
</form>
</div><!-- /.container-fluid -->
</nav>
</div>
</td>
</tr>
</table>
<div class="col-md-8">
</div>
<aside class="sidebar" ui-view="map">MAP</aside>
A few other things. You have the controller setup in your routes, so you don't need to specify it anywhere in results.html. Also you should not be able to navigate to results.html. Instead you would just navigate to (your domain)/results.
I want to pass the variable from html page to a hidden field in aspx page, I have a aspx form with code
<div id="divFrameHolder" style="display: none">
<iframe src="inner/RegSelect.html"name="myIframe" id="myIframe" width="100%" height="200px" frameborder="0" onload="hideLoading()">
<asp:HiddenField ID = "hidField" runat="server" value = " " />
</iframe>
</div>
and RegSelect.html has this code
<div id="tabs">
<ul>
<li style="font-family:'b nazanin'; font-weight:bold"><a onclick="use();" href="site"><i class="fa fa-picture-o fa-5x"></i><br />سایت</a></li>
<li style="font-family: 'b nazanin'; font-weight: bold"><a onclick="use();" href="stor"><i class="fa fa-shopping-cart fa-5x"></i><br />فروشگاه</a></li>
<li style="font-family: 'b nazanin'; font-weight: bold"><a onclick="use();" href="blog"><i class="fa fa-comments fa-5x"></i><br />وبلاگ</a></li>
</ul>
<section class="tabs-content" style="width:100%">
<div id="site" style="width:100%" >
</div>
<div id="stor">
</div>
<div id="blog">
</div>
</section>
</div>
<script>
$('#tabs a').click(function (e) {
var f = $(this).attr('href');
alert(f);
window.opener.location.href = "RegForm.aspx?" + "val=" + f
//var c = $('#myIframe').contents().find('#HF1').val();
//alert(c);
//alert($('#myIframe #HF1').val());
//$(' #HF1').val(f);
});
</script>
Now, I want get var f in aspx page? Can I get the variable from html page into aspx page?
You can use Request.QueryString to get the value of an URL parameter
Retrieve GET variables from URL in ASPX
Seems like you want to pass a variable from the html page in the IFrame to a hidden field in the page containing the IFrame.
Accessing IFrame content using jQuery as explained here: how to access iFrame parent page using jquery?
Note: ASP.NET WebForms has a setting that determines how ID's are generated for a control. See Here Make sure your hidden field's id mode is static.
Also understand that ASP.NET generates ID's to prevent collisions. Use an ID for your hidden field that you know will be unique on the page.
<asp:HiddenField ID="hidField" ClientIDMode="Static" runat="server" value=" " />
Use this to access the hidden field in the aspx page:
$('#tabs a').click(function (e) {
var f = $(this).attr('href');
alert(f);
window.opener.location.href = "RegForm.aspx?" + "val=" + f
$('#hidField', window.parent.document).val(f);
//var c = $('#myIframe').contents().find('#HF1').val();
//alert(c);
//alert($('#myIframe #HF1').val());
//$(' #HF1').val(f);
});
Note that hidField needs to be a dom element in the containing aspx page.
ASPX
<div id="divFrameHolder" style="display: none">
<iframe src="inner/RegSelect.html"name="myIframe" id="myIframe" width="100%" height="200px" frameborder="0" onload="hideLoading()">
</iframe>
<input type="hidden" id="hidField" />
</div>