I am still new to the coding field and am having a bit of trouble with a part, hoping someone can help me. I am working on a MVC page where i am trying to move text, the user inputs, around the page to a few pre-set spots and without having to refresh the page. Do i need a type of script for this? And if i do what would be best? Thanks for the help.
You can do it this way.
Enter Text here... <input id="testText" type="text" onKeyUp="javascript:showText($(this), event);"/>
<br/>
<br/>
<br/>
See it here... <span id="testTextSpan"></span>
Then, add this script...
<script type="text/javascript">
var showText = function (el, e) {
$('#testTextSpan').html(el.val());
};
<script>
See it here in this JSFiddle...
http://jsfiddle.net/ZEcNp/
Be sure to include JQuery libraries in your project, or reference the CDN.
If you'd like me to include an example with raw javascript, with no JQuery, I can also provide that for you.
I would recommend jQuery to do all that client-side.
You would just need an ID for each element you would use as the predefined spots, using either .appendTo, .insertAfter, .html, or something else depending on your exact needs.
Related
I want to add a PartialView multiple times by pressing a button.
<div id="FilterRows">
#{Html.RenderAction("_FilterRow");}
</div>
<button id="newRow" type="button"
class="btn btn-sm btn-default"
style="width: 50px">+</button>
This piece of code works properly. But now i want to append the div FilterRows with another PartialView of _FilterRow at clicking on the button.
This is how it looks today:
Something like:
$(document).ready(function() {
$("#newRow").click(function() {
$("#Exec").append("<br>", #{Html.RenderAction("_FilterRow");} {
});
});
});
Is unfortunately not working. Any Ideas?
If you add an action which returns the partial rendered as a partial (ie. return PartialView("myView", model); then you can load using jQuery:
# Create a new element to contain...
var el = $('<div></div>');
$('#parent').append(el);
# ...the new content
el.load('#Url.Action("action", "controller"');
(This means running the JS in the razor view to get the correct URL generation. If most of the JS is in its own file, pass the URL from a little JS in the Razor file just for things like URLs.)
As long as your script is in the page (and not in an external .js file) you can use Razor inside js (although feedback directly from MicroSoft indicates that this is "unexpected", it works fine).
Have a look at the rendered html to see what's wrong.
In this case you need quotes (") around the render action:
$("#FilterRows").append("#{Html.RenderAction("_FilterRow");}");
This assumes a number of potential issues:
the 'RenderAction' can't have any newlines in the output
the 'RenderAction' can't have any quotes in the output (either use ' on the append and " inside the render or the other-way-around)
the action to be rendered cannot have any row-specific parameters (which appears to be ok in this case to add a new blank row)
the script must be in a .cshtml file (though you can get around this by setting a global/namespace'd variable in the .cshtml and have the actual code in a .js file)
you need to use the correct combination of #{}/#() and render/tostring
You might be better off with #Html.RenderPartial if you just want to render some html and don't need an action.
An alternative, perhaps more friendly, mechanism would be to have the blank-row already on the page (perhaps hidden) and use .clone().
I try to retrieve data from a ckeditor but failed. My code is as follow
#model Test.ViewModel.MyViewModel
<textarea name="my-textarea" asp-for="content" class="form-control form-gap" placeholder="Main Content"></textarea>
<script type="text/javascript"> CKEDITOR.replace('my-textarea'); </script>
I bind the textarea to an element called content in MyViewModel. If I don't use ckeditor, I am able to get the content in textarea in my action. However, if I use ckeditor, I am not able to do so. I saw some articles talking about using javascript, but I would like to use C# itself. Can anyone help to see what is wrong and what I should do. Thank you.
So, this is untested and I've always used the ckeditor with JavaScript, but searching on nuget I found this package https://www.nuget.org/packages/CKeditor.Mvc that I think you can use. In
http://forums.asp.net/t/2012709.aspx?How+to+Implement+a+CKeditor+in+MVC, someone elaborates on how it can be used.
//Notice the attribute (AllowHtml)
public class BlogEntry {
[AllowHtml]
public string BlogText {get;set;}
}
Add this to your view
#model MyProject.ViewModels.BlogEntry
And, of course, have your input
<input type="text" id="BlogText" name="BlogText" />
I need to get the value of an input and pass that to a select2 to get suggestions. How can I call a JavaScript function from a URL action
#* Name *#
<input id="Name" name="AccountName" type="text" value="" autocomplete="off" data-url="#Url.Action("*********", "******")" data-urlonselect="#Url.Action("*****", "*******")">
#* Group / HQ *#
#Html.Select2Ajax("newGroup", Url.Action("******", "****", new { valuefromInput = MyFunction(); }))
I have never used Select2, so there may be some functionality in there that I am unaware of. With that said, the Url.Action() is question is a standard part of the ASP.NET MC framework and I feel relatively comfortable with answering based on that.
Url.Action is a sever side razor directive. That means that all the processing happens on the webserver at the time of the request. It is not, nor can it be, aware of the JavaScript that may execute in the future.
My recommendation would be to create a hidden input, or a non-visible div, and store the output of Url.Action in that container, using a recognizable placeholder for your input value, say "-12." Then, in your javascript that is responding to the changes to the input, you can dynamically replace the place holder with its actual value and set that property accordingly on the select box. You may or may not need to re-initialize your Select2 drop down in with each call.
At least, that is why I would try. Hope this helps! =)
I am working on a webforms project using c#/aspx/jquery. I'm not sure where to handle my Onclick. Both options (doing it in C# or jquery) seem feasible. Which would be better practice?
Here is the scenario:
I want to build a checkbox which will toggle a textbox's textmode, altering it between Password and SingleLine.
Currently, I have this following code for my markup since I am currently handling it in C#:
<asp:Checkbox ID="CheckBox1" OnCheckedChanged="CheckBox1_OnCheckedChanged"/>
The code:
protected virtual void OnCheckedChange(EventArgs e)
{
If (CheckBox1.TextMode == TextMode.Password)
CheckBox1.TextMode = TextMode.SingleLine;
else
CheckBox1.TextMode = TextMode.Password;
}
The use case of this is: A user is entering his password. On the same page, he may choose to keep the password hidden or not by checking the checkbox.
Which would be better practice?
What is your functional requirement?
Setting this in C# on the asp.net code behind, you will need a post-back to make it work. This means the page will refresh and the text box will change.
On the client (JS/JQuery) the page will not refresh.
Now you evaluate the work required vs the quality you need. (If you want a nice user experience and are ok with writing JS put it in JS, if you're strapped for time and are ok with the refresh then do it on asp.net).
I'm trying to answer your question in general sense about HOW such a decision (in my humble opinion) should be made. Realistically this is very simple to implement in javascript and your should do it there.
Now for the code (I assume you know how to put it in asp.net code behind so I'm going to write the JS approach):
Html:
My Password: <input type="password" id="mytext" /> <br />
Hide Chars : <input id="passChk" type="checkbox" checked="true" />
Javascript:
$(function() {
$("#passChk").change(function(){
if(this.checked) {
$("#mytext").attr("type","password");
} else {
$("#mytext").attr("type","text");
}
});
});
See it running here: http://jsfiddle.net/rC5NW/2/
After trying to implement the accepted answer, I realized that some browsers (I used Google Chrome) does not allow changing the type attribute. There is a way to bypass this but I don't think it is worth it for my purposes:
Therefore, It might be better to just use C#.
Relevant Questions
Does javascript forbid changing the input type from password or to password?
change type of input field with jQuery
I want to display a background text in the textbox.
ex: The Title textbox in the stackoverflow Ask question page.
Needs: If i enter some text inside the textbox it should disappear.
Geetha.
A good link is http://attardi.org/labels as referenced here https://stackoverflow.com/questions/781473/how-to-create-a-label-inside-an-input-element
You need to use javascript for the same.
Use following two functions in javascript and it is done.
function clearDefault(obj,val)
{
objInput=document.getElementById(obj);
if(objInput.value==val)
{
objInput.value="";
}
}
function setDefault(obj,val)
{
objInput=document.getElementById(obj);
if(objInput.value=="")
{
objInput.value=val;
}
}
You need to apply it on your code by using two javascript events as follow.
<input name="email" type="text" class="textbox" id="email"
value="Email" size="12" onfocus="clearDefault('email','Email');"
onblur="setDefault('email','Email');"/>
So when you control get focus it the default text will be cleared.
Ant That's it.
Hope this will help!
Well, since you put jquery as a tag for the question, I assume you're already using jquery for your project. In that case, here's a neat plugin that does the trick: Labelify.
Good luck!