I’m trying to integrate “jquery.mmenu” in a Visual Studio project.
It seems that “asp:Button” does not work inside a “mmenu nav “.
Nor a "asp:LinkButton" seems to fully perform.
Take the specific case of a login:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="test._default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/jquery-ui-1.11.4.min.js"></script>
<script src="Scripts/jquery.mmenu.min.all.js"></script>
<link href="Content/themes/base/all.css" rel="stylesheet" />
<link href="Content/themes/base/jquery.mmenu.all.css" rel="stylesheet" />
<title></title>
<script>
$(document).ready(function () {
$("#login").mmenu({
});
});
</script>
</head>
<body>
<div>
<form id="form1" runat="server">
Open login pannel<br />
<asp:LoginStatus ID="LoginStatus1" runat="server" LogoutAction="Redirect" LoginText="login" LogoutText="logout" LogoutPageUrl="~/" /><br />
<nav id="login">
<div>
<asp:Label ID="UserNameLabel" runat="server">User:</asp:Label><br />
<asp:TextBox ID="UserNameTextBox" runat="server"></asp:TextBox><br />
<asp:Label ID="PasswordLabel" runat="server">Password:</asp:Label><br />
<asp:TextBox ID="PasswordTextBox" runat="server" TextMode="Password"></asp:TextBox><br />
<asp:Button ID="LoginButton" runat="server" ClientIDMode="Static" Text="Login Button" OnClick="LoginButton_Click" /><br />
<asp:LinkButton ID="LoginLinkButton" runat="server" ClientIDMode="Static" OnClick="LoginLinkButton_Click">Login LinkButton</asp:LinkButton>
</div>
</nav>
</form>
</div>
</body>
</html>
The code behind looks like:
using System;
using System.Web.Security;
namespace test
{
public partial class _default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void LoginButton_Click(object sender, EventArgs e)
{
if (Membership.ValidateUser(UserNameTextBox.Text, PasswordTextBox.Text))
{
FormsAuthentication.RedirectFromLoginPage(UserNameTextBox.Text, false);
}
}
protected void LoginLinkButton_Click(object sender, EventArgs e)
{
if (Membership.ValidateUser(UserNameTextBox.Text, PasswordTextBox.Text))
{
FormsAuthentication.RedirectFromLoginPage(UserNameTextBox.Text, false);
}
}
}
}
The asp:Button does not post back.
The asp:LinkButton does not login.
Is there a way to have it working?
Thanks.
Web forms most of the time change the name of the element and jquery needs the exact name to find your button. Add this property to your button and test again
ClientIDMode="Static"
The mmenu plugin grabs the NAV#login from the HTML and puts it back directly inside the BODY. Meaning, the input and button are no longer inside the FORM (and thus won't submit the form).
Basically, if you put the FORM inside the NAV#login all should work as expected.
Related
I'm new to C# - ASP.NET and I'm trying to drop data ,from a filled form, from .aspx to .cshtml.
I made a form with three TextBoxes and a Button, a method for the "onClick". This method set the value of ViewData (name,date,user) with the values of the three TextBoxes. And I want to collect these value on the page targeted by the form.
I do not get any error but ViewData(name,date,user) seems to be empty.
Here's my code :
CSHTML
#{
ViewBag.Title = "Consulter";
}
#Html.Partial("MenuBar")
#Html.Partial("Connexion")
#ViewData["name"]
<style type="text/css">
...
</style>
...
<h2>...
ASPX
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<script language="C#" runat="server">
public void Ajouter(Object sender, EventArgs e)
{
ViewData["name"] = dateForm.Text;
ViewData["date"] = dateForm.Text;
ViewData["user"] = userForm.Text;
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<meta name="viewport" content="width=device-width" />
<title>AjouterForm</title>
</head>
<body>
<h1>Ajouter un produit</h1>
<div>
<form id="form1" runat="server" action="Consulter" defaultbutton="bouton1" method="get">
<div>
<asp:TextBox placeholder="Name" runat="server" ID="nameForm"/></br>
<asp:TextBox placeholder="Date" runat="server" ID="dateForm"/></br>
<asp:TextBox placeholder="User" runat="server" ID="userForm"/></br>
<asp:Button runat="server" text="Envoyer" ID="bouton1" onClick="Ajouter"/>
<asp:Label runat="server" ID="label1" />
</div>
</form>
</div>
</body>
</html>
If you know how to solve it or if you have another way to do it, it would be amazing :)
Thank you in advance.
I am developing a website using ASP.NET and used jQuery to implement the tabs in the page.
I got the design perfectly. but problem is I have a treeview on each tab. When user click a node the page should redirect to another page. Currently I am using response.redirect method which worked perfectly. But after I put the treeview control inside this jQuery tab post back occurs but instead of redirecting again it loads the same page with the tabs. I put a break point on SelectedNodeChanged event of the treeview but compiler even didn't reach to the breakpoint. What went wrong?
Here is the code
<link rel="stylesheet" href="Content/jquery-ui.css">
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/jquery-ui.js"></script>
<script>
$(function () {
$("#tabs").tabs();
});
</script>
<div id="tabs">
<ul>
<li>Test1</li>
</ul>
<div id="tabs-1">
<asp:TreeView ID="tvTest" runat="server" OnSelectedNodeChanged="tvTest_SelectedNodeChanged">
<NodeStyle CssClass="tree" />
</asp:TreeView>
</div>
</div>
Here is the selectednodechanged event
protected void tvTest_SelectedNodeChanged(object sender, EventArgs e)
{
Response.Redirect("~/Display.aspx",true);
}
These are my Test pages. When the node changes, I.E. I click on a different node, it redirects me to the said page.
TreeView.aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="TreeTest.aspx.cs" Inherits="WebApplication.TreeTest" %>
<!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>
<link rel="stylesheet" href="Scripts/jquery-ui.css" />
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
});
</script>
</head>
<body>
<form runat="server">
<div id="tabs">
<ul>
<li>Test1</li>
</ul>
<div id="tabs-1">
<asp:TreeView ID="tvTest" runat="server" OnSelectedNodeChanged="tvTest_SelectedNodeChanged">
<NodeStyle CssClass="tree" />
<Nodes>
<asp:TreeNode Text="Test1"></asp:TreeNode>
<asp:TreeNode Text="Test2"></asp:TreeNode>
</Nodes>
</asp:TreeView>
</div>
</div>
</form>
</body>
</html>
TreeView.aspx.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication
{
public partial class TreeTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void tvTest_SelectedNodeChanged(object sender, EventArgs e)
{
Response.Redirect("~/Display.aspx", true);
}
}
}
So, I'm not sure what's going on. My boss wasn't pleased with me using MVC and Razor, so I'm being forced to code with this nasty webcontrol/codebehind style. =/
The error is:
Only Content controls are allowed directly in a content page that contains Content controls.
Here is the masterpage:
<%# Master Language="C#"%>
<!DOCTYPE html>
<html>
<head>
<title>Application Form</title>
</head>
<body>
<div id="container">
<asp:contentplaceholder id="contentPlaceHolder" runat="server" />
</div>
</body>
</html>
And here is the Default.aspx page that's throwing the error.
<%# Page Language="C#" Inherits="dumb.Default" MasterPageFile="MasterPage.master" %>
<h2>Application Form</h2>
<asp:Content id="content" ContentPlaceHolderID="contentPlaceHolder" runat="server">
<p>Please complete this application.</p>
<form action="Default.aspx" method="post" runat="server">
<div>
<span class="spaced">Name:</span><asp:TextBox id="name" runat="server" />
</div>
</form>
<p>
<asp:Label id="finalmessage" runat="server" />
</p>
</asp:Content>
And the silly Default.aspx.cs codebehind...
using System;
using System.Web;
using System.Web.UI;
namespace dumb
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load (object sender, EventArgs e)
{
if (IsPostBack) {
finalmessage.Text = "Submission Processed Successfully!";
}
}
}
}
All of your content, including static HTML must be inside Content tags in the content page. You have a <h2> outside:
<h2>Application Form</h2>
<asp:Content id="content" ContentPlaceHolderID="contentPlaceHolder" runat="server">
Should be:
<asp:Content id="content" ContentPlaceHolderID="contentPlaceHolder" runat="server">
<h2>Application Form</h2>
I need value to be passing from ASP.NET page to JavaScript and then to HTML textfield.
My following code is able to read values from ASP.NET to JavaScript but unable to pass value form JavaScript to HTML TextField. Can anybody please correct my code.
Default.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
function can() {
var myVariable = '<%=ServerSideVariable %>';
document.write(myVariable);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<br />
<br />
<br />
<br />
<input id="Text1" type="text" value='can()'/>
</div>
</form>
</body>
</html>
Default.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
public string ServerSideVariable { get; set; }
protected void Page_Load(object sender, EventArgs e)
{
string pval = "Passed value;
ServerSideVariable = pval;
}
}
document.getElementById('Text1').value = myVariable;
But you need to move the assignment script block bellow the declaration of element Text1, or do it on document.ready
Anyway, you also need to error check.
It's best to use JQuery anyway, and get familiar with it.
As others have said with javascript OR like this:
(since there is nothing in your example that requires javascript -- KISS-- don't use javascript if you don't have to do so.)
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<br />
<br />
<br />
<br />
<input id="Text1" type="text" ><%=ServerSideVariable %></input>
</div>
</form>
</body>
</html>
Do this instead in a document.load.
document.getElementByID('Text1').value = myVariable;
First I have to let you know that i am a newbie in this area, learning from tutorials.
With that said I'm looking for a way to load sourcecode from the codebehind file into a textbox, when clicking a button. Same goes for the aspx file.
Im making this website, where i am going to show code examples from what im doing. So if I navigate to myweb.com/tutorial1done.aspx this page would show me the final result from the tutorial done. When i click the show source button it should make 2 textboxes visible, and add the codebehind to the first box, and the aspx source to the second box.
I don't know if it is possible, but I am hoping so.
This far i have this:
ASPX:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="DateTimeOutput.aspx.cs" Inherits="WebApplication1.DateTimeOutput" %>
<!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>
<link rel="stylesheet" href="../styles/codeformatter.css" />
</head>
<body>
<form id="form1" runat="server">
<customControls:Header runat="server" heading="Date and Time Output" />
<div>
<asp:Panel ID="Panel1" runat="server">
<asp:TextBox ID="outputText" runat="server" Height="175px" TextMode="MultiLine"
Width="400px"></asp:TextBox>
</asp:Panel>
</div>
<asp:Panel ID="Panel2" runat="server">
<asp:Button ID="runButton" runat="server" Text="Run Code"
onclick="runButton_Click" Width="95px" />
<asp:Button ID="clearButton" runat="server" Text="Clear Console"
onclick="clearButton_Click" Width="95px" />
<br />
<br />
<asp:Button ID="dt_showSource_btn" runat="server"
onclick="dt_showSource_btn_Click" Text="Show Source" />
</asp:Panel>
<asp:Label ID="dtLabel1" runat="server" Text="Code Behind:" Visible="False"></asp:Label>
<br />
<asp:TextBox ID="dtcb_output" runat="server" Height="175px"
TextMode="MultiLine" Visible="False" Width="400px"></asp:TextBox>
<br />
<br />
<asp:Label ID="dtLabel2" runat="server" Text="ASPX:" Visible="False"></asp:Label>
<br />
<asp:TextBox ID="dtaspx_output" runat="server" Height="175px"
TextMode="MultiLine" Visible="False" Width="400px"></asp:TextBox>
</form>
</body>
</html>
And the Codebehind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication1
{
public partial class DateTimeOutput : System.Web.UI.Page
{
protected void output(String value)
{
outputText.Text += value + Environment.NewLine;
}
protected void runButton_Click(object sender, EventArgs e)
{
DateTime dt = new DateTime();
output(dt.ToString());
DateTime nowDt = DateTime.Now;
output(nowDt.ToString());
}
protected void clearButton_Click(object sender, EventArgs e)
{
outputText.Text = "";
}
protected void dt_showSource_btn_Click(object sender, EventArgs e)
{
if (dtcb_output.Visible == false)
{
dtLabel1.Visible = true;
dtcb_output.Visible = true;
}
else
{
dtLabel1.Visible = false;
dtcb_output.Visible = false;
}
if (dtaspx_output.Visible == false)
{
dtLabel2.Visible = true;
dtaspx_output.Visible = true;
}
else
{
dtLabel2.Visible = false;
dtaspx_output.Visible = false;
}
}
}
}
For now source highlighting is not needed, unless its easy to do.
Thx in advance.
If you're refering to the actual code of your code behind file, you have a problem. As the file will be compiled and then be placed as intermediate code in a dynamic link library (.dll), you don't have access to the .aspx.cs file any more. The only way to go would be to include the code behind file with the deployd project and open it with a FileStream (or whatever) to read it and display it's content.