How to execute javascript from html page - c#

I am making a request and reading the HTML content. The problem is that 90% of the content is JavaScript. How can I make the request and not get the JavaScript?
You can see here that CurrentHtml (the contents of the response) has JavaScript that contains elements that I need:
<!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>
<script type="text/javascript" src="js/jwplayer.js"></script>
<script type="text/javascript"> jwplayer.key = "5yP+phROWS+QiNQny92l2iTFqbmzhyI/mT+Zsw==";</script>
<script type="text/javascript" src="js/kyop_mock.js"></script>
<script id="kyop-header" type="text/x-jquery-tmpl">
<img class="left" src="${verticalBar}" />
<img class="logoCabecera" src="${logo}" />
<div class= "clearAll"></div>
</script>
<script id="kyop-links" type="text/x-jquery-tmpl">
{{each(index, adContent) contentTop}}
<span class="enlacesWrapper">
{{if document != null}}
<span><a target="_blank" href="${document.fileUrl}" title="${contentTittle}" ratittle="${ratittle}" rapage="${rapage}">${contentTittle}</a></span>
{{else}}
{{if link != null && link != ""}}
<span><a onclick="showModalWindow('#kyop-modal-${index}');" title="${contentTittle}" ratittle="${link.ratittle}" rapage="${link.rapage}">${contentTittle}</a></span>
<div id="kyop-modal-${index}" class="kyop-container-ventanaModal" style="display: none;">
<div class="ventanaModal">
<div class="right">
<img src="img/cerrarGrandeAzul.png" onclick="closeModalWindow('#kyop-modal-${index}')" style="cursor: pointer; cursor: hand; padding-bottom: 6px;">
</div>
<div>
<iframe class="kyop-modal-iframe" src="${link.linkUrl}" frameBorder="0"></iframe>
</div>
</div>
<div class="fondoTransparente"></div>
</div>
{{else}}
<span><a title="${contentTittle}" ratittle="${ratittle}" rapage="${rapage}">${contentTittle}</a></span>
{{/if}}
{{/if}}
{{if contentIcon != null && contentIcon != ""}}
<img src="${contentIcon}" />
{{/if}}
<div class="clearAll"></div>
</span>
{{/each}}
</script>
</head>
<body>
<div id="cajacentral" class="kyop_cajacentral" >
<div id="cabecera" >
</div>
<div id="pie">
<div id="pie_derecha">
</div>
<div id="pie_izquierda">
<b>© BBVA S.A.</b>
</div>
<div class="clearAll"></div>
</div>
</div>
</body>
</html>

When you get a Page Source you will get everything which is on the page, that's obvious.
There are 2 things you can do!
Remove Javascript from main page and put in a .Js file and reference it on your HTML, so you will finally receive a html with just single line
Remove Javascript tag from HTML after you receive response
Something like this
node.parentNode.removeChild(node);

you can't request a page without JS from a server separately. because it's a file that the server send to clients. unless there is a web service that make it to you.
but you can parse the HTML file and clear JS tags easily.
a wonderful parser

Related

Dynamically add the rows in table

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>

How to render specific fields from _Layout.cshtml

I have pages like Home.cshtml and _layout.cshtml. Header, Menubar and Footer classes In _layout.cshtml. I want only Header and Footer to my Home.cshtml, How to get?
Following In _layout.cshtml
<html lang="en">
<head>
</head>
<body>
<div class="header">
/*code*/
</div>
<div class="Menubar">
/*code*/
</div>
<div class="Footer">
/*code*/
</div>
</body>
Please try with the below code snippet.
_layout.cshtml
<body>
#section header
{
<div class="header">
/*code*/
</div>
}
#section Menubar
{
<div class="Menubar">
/*code*/
</div>
}
#section Footer
{
<div class="Footer">
/*code*/
</div>
}
</body>
Home.cshtml
#RenderSection("Menubar", false)
Note : I have added three section for your respective div. By default it will shows its content in all page. If you want to hide any section from any view then pass second parameter as false.

how to code behind a html button?

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")
}

Problems in DropDownList with updatepanel

I have two DropDownList with update panel when i select value from first dropdownlist then in second dropdownlist display data related first. But there is problem at run time it can't display dropdownlist and continuously refresh this page.
So please help to solve this problem.
Here is my code ASPX PAGE
<%# Page Language="C#" AutoEventWireup="true" CodeFile="AddRoomPrice.aspx.cs" Inherits="AddRoomPrice" %>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Presha Admin</title>
<style type="text/css">
#import url("css/style.css");
#import url('css/style_text.css');
#import url('css/form-buttons.css');
#import url('css/link-buttons.css');
#import url('css/menu.css');
#import url('css/statics.css');
#import url('css/messages.css');
#import url('css/table-sorter.css');
#import url('css/tabs.css');
#import url('css/forms.css');
#import url('css/datepicker.css');
#import url('css/jquery.fancybox-1.3.4.css');
#import url('css/accordions.css');
#import url('css/jquery.treeview.css');
#import url('css/wysiwyg.css');
#import url('css/wysiwyg.modal.css');
#import url('css/wysiwyg-editor.css');
</style>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<link rel="shortcut icon" href="gfx/Favicon.png">
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<!--[if lte IE 8]>
<script type="text/javascript" src="js/excanvas.min.js"></script>
<![endif]-->
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="container">
<div class="logo-labels">
<img id="logo" runat="server" src="~/gfx/logo.png" height="50" />
<ul>
<li><asp:Label ID="lblAdmin" runat="server" Text="Wel come "></asp:Label></li>
<li class="logout"><asp:LinkButton ID="lnkLogout" runat="server" onclick="lnkLogout_Click"><span>Logout</span></asp:LinkButton></li>
</ul>
</div>
<div class="menu-search">
<ul>
<li>Home</li>
<li>Hotel
<ul>
<li>Hotel List</li>
<li>Add Hotel</li>
</ul>
</li>
<li>Hotel Album
<ul>
<li>Album List</li>
<li>Add Album</li>
</ul>
</li>
<li>Hotel Facility
<ul>
<li>Facility List</li>
<li>Add Facility</li>
</ul>
</li>
<li>Category
<ul>
<li>Category List</li>
<li>Add Category</li>
</ul>
</li>
<li class="current">Room Price
<ul>
<li>Price List</li>
<li>Add Price</li>
</ul>
</li>
<li>New Facility</li>
<li>Admin
<ul>
<li>Admin List</li>
<li>Add Admin</li>
</ul>
</li>
<li>Inquiry</li>
<li>Map</li>
</ul>
</div>
<div class="breadcrumbs">
<ul>
<li class="home"></li>
<li class="break">»</li>
<li>Add Room Price</li>
</ul>
</div>
<div class="section">
<div class="box">
<div class="title">
<h2>Add/Edit Room Category</h2>
</div>
<div class="content forms">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="line padding-left50">
<label>Hotel</label>
<asp:DropDownList ID="ddlHotel" runat="server" AutoPostBack="true"
onselectedindexchanged="ddlHotel_SelectedIndexChanged">
</asp:DropDownList>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlHotel" EventName="selectedindexchanged" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<div class="line padding-left50">
<label>Room Category</label>
<asp:DropDownList ID="ddlCategory" runat="server">
</asp:DropDownList>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlHotel" EventName="selectedindexchanged" />
</Triggers>
</asp:UpdatePanel>
<div class="line padding-left50">
<label>Single Price</label>
<asp:TextBox ID="txtSingle" runat="server" class="medium"></asp:TextBox>
</div>
<div class="line padding-left50">
<label>Double Price</label>
<asp:TextBox ID="txtDouble" runat="server" class="medium"></asp:TextBox>
</div>
<div class="line padding-left50">
<label>Extra Bed Price</label>
<asp:TextBox ID="txtExtraBed" runat="server" class="medium"></asp:TextBox>
</div>
<div class="line padding-left50">
<label>Meal Plan</label>
<asp:TextBox ID="txtMealPlan" runat="server" class="medium"></asp:TextBox>
</div>
<div class="line padding-left50">
<label>Extra Meal Price</label>
<asp:TextBox ID="txtExtraMeal" runat="server" class="medium"></asp:TextBox>
</div>
<div class="line button" style="padding-left:325px">
<asp:Button ID="btnSubmit" runat="server" Text="Sumbit" CssClass="btn btn-2 btn-2d" onclick="btnSubmit_Click"></asp:Button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/supersubs.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/jquery.flot.js"></script>
<script type="text/javascript" src="js/jquery.graphtable-0.2.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/customInput.jquery.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.pager.js"></script>
<script type="text/javascript" src="js/jquery.sparkbox-select.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="js/jquery.filestyle.mini.js"></script>
<script type="text/javascript" src="js/date.js"></script>
<script type="text/javascript" src="js/jquery.datepicker.js"></script>
<script type="text/javascript" src="js/jquery.treeview.js"></script>
<script type="text/javascript" src="js/jquery.tipsy.js"></script>
<script type="text/javascript" src="js/jquery.wysiwyg.js"></script>
<script type="text/javascript" src="js/plugins/wysiwyg.rmFormat.js"></script>
<script type="text/javascript" src="js/controls/wysiwyg.image.js"></script>
<script type="text/javascript" src="js/controls/wysiwyg.link.js"></script>
<script type="text/javascript" src="js/controls/wysiwyg.table.js"></script>
<script type="text/javascript" src="js/inline.js"></script>
</form>
</body>
</html>
and here is CS code
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using BLL;
public partial class AddRoomPrice : System.Web.UI.Page
{
clsbll bll = new clsbll();
protected void Page_Load(object sender, EventArgs e)
{
if (Session["admin"] != null)
{
lblAdmin.Text = "Wel Come " + Session["admin"].ToString();
}
else
{
Response.Redirect("Login.aspx");
}
if (!Page.IsPostBack)
{
if (Session["hotelID"] != null)
{
ddlHotel.SelectedValue = Session["hotelID"].ToString();
}
ddlHotel.DataSource = bll.getHotel();
ddlHotel.DataTextField = "HName";
ddlHotel.DataValueField = "HotelID";
ddlHotel.DataBind();
ddlHotel.Items.Insert(0, "Select Hotel");
}
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
bll.insertRoomPrice(txtSingle.Text, txtDouble.Text, txtExtraBed.Text, txtMealPlan.Text, txtExtraMeal.Text, Convert.ToInt32(ddlCategory.SelectedValue), Convert.ToInt32(ddlHotel.SelectedValue));
txtSingle.Text = "";
txtDouble.Text = "";
txtExtraBed.Text = "";
txtMealPlan.Text = "";
txtExtraMeal.Text = "";
ddlCategory.SelectedIndex = 0;
ddlHotel.SelectedIndex = 0;
Session.Remove("hotelID");
//Session.Remove("hotel");
}
protected void ddlHotel_SelectedIndexChanged(object sender, EventArgs e)
{
ddlCategory.DataSource = bll.getCategoryByID(ddlHotel.SelectedValue);
ddlCategory.DataTextField = "RCategoryNameBed";
ddlCategory.DataValueField = "RCategoryID";
ddlCategory.DataBind();
ddlCategory.Items.Insert(0, "Select Category");
}
protected void lnkLogout_Click(object sender, EventArgs e)
{
Session.Remove("admin");
Response.Redirect("Login.aspx");
}
}
So please reply as soon as possible
Thanks
It is not you calling the page load function, that is the way ASP.NET works. The page posts to itself, thus calling the page_load function, when any Server controls on the page are fired (those which as set to postback).
What you need to do is to put some checks to differentiate between an initial page load and a post back
if(!IsPostBack)
{
//Code when initial loading
}
else
{
// code when post back
}
UpdatePanel control has been designed to refresh only its content.
For filtering purpose you can choose one of these methods:
All related DropDownLists must be placed inside one UpdatePanel.
or
First UpdatePanel and its content must be nested in second UpdatePanel.(Not Recommended)
There is no need to declare AsyncPostBackTrigger in both methods.
Good luck.
Maybe following code resolve the problem:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (Session["admin"] == null)
Response.Redirect("Login.aspx");
else
{
lblAdmin.Text = "Welcome " + Session["admin"].ToString();
ddlHotel.Items.Clear();
ddlHotel.Items.Add(new ListItem("Select Hotel", ""));
ddlHotel.AppendDataBoundItems = true;
ddlHotel.DataSource = bll.getHotel();
ddlHotel.DataTextField = "HName";
ddlHotel.DataValueField = "HotelID";
ddlHotel.DataBind();
if (Session["hotelID"] == null)
ddlHotel.SelectedIndex = 0;
else
ddlHotel.SelectedValue = Session["hotelID"].ToString();
ddlHotel_SelectedIndexChanged(null,null);
}
}
}
protected void ddlHotel_SelectedIndexChanged(object sender, EventArgs e)
{
ddlCategory.Items.Clear();
ddlCategory.Items.Add(new ListItem("Select Category", ""));
ddlCategory.AppendDataBoundItems = true;
ddlCategory.DataSource = bll.getCategoryByID(ddlHotel.SelectedValue);
ddlCategory.DataTextField = "RCategoryNameBed";
ddlCategory.DataValueField = "RCategoryID";
ddlCategory.DataBind();
}
if not, I am so sorry, I can not help you more.

Slideshow didn't work

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>

Categories