I need to scan through a set of DIV collection and get the DIV IDs accordingly. Here's a piece of DIV collection in HTML.
<div id="rack12" rel="12" class="">
<span class="empty"></span>
<input type="hidden" id="GUID" value="">
</div>
<div id="rack13" rel="13" class="">
<span class="full"></span>
<div id="d92eec4f-2674-e311-9422-00155d04941f" rel="430.00 12.00 5 d92eec4f-2674-e311-9422-00155d04941f" class="selectedEquipment" style="height:105px;">
<p>IBM SPARC 5000u | 430.00W | 12.00Kg | 5RU </p>
</div>
<input type="hidden" id="GUID" value="d92eec4f-2674-e311-9422-00155d04941f">
</div>
So, for example, I need to find out which DIV ID (rack12 or rack13) contains this GUID d92eec4f-2674-e311-9422-00155d04941f. After that I need to do some logic and update the properties of that GUID in C# codebehind. By the way, these DIVs are generated from C# dynamically.
I have some difficulties in using javascript inside C#. Can advise me if there's an easy way to implement?
Add runat="server" attribute to the DIVs ("rack12" and "rack13"). Then you could manipulate them in code behind using ID or ClientID as a server control.
I think you can use Jquery , I havent understood exactly what you need, Still here is an example
$('div').each(function(e){
var obj = $(this);
obj.find("input").each(function(e){
var inputobj = $(this);
alert(inputobj.val()); //Here You will have input obj , U can use your code part here
});
});
Here is a Fiddle
http://jsfiddle.net/AmarnathRShenoy/ykPg4/1/
Related
how are you guys?
i have asp.net webform its for adding news in the news content i would like to use summernote http://summernote.org/ Super Simple WYSIWYG editor. as a WYSIWYG editor so could some one please help me to save the data from this editor
this is my code
<div class="form-body">
<div class="form-group last">
<label class="control-label col-md-2">News Content</label>
<div class="col-md-10">
<div name="summernote" id="summernote_1"> </div>
<asp:label runat="server" text="Label" ID="news_con" ></asp:label>
</div>
</div>
</div>
i can't get the text value from the summernote
by this code
news_con.Text = Request.Form["summernote_1"];
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')));
I have div control which runs on server
<div id="report" runat="server" ></div>
I'm appending some content to the above div using jquery at run time. Now i want to access the innerHtml of the above div.
example:
<div id="report" runat="server" >
<div class="someclass">some Text1</div>
<div class="someclass">some Text2</div>
<div class="someclass">some Text3</div>
</div>
expected output is(following HTML in a string format):
<div class="someclass">some Text1</div>
<div class="someclass">some Text2</div>
<div class="someclass">some Text3</div>
so far i tried the following two methods but no luck
ContentPlaceHolder myContent = (ContentPlaceHolder)this.Master.FindControl("contentPlaceHolder");
Control cc= myContent.FindControl("report");
and
string HTMLString=report.InnerHtml;
Form input elements inside a form element posted to server.
All other content is static and not posted to server.
It's fundamental rule of HTTP, you can see details from here.
So you cannot get the report.InnerHtml.
You have two option, while preparing your div's content, write the same content inside a hidden field. And at server side get the hidden field's value.
<input type="hidden" id="hdnDivContents" runat="server">
and set the value using jquery or javascript.
$('#<% hdnDivContents.ClientID %>').val($("#<% report.ClientID %>").val());
and get the value in code behind
string HTMLString=hdnDivContents.Value;
Or make an AJAX call while preparing your content to get it at server side.
So I've got this popup in my site with a list of checkboxes for filtering purposes. The List can be anywhere from a couple items to a hundred items. Now say the user wants to only select check boxes with the word "create" in it's label. Going through a hundred check boxes looking for creates is unruly and no ones going to want to do it. What I'm thinking is implementing a text box input at the bottom of the popup where the user can input a word, hit select and in the list of checkboxes, only the items that contain that word will be checked.
The first idea that came to mind to do this is use jquery have the button relate to a controller function which will reassess the view model based on that users string. But I'm not if that the best solution. Is there a way to do this in just the view?
Try something like this:
Your HTML:
<div class="box">
<input type="checkbox" name="check">
<label>Create</label>
</div>
<div class="box">
<input type="checkbox" name="check">
<label>Other value</label>
</div>
<div class="box">
<input type="checkbox" name="check">
<label>Create user</label>
</div>
Your JQuery code:
$(function(){
$('.box').each(function(){
var box = $(this);
if ($('label', box).html().toLowerCase().indexOf("create") > 0) {
$('input[type=checkbox]', box).attr('checked', 'checked');
}
else $('input[type=checkbox]', box).removeAttr('checked');
});
});
This is a better solution suggested by #AnoopJoshi
$("label:contains('Create')").closest(".box").find("input[type=checkbox]").prop("checked", true);
I hope this help!
How do you pass a parameter from C# into the value part of instead of hard coding it with different values.
<div class="property-container">
<input class="progress-value" type="hidden" value="17" />
<div class="property-title">Test</div>
<div class="property-progress"></div>
</div>
<div class="property-container">
<input class="progress-value" type="hidden" value="32" />
<div class="property-title">Test 2</div>
<div class="property-progress"></div>
</div>
<div class="property-container">
<input class="progress-value" type="hidden" value="24" />
<div class="property-title">Test 3</div>
<div class="property-progress"></div>
</div>
<script type="text/javascript" >/
$(function () {
// loop through each 'container'
$(".property-container").each(function () {
// get the value that was rendered from the model
var progress = parseInt($(this).children(".progress-value").val());
// create the progress bar with the value
$(this).children(".property-progress").progressbar({ value: progress });
});
});
</script>
From your comments
<input class="progress-value" type="hidden" value="17" id="Test" />
In c# I tried, Test.Value = "20";
You should have a runat="server" if you want to access the hidden field in your codebehind.
<input class="progress-value" runat="server" type="hidden" value="17" id="Test" />
//& then in C# set it like this..
Test.Value = "20";
In jQuery, get the value of the hidden field
$('.progress-value').val()
You can use this :
$(this).children(".property-progress").progressbar({ value: '<%= MyValue() %>'});
And in the c# create a property:
Public string MyValue
{
get;set;
}
Nb
If you intend to update the progressbar according to server activity - i'd suggest you to google signalR.
You just have to remember where the variables are set, and where the code is run. C# runs on the server, so you can't set javascript properties directly, rather, you need to set up your HTML template so that when it is interpolated by the server the correct values are sent to the client.
In other words, you won't be able to set the progress bar width on the server, b/c the server will only be able to set the initial value of the progress bar. It will be up to the client to increment the value. Otherwise, you'd need to constantly be posting the page back to the server, which isn't what you want at all.
The easiest way to get the progress data from the server to the client is by setting up a web service that returns JSON, and calling it using jquery.
Here are some resources on how to do that:
Create and Call a Simple Web Service in ASP.NET
Understanding ASP.NET AJAX Web Services
ASP.net progress bar updated via jQuery ajax during async operation
You should be able to decorate a method on your asp.net class with [WebMethod] to make it callable via jQuery.
It really depends on what technology you're using to output code. If you're using Razor, it would be:
<input value="#ObjectName.Value">
I have bunch of HTML code I am using to make rounded edge boxes on my controls. Is there a way to take this code and turn it into some kind of control or something so I do not have to keep pasting 10 lines of HTML code around everything I do?
<div id="BottomBody">
<div class="box1024" >
<div class="content1024">
<div class="top1024"></div>
<h1>My Header Information</h1>
<hr />
<p>Some text for everyone!</p>
</div>
<div class="bottom1024">
<div></div>
</div>
</div>
</div>
One additional thing to note, the number HTML tags used inside the inner most DIV will change depending on where I use it in my site. So in some cases I will only have 1 tag and 1 tag but in other cases I could have 1 tag, 1 tag, 3 tags, and a HTML table. How can I make that work?
Yes, you're thinking of a UserControl. Extract the relevant HTML out, paste it into a UserControl .ascx template.
Now in your case, you'll probably want the text to be customizable, am I right? So you'll need to replace the <h1> through </p> bit with an ASP.NET label. The resulting .ascx HTML (not counting the #Control directive) will look something like:
<div id="BottomBody">
<div class="box1024" >
<div class="content1024">
<div class="top1024"></div>
<asp:Label runat="Server" id="label1" />
</div>
<div class="bottom1024">
<div></div>
</div>
</div>
</div>
Alternatively, you could do two labels -- one for the header, one for the main text. Or even just have the header be runat="Server" itself.
Next, you'll write a little bit of code in the .ascx code-behind file to expose the label's (or labels', as the case may be) Text property. This would probably look something like:
public string Text
{
get { return label1.Text; }
set { label1.Text = value; }
}
If you're in an ASP.NET MVC world, use your Model data instead of a label, and pass in the desired display text string as the model data.
Edit
Addressing the update to the question:
One additional thing to note, the
number HTML tags used inside the inner
most DIV will change depending on
where I use it in my site. So in some
cases I will only have 1 tag and 1
tag but in other cases I could have 1
tag, 1
tag, 3 tags, and a HTML table. How can
I make that work?
The exact same technique, assuming that the content you're referring to is what's within <div class="content1024">. The Text property of a label can contain any desired arbitrary HTML, and of course you can pass any arbitrary amount of HTML as a string to the Model if you're using MVC.
Another left field approach - create a user control but use jQuery to round the corners for you:
<div class="roundcorner">
<h1>My Header Information</h1>
<hr />
<asp:Label runat="Server" id="label1" />
</div>
Issue the following in javascript:
$(document).ready(function(){
$('div.roundedcorner').corner();
});
This eliminates all your extra div's and you can still have a user control that you use at will on the server.
(I know I'm going to get in trouble for this from someone)
If its just static content you can just put it in a separate file and INCLUDE it
<!--#INCLUDE VIRTUAL="/_includes/i_yourfile.htm" -->
(File name, extension and location are arbitrary)