Advertisements

Archive

Posts Tagged ‘HTML’

Send Email from a Static HTML

April 29, 2017 11 comments

Send an email without back-end/server side code.

There are many solutions available for sending an email here I am explaining steps to sending an email from html page using Google Apps mail.

1. Make a Copy of the Sample Spreadsheet.

Sample: https://docs.google.com/spreadsheets/d/1Bn4m6iA_Xch1zzhNvo_6CoQWqOAgwwkOWJKC-phHx2Q/

1

2.Open the Script Editor

Open the Script editor… by clicking “Tools” > “Script editor…

3

3. Set the TO_ADDRESS in the Script

4

4. Save a New Version of your Script

Goto File-> Manager Version option to set Version

5. Publish the Updated Script as a Web App

Goto menu Publish-> Deploy as Web app option to publish

Select the latest project version to deploy:

7

6. Authorize the Script to Send Emails

Click Continue to authorize this app

8

Copy the web app URL to your clip board / note pad. Then Click “OK”.

10

7. Create your basic HTML Form

11

8. Open the HTML Form (page) in your Browser

Fill in some sample data in the HTML Form:

12

Submit the form. You should see a confirmation that it was sent like

{“result”:”success”,”data”:”{\”color\”:[\”\”],\”name\”:[\”Rahul\”],\”message\”:[\”This is test \”],\”email\”:[\”rahulgbhatia@live.com\”]}”}

Alternate solution : Use Ajax to submit the form

Hope this help !

Background Reading

 

Advertisements

twiter bootstrap Navbar page selection (class=’active’)

March 6, 2013 6 comments

Hello All,

I have noticed a very common problem in twitter-bootstrap navbar , when user click on any item or navigate on other page by clicking any item from navbar, item not remain selected/active.

Here is the solution for above problem
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<meta charset=”utf-8″>
<title>AXSyst</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta name=”description” content=”Advanced Xpert Systems”>
<meta name=”author” content=””>
<!– Le styles –>
<link href=”css/bootstrap.css” rel=”stylesheet”>
<style type=”text/css”>
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
</style>
<link href=”css/bootstrap-responsive.css” rel=”stylesheet”>
<!– Le HTML5 shim, for IE6-8 support of HTML5 elements –>
<!–[if lt IE 9]>
<![endif]–>
<script src=”js/jquery.js”></script>  <!–THIS NEEDS TO BE PLACED HERE BECAUSE $(document).ready(function(){ WON’T WORK.  ALL OTHER JS ARE LOCATED IN _footer.php –>
</head>
<body>
<!–NavBar –>
<div>
  <div>
    <div>
      <a data-toggle=”collapse” data-target=”.nav-collapse”>
        <span></span>
        <span></span>
        <span></span>
      </a>
      <a href=”index.php”>MySite</a>
      <div>
        <ul id=ul_nav>
          <li id=”li_home”><a href=”index.php”>Home</a></li>
          <li id=”li_about”><a href=”about.php”>About</a></li>
          <li id=”li_cont”><a href=”contact.php”>Contact</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!–NavBar end –>
Add following line of code to make selected node active in navbar….
———————————————————————————–
<script type=”text/javascript”>
function GetCurrentPageName() { 
//method to get Current page name from url. 
var PageURL = document.location.href; 
var PageName = PageURL.substring(PageURL.lastIndexOf(‘/’) + 1); 
 
return PageName.toLowerCase() ;
}
 
$(document).ready(function(){
var CurrPage = GetCurrentPageName();
 
switch(CurrPage){
case ‘index.php’:
 $(‘#li_home’).addClass(‘active’) ;
 break;
case ‘about.php’:
 $(‘#li_about’).addClass(‘active’) ;
 break;
case ‘contact.php’:
 $(‘#li_cont’).addClass(‘active’) ;
 break;
}
});
</script>
———————————————————————————–
Hope it helps !
 

Understanding asp.net MVC (Model View Controller) architecture

November 28, 2012 4 comments

This article is intended to provide basic concept and fundamentals of asp.net MVC (Model View Controller) architecture workflow for beginners.

Introduction:

“M” “V” “C” stands for “MODEL” “VIEW” “CONTROLLER” , asp.net MVC is an architecture to develop asp.net web applications in a different manner than the traditional asp.net web development , web applications developed with asp.net MVC is even more SEO (Search Engine Friendly ) friendly.

Developing asp.net MVC application requires Microsoft .net framework 3.5 or higher.

MVC interaction with browser:

Like a normal web server interaction, MVC application also accept request and respond web browser same way.


Inside MVC architecture:

Whole asp.net MVC architecture is based on Microsoft .net framework 3.5 and in addition uses LINQ to SQL Server.

What is a Model?

  1. MVC model is basically a C# or VB.net class
  2. A model is accessible by both controller and view
  3. A model can be used to pass data from Controller to view.
  4. A view can use model to display data in page.

What is a View?

  1. View is an ASPX page without having a code behind file
  2. All page specific HTML generation and formatting can be done inside view
  3. One can use Inline code (server tags ) to develop dynamic pages
  4. A request to view (ASPX page) can be made only from a controller’s action method

What is a Controller?

  1. Controller is basically a C# or VB.net class which inherits system.mvc.controller
  2. Controller is a heart of whole MVC architecture
  3. Inside Controller’s class action methods can be implemented which is responsible for responding to browser OR calling view’s.
  4. Controller can access and use model class to pass data to view’s
  5. Controller uses ViewData to pass any data to view


MVC file structure & file naming standards

MVC uses a standard directory structure and file naming standards which is very important part of MVC application development.

Inside the ROOT directory of the application there must be 3 directories each for model, view and Controller.

Apart from 3 directories there must have a Global.asax file in root folder. And a web.config like a traditional asp.net application.

  • Root [directory]
    •  Controller [directory]
      • Controller CS files
    •  Models [directory]
      • Model CS files
    •  Views [directory]
      • View CS files
    • Global.asax
    • Web.config

Asp.net MVC Execution life cycle

Here is how MVC architecture executes the requests to browser and objects interactions with each other.

A step by step process is explained below: [Refer figure as given below]


Step 1: Browser request

Browser request happens with a specific URL. Let’s assume that user entering URL like: [xyz.com]/home/index/

Step 2: Job of Global.asax – MVC routing

The specified URL will first get parsed via application_start() method inside Global.asax file. From the requested URL it will parse the Controller, Action and ID.

So for [xyz.com]/home/index/:

Controller = home

Action = index()

ID = empty — we have not specified ID in [xyz.com]/home/index/, so it will consider as empty string

Step 3: Controller and Action methods

MVC now find the home controller class in controller directory. A controller class contains different action methods,

There can be more than one action method, but MVC will only invokes the action method which is been parsed from the URL, its index() in our case.

So something like: homeController.index() will happen inside MVC controller class.

Invoking action method can return plain text string OR rendered HTML by using view.

Step 4: Call to View (ASPX page)

Invoking view will return view() . a call to view will access the particular ASPX page inside the view directory and generate the rendered HTML from the ASPX and will respond back to the browser.

In our case controller was home and action was index(). So calling view() will return a rendered HTML from the ASPX page located at /views/home/index.aspx.

This is it, the whole process ends here. So this is how MVC architecture works.