Does asp.net auto generate Javascript? - javascript

If I create a new VS project and copy the following example code into a new page default.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="WebApplication1._default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="top-menu" class="float-right">
<ul class="main">
<li><a id="A1" href="#" runat="server" class="current"><span>Home</span></a> </li>
<li><span>Members</span>
<ul class="sub curved">
<li>MemberPage1</li>
<li>MemberPage2</li>
<li>MemberPage3</li>
</ul>
</li>
<li><span>Blog</span> </li>
<li><span>Contact</span> </li>
<li><span>Admin</span> </li>
<li><span>Scan</span></li>
</ul>
</div>
</div>
</form>
</body>
</html>
When I run I get the following in my browser when I hover over Scan - Javascript:_doPostBack('ctl02','')
Being very new to ASP.NET this has surprised me as I didn't know I was using javascript so I hope this isn't a silly question......
If a user disables javascript in their browser (eg as advised by Tor recently) does it mean the server side event Scan_Click won't run?
If so is there an alternative to run server side scripts on an asp.net site with javascript disabled in the browser?

ASP.NET uses JavaScript for the Postback feature, so it won't run without JavaScript enabled.
If you want to run your application without JavaScript you must move to ASP.NET MVC and use regular POST actions.
But beware that in this other approach you won't have all those fancy controls like Calendar, Menu or even Button, everything is plain HTML.

If a user disables javascript in their browser (eg as advised by Tor recently) does it mean the server side event Scan_Click won't run?
Yep, the runat="server" attribute allows ASP.NET to translates your onserverclick event into some client-side code it can invoke via JS - if JS is disabled this code can't be triggered.
If so is there an alternative to run server side scripts on an asp.net site with javascript disabled in the browser?
You could manually write the HTML output which gives you control over how you invoke the postback, that way you can make sure you don't rely on JS. However, you need to weigh up the likelihood of your site functioning in general without JS enabled let alone just for postbacks.

Related

Locating javascript references to html elements using an asp.net masterpage

Cannot figure out how to reference html elements in javascript when using an asp.net MasterPage.
I have done a good deal of searching, and I have found many examples which say this should be the way to do it. But thus far, when I try to implement any of them, I have been unsuccessful.
To summarize, by what I have found, this should NOT work:
document.getElementByID('txtLabel');
because the actual element at runtime gets renamed by asp.net to something along the lines of 'ctl00_MainContent_txtLabel', all of which I have found to be true.
Most of the solutions that I have found are of the form:
document.getElementByID('<%=txtLabel.ClientID%>');
The trouble is, I have not been able to get this to work either.
If I try the following:
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<script>
var x = document.getElementById("<%=frm1.ClientID%>");
console.log(x);
</script>
<div class="jumbotron">
<h1>ASP.NET</h1>
<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS, and JavaScript.</p>
<p>Learn more »</p>
</div>
<div class="row">
<div id="frm1" class="col-md-4">
I am immediately greeted by a red squiggly from VS which states that
The name 'frm1' does not exist in the current context
So if I try the following:
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<script>
var x = document.getElementById("<%=frm1.ClientID%>");
console.log(x);
</script>
<div class="jumbotron">
<h1>ASP.NET</h1>
<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS, and JavaScript.</p>
<p>Learn more »</p>
</div>
<div class="row">
<div class="col-md-4">
<h2>Getting started</h2>
<p>
ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model.
A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access.
</p>
<p>
<a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301948">Learn more »</a>
</p>
<p>
<asp:Label runat="server" ID="frm1"></asp:Label>
</p>
</div>
The red squiggly now disappears, but at runtime, looking at the JS console in Chrome, the result of the JS call is null.
JQuery is also returning the same confusing results to me. I cannot find a way to reference a control on the page.
I would like to be able to reference the controls on the page through JS, but I cannot figure out how to.

How to write a navigation bar in one place and use it across all pages with just html/css/js

I'm sure I remember doing this once but can't remember how.
What I'm trying to do is write a navbar in html in one place and have every page take the html code from the file and add it to the page when the page loads. PHP doesn't work (I suspect I need a server for PHP to work which I don't even intend to use)
Something like:
Navbar file:
<div>
other code...
</div>
Main webpage file:
<html>
<header>
</header>
<body>
</body>
<div>
put navbar file code here...
</div>
</html>
<iframe src="file_with_only_div_content.html" allowtransparency="true" frameborder="0"></iframe>
You mean http://en.wikipedia.org/wiki/Server_Side_Includes server side includes?
<!--#include virtual="../quote.txt" -->
Are these even supported anymore?
In order for a web server to recognize an SSI-enabled HTML file and therefore carry out these instructions, either the filename should end with a special extension, by default .shtml, .stm, .shtm, or, if the server is configured to allow this, set the execution bit of the file.

Gujarati Language not showing

i create blogger blog For Gujarati Language Quiz
I used JS for a button in my blog at http://quizgujarat.blogspot.in
i use javascript in blogspot (blogger) post
when i click not radio button Gujarati Language Not showing in Alert Msg
please help
I use This Script
Code
<input type="button" style="margin-left: 0px" style="border:none" style="color:#999999" style="background-color: #fff0e0" value=" ક્લિક કરો " onclick=javascript:msg1001() /><script language="JavaScript">function msg1001(){alert("(A) વિકલ્પ Assam");}</script></td></tr><td valign="top" width="5%"><br />
Well, it works in the Fiddle that I just created. Although it works, that doesn't mean that you should use it.
A few recommendations, outside the scope of the question.
Don't use inline click handlers. Consider using unobtrusive javascript.
Don't use inline styles, use css.
Wrap that javscript onclick handler in quotes.
Move that script tag to the header of the page. Because the script tag is below the calling code, you could have a partially rendered page and "msg1001" may not exist yet when the button is clicked.
To display Gujarati font on any website there is only one requirement
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
</head>
And the page should be stored in utf-8 encoding.
Note: Once you have specified this meta tag then you need to remove other specifications for example if you are using jsp page then
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
this declarative should be removed or should be correct. Check you html page where this ambiguity can stop Gujarati font from displaying.

Using "Web Application Toolkit for Mobile Web Applications" for iPhone

I am using the Web Application Toolkit for Mobile Web Applications to develop a simple website (which allows to update the users) for Windows 7 Mobile and iPhone using asp.net MVC.
I am using the ibbdemo as simulator to test for iPhone.
I have been facing few issues with this.
Javascript/Jquery is not working (I have tried to set the textbox value in document.ready in a plain page with just a textbox)
Form Collection of radio button returns all the values in comma separated, not only the selected one.
Edit:
I am trying to do the following after the admin logs in to website:
Show links like Active Users and Inactive Users(Main/Index).
Once the Admin clicks the Active Users link, then the list of active users will be shown (User/Active)
On Clicking the Name of the user, the page to update the User details like Name, Sex, Email,... will be shown (User/Detail)
The javascript works till the 1st step, from 2nd step, it doesn't do anything. I have tried adding a dummy textbox in (Main/Index) page and set the value in document.ready, it worked. But when i do the same in (User/Active) or (User/Detail), the javascript/jquery doesn't seem to work. To Test, I have copied the first page content to all of them, but still it works in first page but not in rest. I am puzzled with this issue.
Here is the html that looks in (Main/Index):
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Mobile/iPhone/Site.Master"
Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div class="toolbar">
<h1 id="pageTitle">
</h1>
<a id="backButton" class="button" href="#"></a>
</div>
<form id="dashboardForm" action="Main/Index" method="get" title="Dashboard" class="panel"
selected="true">
<fieldset>
<div class="row">
<label>
Dummy:</label>
<%= Html.TextBox("dummyText") %>
</div>
<div class="row">
<label>
Users: Add</label>
</div>
<div class="row">
Active Users Inactive Users
</div>
</fieldset>
</form>
<script type="text/javascript" language="javascript">
$(function() {
$("#dummyText").val('test');
});
</script>
</asp:Content>
Is there any work around or did anyone face the same problem and found a solution for this?
Or is there any another toolikit for developing mobile apps using asp.net MVC, please suggest
There is a mode in Safari(the browser from Apple), that lets you emulate Mobile Safari, the browser of the iPhone.
In the menus, find Develop -> User Agent and choose the browser you want to emulate.

Adding jQuery to Master Pages

I have the following jquery in my ASP.NET regular pages
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Color Items</title>
<script src="http://code.jquery.com/jquery-latest.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("select option:even").addClass('evenColor');
});
</script>
<style type="text/css">
.evenColor
{
background-color:Gray;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Text="Gori"></asp:ListItem>
<asp:ListItem Text="Muf"></asp:ListItem>
<asp:ListItem Text="Lizo"></asp:ListItem>
</asp:DropDownList>
</div>
</form>
</body>
</html>
Now i want to convert this into a Master Pages. I am unable to figure out what will be added to the master page and what to the content page. Will the scripts go to MasterPage?
Please Note: I have many such regular asp.net pages with individual jquery files. Will I have to add all these jquery files into one master page.
What is the correct way?
Definitely add the reference to the common jquery files in your master page.
I would leave page specific javascript to that page, though others (especially if performance is of great importance) would argue to compile this as much as possible into one file, with just the specific commands on the page.
Put a reference to the jQuery script file in your Master Page (you may decide to do this using a ScriptManager control if using any of MS AJAX library too).
Put a reference to any page specific JavaScript file in that page only
Refactor any page specific JavaScript code that repeats over multiple pages into one file that is referenced by the pages.
In addition to the suggestion to add the jQuery links in a master page, I'd suggest using nested master pages so that the base master page has markup, and the derived master includes the jQuery. That way you can choose to use the jQuery enabled master, or the non-jQuery (base) master page on a page-by-page basis for optimal performance.

Categories

Resources