I have a web application in C#. I need to be able to detect the user's browser width. How is this possible? I know that you can detect the browsers width using javascript/jquery....but how can I make this available serve-side (from within my C# code).
I would make a hiddenfield and fill it by using jQuery http://api.jquery.com/width/
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document
So you can choose window or document and fill a hiddenfield
<asp:HiddenField ID="hf" runat="Server" Value="" ClientIDMode="static" />
Please note that clientidmode is only for asp.net 4 and above
http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx
$("#<%= hf.ClientID %>").val($(window).width()); //asp.net 3.5 or lower
$("#hf").val($(window).width()); //asp.net 4 or higher
edit another option is to use jquery and do an ajax post to an *.ashx or *.asmx
That's impossible unless you combine client script functionality with server side code.
You could probably use JQuery to get browser width and set it to a hidden field.
http://api.jquery.com/width/
The thing is that you would not have that value on pageLoad, but only after page is rendered, JQuery initialized and postBack created.
Does that help?
The possible solution could be get screen size from javascript and call a method on server (using Jquery) that will save the details in the session.
Can you explain, for what purpose do you want use this value in the Server side code?
If you want to control placement of elements on the page etc. you could use Media Query that will resize your control according to the browser width.
On server side try these three properties
Request.Browser.ScreenCharactersHeight;
Request.Browser.ScreenCharactersWidth;
Request.Browser.ScreenPixelsWidth;
Related
I have a textarea tiny_mce such as
<textarea id="Textarea1" name="abc" rows="15" cols="80" style="width: 80%">
</textarea>
I want to set it in page load.
If i add runat server , this change to "pure textarea" that is not tiny_mce control.
How can i set content from c sharp?
Keep in mind that TinyMCE is a JavaScript-based editor that runs 100% in the client - there are no server side APIs to talk to TinyMCE.
The API to load content is a JavaScript API that runs in the browser:
https://www.tinymce.com/docs/api/tinymce/tinymce.editor/#setcontent
If you want to use this API you need to pass the data from the server to the browser and then call setContent() with that data. You can throw the data into a JavaScript variable, make an AJAX call to fetch the data as the page loads - you have several choices.
If you want to do this server side the only option is to place the HTML inside the <textarea> tag. Something like:
<textarea>
<p>text < text</p>
</textarea>
A major complication with this approach is that the HTML you place in the <textarea> needs to be escaped as in my example above. This is not a requirement when using the setContent() API.
UPDATE: If refreshing sometimes make this work you likely have a timing issue - you are likely trying to use TinyMCE APIs before the editor is initialized. If your goal is to load content when TinyMCE is loaded you can use something like this in the TinyMCE configuration:
setup: function (editor) {
editor.on('init', function () {
// Your AJAX call to get the content
this.setContent(variableWithTheContent);
});
}
This function will not get called before the editor is initialized so you can be sure that APIs like setContent() will work at that point.
i have a doubt that i can redirect the page , but can i put height and width there
response.redirect("Mypage.aspx");
for eg
response.redirect("Mypage.aspx",height="300px",width="200px");
i am doing this in asp.net, c#
You cannot open a page with this method, use javascript window.open instead.
ClientScript.RegisterStartupScript(this.Page.GetType(), "", "window.open('Mypage.aspx','mywindow','menubar=1,resizable=1,width=300,height=200');", true);
dude, you quite lost... I suggest you to understand the server side concept of web application first, otherwise the learning asp.net experience could be frustrating...
regarding your question, there is not such thing what you want to do, the display on the page is html format in the client side (applying style(for example) to html elements )
although you can map those html ui in the server side
I have a form in asp.net webpage which contains 2 drop down lists and a hyperlink + a button.
I want that if user changes an option is dropdowns to change navigate url.
I have done like so:
<asp:DropDownList ID="ddlPackages" AutoPostBack ="true" runat="server"
onselectedindexchanged="ddlPackages_SelectedIndexChanged"></asp:DropDownList>
and then I have the method defined.
The point is that I don't want to make a submit when I change the drop down. Can I do it using only aspx or I have to use javascript?
If I understand you correctly you want to change the href of the hyperlink based on the selected value of the dropdown. You can do this with javascript. Make sure you have AutoPostBack="false" and remove the OnSelectedIndexChanged attribute as well.
To do it using jQuery, use something like this:
<script type="text/javascript>
$(function(){
var $dropdown = $('#<%= ddlPackages.ClientId %>');
$dropdown.change(function(){
//Put logic to decide the link here based on the select value
var newPage = 'page' + $dropdown.val() + '.aspx';
$('#linkId').attr('href', newPage);
});
});
</script>
Edit:
In case you absolutely must have the logic for getting the new url based on the drop down value on the server side, you can turn the method into a Page Method and call it using ajax from the jQuery script above. But you can probably get away with creating the javascript dynamically in the aspx page instead.
I see two options:
1) Wrap the controls in an Update Panel (.NET 3+). Put AutoPostBack=true on the dropdownlist, and define a SelectedIndexChange event for it that changes the hyperlink control's Navigate URL property. When the user changes the dropdown, you're method will fire without the APPEARANCE of a form submission. Downside: there's a slight delay between the dropdown changing and the link changing. If your server is really, really slow, this delay could potentially cause problems (but this is probably unlikely).
2) Use custom JavaScript and do away with your .NET controls completely. This is what I would probably do, assuming you don't need to do anything else with these controls programatically. Your JavaScript function would monitor the dropdown for a SelectedINdexChange and adjust the href attribute of the anchor tag accordingly. Look into jQuery to speed up development if you aren't too familiar with plain JavaScript.
If the control is an ASP:DropDownList, you can use the AutoPostBack="True|False" property to prevent a postback
If you don't want to use the AutoPostBack you have to post the form using jQuery or Javascript
You can add an event on your drop down list onchange and add the code you need to post the form usin jQuery:
$('#formId').submit();
http://api.jquery.com/submit/
If you to want navigate to another Url add the below code at your DropDownList control (make sure AutoPostBack=false)
onchange="window.location.href='yourUrl'"
it would be better put that Javascript on a separate file anyway
I have created a small web application for display the selected employees data. In this application I coded a javascript. I have create a dropdownbox with username details along with them a checkbox is in front of every user. These username get from database. I want that manager dropdown the list and select the employee which he want to see the details. I did this with the help of javascript but the issue is that it successfully display the usernames in dropdown when it is saparate form from the master page but when i merge it with master page means make it content page of that master page it doesn't display the usernames in dropdown.
It display it blank. Where I m doing wrong. Any suggestions will be appreciated.
Thanks in advance.
As Pleun says the masterpage will change the HTML control ids rendered to the browser. There are a couple of ways round this If you are using asp.net 4 you can specify the client ids as follows:
<asp:Label Text="text" runat="server" ID="SomeID" ClientIDMode="Static" />
That will maintain the ID rendered to the browser.
If you are user a previous version of asp.net then i tend to user JQuery to get the controls using something like:
$("[id$='SomeId']")
The $= means ends with.
You can also user server markup mixed in with your javascript code e.g.
var control = document.getElementById("<% =SomeId.ClientId %>");
asp.net will then render out whatever client side id it assigns to the control with server id SomeId
The master page changes the names of the controls:
Have a look here:
http://www.asp.net/master-pages/tutorials/control-id-naming-in-content-pages-cs
(Not your question - but the functionality can also be done out of the box with ASP.NET without coding javascript yourself)
You need to give the client id of the controls in the function.
When you were using master page den the id of ur controls changes.
For eg:
The clientID of Checkbox chktest will be chktest without master page.But with masterpage the clientID changes to something like 'ctl00_ContentPlaceHolder1_chktest'
So the javascript will not detect if you use chktest when using master page and your functions wont work as expected.So use clientId of controls.
I have a pretty simple web-form set up in .Net where I am leveraging jQuery for some of the functionality. I am using the DOMWindow portion for part of the presentation layer.
There is a login form in a div that is set to display:none. When a user clicks a button on the page, it displays the login form. However the .Net button for the login form will not fire it's event when display is set to none. If i take this out, it fires fine. I have also tried using the visibility attribute, but no luck.
the div code is:
<div id="Login" style="display:none;">
The launching code is:
click here to login.<br />
the jQuery code is:
function LaunchLoginWindow() {
$(document).append("#Login");
$.openDOMWindow({
loader: 1,
loaderImagePath: 'animationProcessing.gif',
loaderHeight: 7,
loaderWidth: 8,
windowSourceID: '#Login'
});
}
Any help or explanation that anyone can offer is appreciated.
I noticed i had some code in there defining a client-side function on the Login div. I removed this so as to eliminate it as a possible issue.
I can see in your code that you are appending the div #Login but not setting its style property back to normal like block so. Set it back to block and i am sure it will work
try adding somthing like:
$(document).append("#Login").show();
OK, after playing around with this using firebug, I found the issue: When the jQuery plug-in DOMWindow creates its display layer, it appends to the HTML node of the DOM, which places the control outside the asp.net form tag. Therefore the button and actions associated with it via the DOMWindow are not recognized by .Net. So i edited the DOMWindow source file to append to the DOM form node rather then the html node.
The drawback is that the source has now been customized and will have to be QA'd thoroughly, especially if any further changes are made. But I hope to manage this effectively via commenting in the file.
Hope this helps anyone else who hits this issue.
pbr