KeyUp event with Html.TextBoxFor - asp.net

I need help in using keyup with #Html.TextBoxFor. I have a html code which creates a new row of texboxes on each button click. Now i want to convert the text entered into that textbox into upper case while the user enters. Thought of using OnKeyUp event, but need help in syntax with #Html.TextBoxFor . I'm new to .Net. Here's my html code line
<div>#Html.TextBoxFor(x =>x.ItemName[0].SerialNumber, new {autocomplete = "off"}) </div>
Help me with the JS also please

You can add OnKeyUp attribute to your textbox:
#Html.TextBoxFor(x =>x.ItemName[0].SerialNumber, new {autocomplete = "off", onkeyup="ToUpper(this);"})
On the script side, you need to have ToUpper method also like this:
<script>
function ToUpper(obj)
{
if (obj.value!="")
{
obj.value = obj.value.toUpperCase();
}
}
</script>

Related

asp.net mvc get value from Html.textbox()

I want to know is it possible to find out the value of html.textbox inside a view.
if i have #Html.TextBox("textdata") can I read data from that textbox like in my paragraph
my value is: **
So i need this becouse i want that user write a number inside a textbox which i will take as an param to my function like:
#Html.ActionLink("click me", "actionname", "controller", new { param = textbox value}, "")
You need to use javascript for this. Instead of using an action link a better way to achieve this would be to use a form:
#using (Html.BeginForm("actionname", "controller", FormMethod.Get))
{
#Html.TextBox("textdata")
<input type="submit" value="click me" />
}
This way the value entered by the user in the textbox will be automatically sent to the server when he submits the form.
If you still want to do this using javascript (not recommended) here's how you could proceed with jQuery. Subscribe for the click event of the link and fetch the value from the text field and append it to the url:
$(function() {
$('#id_of_your_link').click(function() {
var value = $('#textdata').val();
$(this).attr('href', function() {
return this.href += '?param=' + encodeURIComponent(value);
});
});
});

Getting JS Error (for - event.srcElement.id) in WebForm

I am building a dynamic user control (ascx) which contains a placeholder. Inside the placeholder, there will be n tables. Inside each table, in one of the cells i have the link button as below.
HyperLink lnkButton = new HyperLink();
lnkButton.ID = "lnkButton_" + ID.ToString();
lnkButton.Text = tstText;
lnkButton.NavigateUrl = "javascript:JS_Click();";
I have to call a JS function on the link button click (no postback).
In the JS function, i have to get the id of the control that invoked that JS function. In this case, it will be link button. I am writing the below code in the JS Function:
var ctrl = event.srcElement.id;
but i am getting 'Object Required' error in javaScript.
Few other things: This user control will be loaded in default.aspx page and the JS Function i am writing in default.aspx.
I am not sure why this is not working. I am using IE6/7, VS 2005. Is there any other function or way available to get the srcElement.id. Please help.
Try passing this along when you invoke the method
lnkButton.NavigateUrl = "javascript:JS_Click(this);";
then you can write this in your JS_Click event
function JS_Click(obj)
{
alert("Now I have my object " + obj.id);
}
Another option would be to use jQuery and wire up to the click event on your link buttons.
Add a CssClass attribute to the LinkButton's you are creating:
HyperLink lnkButton = new HyperLink();
lnkButton.ID = "lnkButton_" + ID.ToString();
lnkButton.Text = tstText;
lnkButton.CssClass = "linkButton";
Then write the follwoing JS/ JQuery in your ASPX page:
$(document).ready(function()
{
$('.linkButton', '#userControlID').click(function(e)
{
alert('You clicked linkbutton with ID ' + e.target.id);
});
});
In the above example each link button has class="linkButton" and they are contained within your usercontrol with ID="userControlID".

How to check the Condition here

<script type="text/javascript">
$('#TextEdit').click(function () {
$('#ObnAdd').val('Save');
});
</script>
<% using (Html.BeginForm("Create", "ObnTextComponents",FormMethod.Post,new {#id = "TheForm"}))
{%>
I need to check the condition if my ObnAdd Button text is Add need to go Create ActionResult
if Button text is Save I need to go Save ActionResult..
how to check this Condition in BeginForm?
thanks
From your comments it seems that it's better to check for the value of the button on the Controller side. Because you can't change your aspx code after the page loads.
So, in your controller you should have something like this (make sure your ObnAdd has name=ObnAdd):
public ActionResult SaveCreate(FormCollection form, string ObnAdd)
{
if (ObnAdd == "Save")
{
//Do save
}
else if (ObnAdd == "Create")
{
//Do create
}
//here return RedirectToAction or whatever
return RedirectToAction("Index");
}
And your HTML:
<% using (Html.BeginForm("SaveCreate", "ObnTextComponents",FormMethod.Post,new {#id = "TheForm"}))
{%>
The ASP executes server-side before pageload and has no access to the dom. Whereas the javascript executes client-side during and after pageload.
Since changing the button text is done in javascript (after all the asp runs), the button will always have the same value during pageload, so the branch is unnecessary. Also note that the asp can't access the dom of the page it's creating to test for such things. You would need to either include a library that forms the dom tree for you or use standard text operators to check the value you're looking for (like a regex).
A simple solution to what I think you're doing here would be to maintain a hidden input on the form that is also updated when you update the button. Then you can have the button submit and the page handling the form can make the necessary decisions with all information available.

Use Javascript to copy Text from Label

Label1 (asp.net control) is located inside Panel1 of my webpage and I have a button called bt. What is the Javascript to copy the Text from Label1 to the clipboard?
#artlung, I placed the below code just outside of my form but inside the body. The last line of code I placed inside Panel1 of my form. Anything wrong with this code because nothing happens when I click the Copy to Clipboard button.
<script language="JavaScript">
var clip = new ZeroClipboard.Client();
clip.addEventListener( 'mouseDown', function(client) {
// set text to copy here
clip.setText( document.getElementById('form1.Label1').value );
// alert("mouse down");
} );
clip.glue( 'd_clip_button' );
</script>
The next line of code is above the script tags but inside Panel1 in my form
<div id="d_clip_button">Copy To Clipboard</div>
I achieved this with javascript. I picked up on the fact that javascript was renaming the label from Label1 to MainContent_Label1. Then I also through debugging saw that what I wanted to grab from the variable was the innerText property. Problem Solved!
I also had the function test for an empty string and then return a confirmation alert to the user when they either copied successfully to the clipboard or when the label was empty with nothing to copy. This is all client-side.
<asp:Label ID="Label1" runat="server" Text="Copy This!!!"></asp:Label>
<script type="text/javascript">
function ClipBoardTest() {
var txt = document.getElementById('MainContent_Label1');
window.clipboardData.setData("Text", txt.innerText);
if(!txt){
alert("Nothing to Copy");
}
else {
alert("Copy to ClipBoard Successful!");
}
}
</script>
<input type="button" id='bt' onclick="ClipBoardTest();" value="Copy" />
Use the zeroclipboard library.
There is also a way to copy text from label without using any external libraries.
copyStrFunction = (copyStr) => {
const el = document.createElement('textarea'); // Create a <textarea> element
el.value = copyStr; // Set its value to the string that you want copied
el.setAttribute('readonly', ''); // Make it readonly to be tamper-proof
el.style.position = 'absolute';
el.style.left = '-9999px'; // Move outside the screen to make it invisible
document.body.appendChild(el); // Append the <textarea> element to the HTML document
el.select(); // Select the <textarea> content
document.execCommand('copy'); // Copy - only works as a result of a user action (e.g. click events)
document.body.removeChild(el); // Remove the <textarea> element
}
Call the copyStrFunction() onclick of any button and the string.
You can also modify the above function to find the label by Id and then copying the text from it.

How to get the selected Date from the calendar control?

Hai ,
I am creating a DatetimePicker User control. I just want to know how to get the selected date of the calendar (asp.net control) control using jQuery. I used this code, but it's wrong.
$(document).ready(function() {
$(".UserCalender").click(function () {
var a = $('.CalenderDiv:selected').text();
alert(a);
});
});
What's wrong with this?
You won't be able to do like this. There is no :selected selector for an anchor tag. It works only for <option> elements. What you can do is to attach an event hanlder to each anchor ag and use the text() method. Something like
$("#Calendar1 a").click(function(){
alert ( $(this).text() );
return false;
});
But why do you want to do this. By doing like this you will get only the text inside the anchor tag and not the whole date. To get the whole date you will have to perform additional work.
If you want to manipulate the selected text then you can use any datepicker plugin from jQuery.
See jQuery UI Datepicker

Resources