I am trying to create a View with 2 buttons that redirect users to other views but nothing happens when they are clicked. What am I doing wrong? Thanks in advance.
<% using (Html.BeginForm()) {%>
<p>
Please LogIn or Register
</p>
<p>
<button name="button" type="button"onclick="document.location.href=$('#logInUrl').attr('href')">LogIn</button>
<button name="button" type="button" onclick="document.location.href=$('#createAccountUrl').attr('href')">Register</button>
<a id="logInUrl" href="<%= Html.AttributeEncode(Url.Action("Account", "LogOn")) %>" style="display:none;"></a>
<a id="createAccountUrl" href="<%= Html.AttributeEncode(Url.Action("Account", "Register")) %>" style="display:none;"></a>
</p>
<% } %>
Working Code
<asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" language="javascript" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function()
{
$('#button1').click(function ()
{
document.location.href = $('#logInUrl').attr('href');
});
$('#button2').click(function ()
{
document.location.href = $('#createAccountUrl').attr('href');
});
});
</script>
<% using (Html.BeginForm()) {%>
<p>
Please LogIn or Register
</p>
<p>
<button name="button1" type="button" id="button1">LogIn</button>
<button name="button2" type="button" id="button2">Register</button>
<a id="logInUrl" href="<%= Html.AttributeEncode(Url.Action("LogOn", "Account")) %>" style="display:none;"></a>
<a id="createAccountUrl" href="<%= Html.AttributeEncode(Url.Action("Register", "Account")) %>" style="display:none;"></a>
</p>
<% } %>
</asp:Content>
Since it looks like you are using jquery, don't use onclick on the button but jquery click function of the buttons like
$('#button1').click(function() {
document.location.href=$('#logInUrl').attr('href');
});
$('#button2').click(function() {
document.location.href=$('#createAccountUrl').attr('href');
});
<button name="button" type="button" id="button1">LogIn</button>
<button name="button" type="button" id="button2">Register</button>
Related
Suppose we select the row in gridview then we get the one number from gridview. Suppose we get 8 number from gridview then how to add the Eight rows in html table with textboxes. is it possible, and how it use with jquery .append(), Thanks in Advance.
I am not sure that I understand the question properly, but yes it is possble and very simple with jquery. Your script should look something like:
function appendTable(numberOfRows) {
var row = '<tr><td><input type="text" class="yourInput"></td></tr>'; //you should change this for your needs
for (var i = 0; i < numberOfRows; i++) {
$('#yourTable').append(row);
}
}
Here is a complete example for add row and remove row :
<!DOCTYPE html>
<html>
<head>
<title>Add / Remove Row</title>
<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".btn-add").on('click', function() {
var singleRow = $(".singleRow").eq(0).clone();
singleRow.find('.btn-add')
.removeClass('btn-succcess')
.addClass('btn-danger')
.removeClass('btn-add')
.addClass('remove')
.html("X");
singleRow.find('input').each(function(i, input) {
$(input).val('');
});
$("#wrapper").append(singleRow);
});
$(document).on('click', ".remove", function() {
$(this).parent().remove();
});
});
</script>
<style type="text/css">
.singleRow {
padding: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<form role="form" autocomplete="off" id="wrapper">
<div class="row singleRow">
<div class="col-md-3">
<input class="form-control" name="name[]" type="text">
</div>
<div class="col-md-3">
<input class="form-control" name="phone[]" type="text">
</div>
<div class="col-md-1">
<select name="opt[]" class="form-control">
<option>1</option>
<option>2</option>
</select>
</div>
<button type="button" class="btn btn-success btn-add">
+
</button>
</div>
</form>
</div>
</body>
</html>
When clicking the submit button the auth function isn't being called, I haven't been able to figure out why.
html for the template for all pages:
<!DOCTYPE html>
<html ng-app ="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyApp #ViewBag.Title</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/js/Login.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("myApp", "Index", "Home", null, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - myApp</p>
</footer>
</div>
</body>
</html>
html for this pages view:
#{
ViewBag.Title = "Login";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2></h2>
<div id="loginBox">
<auth-modal></auth-modal>
</div>
here is the html for the custom directive:
<div class="modal fade">
<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"></h4>
</div>
<div class="modal-body">
<form class="form-signin" name="authForm" ng-submit="auth()" ng-controller ="AuthController" novalidate>
<input type="text" class="form-control" placeholder="user name" ng-model ="AuthController.user.username" required autofocus>
<input type="password" class="form-control" placeholder="password" ng-model ="AuthController.user.password" required>
<input type="submit" class="btn btn-primary" value="Submit" />
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
Here is the JS:
(function () {
var MyApp = angular.module('MyApp', []);
MyApp.controller('AuthModalController', function () {
MyApp.user = {};
console.log("AuthModalController ran");
$(".modal").modal({});
});
MyApp.directive("authModal", function () {
return { restrict: 'E', templateUrl: '\\js\\templates\\auth-modal.html', controller: 'AuthModalController',controllerAs: 'authmodalCtrl'}
});
MyApp.controller('AuthController',function () {
this.user = {};
console.log("AuthController ran");
this.auth = function () {
console.log("user " + this.user);
};
});
})();
MVC 5 Controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MyApp.Controllers
{
public class MyAppController : Controller
{
//
// GET: /MyApp/
public ActionResult Index()
{
return View();
}
}
}
Edit: I'm adding on here that I couldn't get the code linked below to run except by adding the ng-app="app-name-from-module" directive alongside the controller declaration on the form object, which is not in the linked angular-js documentation!
Reading just the documentation I noticed quite a few issues,
1) You're declaring "myApp" and using "MyApp" unless thats an obfuscation error.
2) I think your controller is missing a few things per the documentation (esp $scope variable, https://docs.angularjs.org/guide/controller)
2a) You're not attaching the auth function to the $scope
3) The .controller seems to take a string and an array as an argument, not a generic function.
Per: https://docs.angularjs.org/api/ng/directive/ngSubmit
<script>
angular.module('submitExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.list = [];
$scope.text = 'hello';
$scope.submit = function() {
if ($scope.text) {
$scope.list.push(this.text);
$scope.text = '';
}
};
}]);
</script>
<form ng-app="submitExample" ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
<pre>list={{list}}</pre>
</form>
I am trying to redirect to Search.aspx after login button is clicked. the login button is a html5 button. I googled and they say to make it work is to add the runat="server" and önserverclick="Button1_Click". After I done that, I double click on the login button on design mode. and it generates
function Button1_onclick() {
}
I put the Response.Redirect("Search.aspx"); inside the function. And it still have no effect when I click the Login button.
SOURCE CODE
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
</style>
<link rel="stylesheet" type="text/css" href="stylesheets/loginstyle.css" />
<script language="javascript" type="text/javascript">
// <![CDATA[
function Button1_onclick() {
Response.Redirect("Search.aspx");
}
// ]]>
</script>
</head>
<body>
<div id="wrapper">
<form name="login-form" class="login-form" action="" method="post">
<div class="header">
<h1>Login Form</h1>
<span>Fill out the form below to login to my super awesome imaginary control panel.</span>
</div>
<div class="content">
<input name="username" type="text" class="input username" placeholder="Username" />
<div class="user-icon"></div>
<input name="password" type="password" class="input password" placeholder="Password" />
<div class="pass-icon"></div>
</div>
<div class="footer">
<input type="button" name="submit" value="Login" class="button" runat="server" id="Button1" önserverclick="Button1_Click" onclick="return Button1_onclick()" />
</div>
</form>
</div>
<div class="gradient"></div>
</body>
</html>
CODE BEHIND CODE(NOCODE)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Login : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
try below code I hope it would help!!
function Button1_onclick()
{
window.location.assign("Search.aspx")
}
I try to firean submit via an asp button. I got the error that there is no definition vor SubmitBtn_Click in 'ASP.default_aspx.
BootstrapASP.Master:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="BootstrapASP.master.cs" Inherits="Shift.BootstrapASP" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Shift</title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
<div>
<asp:ContentPlaceHolder ID="ContentMain" runat="server"></asp:ContentPlaceHolder>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/interactive.js"></script>
</body>
</html>
Default.aspx:
<%# Page Title="Shift" Language="C#" MasterPageFile="~/BootstrapASP.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Shift.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"></asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentMain" runat="server">
<div class="container content-wrapper">
<form role="form" runat="server">
<div class="row">
<div class="col-md-4 col-md-offset-7">
<asp:LinkButton ID="SubmitBtn" runat="server" OnClick="SubmitBtn_Click" CssClass="btn btn-danger btn-lg pull-right">
<span class="glyphicon glyphicon-import"></span> Senden
</asp:LinkButton>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-1">
<h1>Set Down</h1>
<hr />
<div id="down-form-holder">
<div class="form-group">
<label for="old-pc-ci">Computer CI*</label>
<input type="text" class="form-control" name="old-pc-ci" id="old-pc-ci" />
</div>
<div class="form-group">
<label for="old-mon-ci">Monitor CI*</label>
<input type="text" class="form-control" name="old-mon-ci[]" id="old-mon-ci" />
</div>
</div>
<button type="button" id="old-add-monitor" class="btn btn-default btn-sm pull-right">
<span class="glyphicon glyphicon-plus"></span> Monitor
</button>
</div>
</div>
</form>
</div>
</asp:Content>
In the Default.aspx.cs I created an eventhandler for the "SubmitBtn_Click"
Default.aspx.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Shift
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
void SubmitBtn_Click(Object sender, EventArgs e)
{
}
}
}
Methods in C# are private by default, so your click handler is not visible from the markup. Common practice is to make them protected:
protected void SubmitBtn_Click(Object sender, EventArgs e)
Your event needs to be protected, the way you have it is defaulting to private:
protected void SubmitBtn_Click(Object sender, EventArgs e)
{
}
protected void SubmitBtn_Click(object sender, EventArgs e)
{
}
<asp:LinkButton ID="SubmitBtn" runat="server" OnClick="SubmitBtn_Click" CssClass="btn
btn-danger btn-lg pull-right">
<span class="glyphicon glyphicon-import"></span> Senden</asp:LinkButton>
I spent > 8 hours today just to make my slide works but unfortunately it didn't work.It only display the 4 static images.. Why it doesn't work? Can anybody tell me? Here is my code.
asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<style type="text/css" media="screen">
.slides_container {
width:570px;
height:270px;
}
.slides_container div {
width:570px;
height:270px;
display:block;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="slides.js"></script>
<script>
$(function() {
$("#slides").slides({
preload: true
});
});
</script>
.........................
<div id="slides">
<div class="slides_container">
<div> <img src= "folder/6.jpg" /></div>
<div><img src="folder/7.jpg" /></div>
<div><img src="folder/extreme.jpg" /></div>
<div><img src="folder/alza.jpg" /></div>
</div>
</div>
Someone who knows my problem, please help me. Appreciate that. Have a nice Tuesday :)
I assume you make use of SlideJS? If I am correct - have a look at this demo code - which worked for me
<style type="text/css" media="screen">
.slides_container
{
width: 570px;
height: 270px;
}
.slides_container div
{
width: 570px;
height: 270px;
display: block;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- downloaded from SlideJS and put it in a js folder -->
<script src="js/slides.min.jquery.js"></script>
<script>
$(function () {
$("#slides").slides({
preload: true
});
});
</script>
<div id="slides">
<div class="slides_container">
<div>
<img src="pic/1.jpg" /></div>
<div>
<img src="pic/2.jpg" /></div>
<div>
<img src="pic/3.jpg" /></div>
<div>
<img src="pic/4.jpg" /></div>
</div>
</div>