Develop Reference

How to change the position of divs in asp.net form dynamically

In the design of web form I have four divs
divGeneralDetails
divLanguageDetails
divLinkDetails
divOperationalDetails
Divs mentioned above are displayed vertically in the form.
My question is.
Depending on value in query string, i will have to change the order in which divs are displayed.
In my Page_Load event
string FirstDiv = Request.QueryString["id"];
if value of FirstDiv is equal to "General"
then order should be
- divGeneralDetails
- divLanguageDetails
- divLinkDetails
- divOperationalDetails
if value of FirstDiv is equal to "Operational"
then order should be
- divOperationalDetails
- divGeneralDetails
- divLanguageDetails
- divLinkDetails
How do I set this in Page_Load event. Any help will be highly appreciated.
Thanks

You can use Panel.
Example:
<asp:Panel ID="panelMain" runat="server">
<asp:Panel ID="divGeneralDetails" runat="server"></asp:Panel>
<asp:Panel ID="divLanguageDetails" runat="server"></asp:Panel>
<asp:Panel ID="divLinkDetails" runat="server"></asp:Panel>
<asp:Panel ID="divOperationalDetails" runat="server"></asp:Panel>
</asp:Panel>
And then rearrange it add code behind:
panelMain.Controls.Clear();
panelMain.Controls.Add(divOperationalDetails);
panelMain.Controls.Add(divGeneralDetails);
panelMain.Controls.Add(divLanguageDetails);
panelMain.Controls.Add(divLinkDetails);

If you want to do it server-side, then for good working of ViewState (if it is being used) the Divs would have to be added in the desired order using Page.Controls.Add() in the PreInit event of the Page. Any later may throw off ViewState.
A totally different approach would be to use jQuery in the browser to manipulate the Divs, see the snippet below for one way to achieve this:
function moveOperationalToTop() {
var specialId = "divOperationalDetails";
var $main = $("#divMain");
var $divs = $main.find('div');
$main.empty();
$divs.each(function() {
if (this.id == specialId) $main.append($(this));
});
$divs.each(function() {
if (this.id != specialId) $main.append($(this));
});
}
#divOperationalDetails {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divMain">
<div id="divGeneralDetails">divGeneralDetails</div>
<div id="divLanguageDetails">divLanguageDetails</div>
<div id="divLinkDetails">divLinkDetails</div>
<div id="divOperationalDetails">divOperationalDetails</div>
</div>
<button onclick="moveOperationalToTop()">Move Operational to top</button>

Is it possible to get value from Summernote editor in asp.net web forms?

I'm using summernote editor, and I want to retrieve its content in code behind.
I tried to use the following ways , but it returns empty(null)
1-
default.aspx
<div class="summernote" id="txtTest" runat="server"></div>
Code behind:
string content= txtTest.InnerText;
2-
default.aspx
<div class="summernote" id="txtTest" ></div>
Code behind:
string name = Request.Form["txtTest"];
Any suggestions?

Here is My code Working Perfectly
<div class="form-group">
<asp:Label ID="lblSummernote" runat="server" Text="Image" AssociatedControlID="txtSummernote" CssClass="control-label col-md-3"></asp:Label>
<div class="col-md-8">
<asp:TextBox ID="txtSummernote" runat="server" TextMode="MultiLine" Rows="2"></asp:TextBox>
<asp:Label ID="lblSum" runat="server" Text="Summernote"></asp:Label>
</div>
</div>
JavaScript
<script src="/Content/SummerNote/summernote.js"></script>
<script>
$(function () {
// Set up your summernote instance
$("#<%= txtSummernote.ClientID %>").summernote();
focus: true
// When the summernote instance loses focus, update the content of your <textarea>
$("#<%= txtSummernote.ClientID %>").on('summernote.blur', function () {
$('#<%= txtSummernote.ClientID %>').html($('#<%= txtSummernote.ClientID %>').summernote('code'));
});
});
</script>
<script type="text/javascript">
function funcMyHtml() {
debugger;
document.getElementById("#<%= txtSummernote.ClientID %>").value = $('#<%= txtSummernote.ClientID %>').summernote('code');
}
</script>
C# Code behind
protected void btnSubmit_Click(object sender, EventArgs e)
{
lblSum.Text = txtSummernote.Text;
}

Have you considered using a <textarea> to handle this as opposed to a <div>? Usually they are a bit easier to use with respect to storing values (as they are designed to do so) :
<textarea id="txtTest" runat="server"></textarea>
One of the ways that you might handle this would be to register an event using Summernote's available API to set the HTML content for your <textarea> element whenever focus was lost (e.g. the onblur) :
<script>
$(function () {
// Set up your summernote instance
$("#txtTest").summernote();
// When the summernote instance loses focus, update the content of your <textarea>
$("#txtTest").on('summernote.blur', function () {
$('#txtTest').html($('#txtTest').summernote('code'));
});
});
</script>
Since you are likely going to be storing HTML content within the element, you'll likely want to ensure that .NET doesn't think you are trying to exploit it. You can do this by either explicitly setting this page to ignore that process by updating the ValidateRequest property of your page :
<%# Page ... ValidateRequest = "false" %>
Or you could try simply escaping the content that is being set :
$('#txtTest').html(escape($('#txtTest').summernote('code')));

Here is how I got it working.
ref it as a class
class="summernote"
$(document).ready(function () {
$('.summernote').summernote();
});

how can i pass parameters from javascript to hidden field in controls vb.net

i have a control that has two asp:HiddenField
<asp:HiddenField runat="server" ID="tabTitle" />
<asp:HiddenField runat="server" ID="tabMenu" />
this control load in a page called Alarms
the control on the alarms page look like this
<alarm:SubscriptionPanel ID="pnlSubscription" runat="server" />
what iam trying to do is passing value from pagealarms to the control hidden fields and there is a function at the control code behind that reads the hidden fields values
Question is how can i pass javascript values to hidden field in controls on page load
thanks in advance

You can use JQuery for it like this
Example :
$("input[type=hidden][id='<%=tabTitle.ClientID%>']").val("Hello World");
$("input[type=hidden][id='<%=tabMenu.ClientID%>']").val("Hello World");

If you are using ASP.NET 4.0 your best bet is to set the ClientIDMode property on those controls to static and then simply use javascript to populate the hidden elements using plain ol' document.getElementById(). Something like this:
<asp:HiddenField runat="server" ID="tabTitle" ClientIDMode="Static" />
//since the id mode in the hidden element is static;
//you should be able to do this safely:
document.getElementById('tabTitle').value = myvalue;
If you are not on ASP.NET 4.0; jQuery will help here since you can find an element using partial matching as HatSoft showed you in his answer but with a slight difference:
$("input[type=hidden][id*='tabTitle']").val("Hello World");
Note the id*= part. This gets all input elements whose ids contain the word tabTitle

Besides the approach commented by #Icarus, you could expose a JavaScript function from your control.
The problem you would face if you use ClientIDMode=Static in that, you would be restricted to add only one alarm:SubscriptionPanel control to your page
If you are planning to use only one control on each page, then the easiest approach is the one commented by #Icarus, however I would consider it as a temporal approach
This alternative encapsulates the logic where it really belongs, inside the custom control:
Output
ASCX
<div id="<%: this.ClientID %>">
<asp:HiddenField runat="server" ID="hidden1" Value="one" />
<asp:HiddenField runat="server" ID="hidden2" />
<asp:Button Text="Post me" runat="server" OnClick="postme_Click" />
<asp:Label runat="server" ID="lbl"></asp:Label>
<script type="text/javascript">
$(function () {
var myObj = {
setHidden1: function (myValue) {
$("#<%: this.hidden1.ClientID %>").val(myValue);
},
getHidden1: function () {
return $("#<%: this.hidden1.ClientID %>").val();
},
helloWorld: function () {
alert("hellow world");
}
};
$("#<%: this.ClientID %>").data("data", myObj);
});
</script>
</div>
ASCX code behind
protected void postme_Click(object sender, EventArgs e)
{
this.lbl.Text = "Posted: " + this.hidden1.Value;
}
ASPX
<script type="text/javascript">
$(function () {
$("#myPageButton").click(function () {
$("#<%: this.myControl.ClientID %>").data("data").setHidden1("plop");
$("#<%: this.myControl2.ClientID %>").data("data").setHidden1("plop2");
});
});
</script>
<input type="button" id="myPageButton" value="Set Hidden value" />
<uc1:EncapsulateJavaScriptLogicInUserControl ID="myControl"
runat="server" />
<uc1:EncapsulateJavaScriptLogicInUserControl ID="myControl2"
runat="server" />
<uc1:EncapsulateJavaScriptLogicInUserControl ID="myControl3"
runat="server" />
I just found another way, that looks even more object oriented, however, it requires you to use the Microsoft AJAX library.
ASCX
Change: $("#<%: this.ClientID %>").data("data", myObj);
Into: $.extend($get("<%: this.ClientID %>"), myObj);
ASPX
Change:
$("#<%: this.myControl.ClientID %>").data("data").setHidden1("plop");
$("#<%: this.myControl2.ClientID %>").data("data").setHidden1("plop2");
Into:
$get("<%: this.myControl.ClientID %>").setHidden1("plop");
$get("<%: this.myControl2.ClientID %>").setHidden1("plop2");
With this approach you remove the use of the .data jQuery function

images are not being displayed

I have done the following jquery function which is supposed to change dynamically images. The problem is that it is doing nothing as if there is no jquery function. The jquery function is being totally ignored without even enter in the function.
The coding I used is the one below;
<asp:Content ID="Content1" ContentPlaceHolderID="stylesPlaceHolder" runat="server">
<script type="text/javascript">
var index = 0;
var images = [
'child.jpg',
'girl.gif',
'sponsor.jpg'
];
$('Image1').attr('src', 'Resources/ChildrenImages/' + images[0]);
setInterval(change_image, 5000);
$(document).ready(function() {
index++;
if (index >= images.length) index = 0;
$('Image1').attr('src', 'Resources/ChildrenImages/' + images[index]);
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="contentPlaceHolder" runat="server">
<div>
<asp:Image ID="Image1" runat="server" Height="198px" Width="225px"/>
</div>
</asp:Content>
Any suggestions to what the problem could be?

The problem is that you're probably not selecting anything:
$('Image1')
should be
$('#Image1')
Please note also that there's a difference between the ID that you set and the rendered one (which is ClientID in ASP.net), so you should either use:
$('img[id$="Image1"]') //Select an image whose ID ends with 'Image1'
Or reference the ClientID property in your script.

Set the ClientIDMode property of the Image to Static, and as per the other answer the JQuery Identifier should start with a #, #Image1.

ASP.net c# basic question

Willing to admit I'm a complete .NET newbie, but I have extensive experience in classic ASP, which is making this quite tricky as the whole structure of .net is completely different.
I know I'm meant to use code behind, but for now I'm happy embedding it into the pages because:
Each page is going to be simple, so
there wont be too much mixing up
It's probably too much of a step to
do everything the 'right' way, I'd
rather step up to that slowly as I
get to grips with .net
So excusing my lack of code behind, on this page I am trying to get the ID returned by the querystring "mid" (Menu ID), and then display a different CSS class for the menu button we are currently on. Two menu classes, navButton and navButtonO (over).
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="admin.aspx.cs" Inherits="AlphaPack._Default"
title="Administration"
%>
<script language="C#" runat="server" >
protected int menuID;
protected void Page_Load(object sender, EventArgs e)
{
string menuIDdata = Page.Request.QueryString["mid"];
menuID = 0;
// Check the user is allowed here
if (!Roles.IsUserInRole("Admin"))
{
Response.Redirect("../default.aspx");
}
// Get the menu ID
if (int.TryParse(menuIDdata, out menuID))
{
menuID = int.Parse(menuIDdata);
}else{
menuID = 0;
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="mainHead" runat="server" >
<title>Administration</title>
<link rel="Stylesheet" href="../style/admin.css" />
</head>
<body>
<div class="topMenu">
<div class="navButton<%if(menuID == 0){ response.write("O") }%>">
Admin Home
</div>
<div class="navButton<%if(menuID == 1){ response.write("O") }%>">
User Manager
</div>
<div class="navButton<%if(menuID == 2){ response.write("O") }%>">
Products
</div>
</div>
<br /><br />
<div class="subMenu">
Products Categories
</div>
<br /><br />
Welcome to the Admin
</body>
</html>
Thanks for any help, don't pull any punches.

You should really put your code in the code behind page, there is no value to keeping it in the markup page even if it is simple. Second you are still thinking classic asp and using Response.Write. There is almost no reason to ever use Response.Write, if you are using it in a markup page then you are almost always doing it wrong. Turn your divs into Panel controls which will render out as divs. Then use a simple switch statement to set the CssClass property in the code behind page. You are using int.Parse you should only use this if you are guaranteed to get an int back from parsing the text. If it does not parse it will throw an exception, use int.TryParse instead.

Promote midID to a class variable.
protected int menuID;
protected void Page_Load(object sender, EventArgs e)
{
menuID = 0;
// Check the user is allowed here
if (!Roles.IsUserInRole("Admin"))
{
Response.Redirect("../default.aspx");
}
// Get the menu ID
menuID = int.Parse(Page.Request.QueryString["mid"]);
}

int menuId = 0;
Should be:
public int MenuId{get;set;}