I want to take a tag and replace with a #Html.textarea() razor html helper but it doesn't look as if JQuery can replace DOM elements with html helpers. How do I go about this?
using(#Html.BeginForm())
{
<a id="clickme">Edit</a>
<div>#Model.username</div>
}
How can I replace this div with #Html.Textarea ? JQuery could do it with div and input tags.
jQuery cannot replace a tag with #Html.TextArea() !
The TextArea helper method is a C# method, which gets executed when razor tries to render the view. This happens in your web server. jQuery is a client side library and anything you do with jQuery happens at client side, in your browser.
But all these helper methods ultimately generate some HTML for DOM elements. That means, you can use jQuery to manipulate visibility of that.
If you are trying to do something like an inline edit, you can use a script like this , to start with
First, render the text area along with your label div, but have it hidden initially. Also wrap the label,edit link and the hidden input inside a container div which we can use later to help with our jQuery selectors.
#using (#Html.BeginForm())
{
<div class="edit-item">
Edit
<div class="edit-label">#Model.FirstName</div>
#Html.TextAreaFor(a => a.FirstName,
new { style = "display:none;", #class = "edit-text" })
</div>
<div class="edit-item">
Edit
<div class="edit-label">#Model.UserName</div>
#Html.TextAreaFor(a => a.UserName,
new { style = "display:none;", #class = "edit-text" })
</div>
}
Now when the user clicks edit, you have to toggle the visibility of the label and hidden input and update the value of label after user done editing the value in the input element.
$(function () {
$("a[data-mode]").click(function (e) {
e.preventDefault();
var _this = $(this);
var c = _this.closest(".edit-item");
c.find(".edit-text").toggle();
c.find(".edit-label").toggle();
if (_this.attr("data-mode") === 'label') {
_this.attr("data-mode", 'edit');
_this.text("done");
} else if (_this.data("mode") === 'edit') {
c.find(".edit-label").text(c.find(".edit-text").val());
_this.text("edit");
_this.attr("data-mode", 'label');
}
});
});
This is a head start. You can optimize this code as needed.
Here is a working jsfiddle for your reference
I'm trying to add a named target to an Html.ActionLink:
#Html.ActionLink("Search Agents", "Index", "DSSAgent", null, new { target = "SearchiFrame", #style="color: Red;" })
but when I inspect the HTML, the target is _blank. (it picked up the red color though)
I tried this post, but it's a different variation of HTML.Action link and did not solve my issue.
These are allowed attributes for target:
<a target="_blank|_self|_parent|_top|framename">
Browser will ignore any other words with underscore but the 4 above.
If you're not using frames, you could add ViewBag.Title to your new tab page like:
#{
ViewBag.Title = "SearchiFrame";
}
I have a text box which I would like to include a £ sign whenever the user begins to type in a number.
For example: £32
How would I do this:
#Html.TextBox("amountFrom", "", new { #class = "form-control", #placeholder = "£" })
At the moment I just have a placeholder which puts a '£' sign in until the user types in an number. I would like the sign to appear immediately after the user starts typing.
A quick and dirty fix would be to use JavaScript or jQuery. When the text box changes, a £ is added to the front of whatever is already in the text box.
#Html.TextBox("amountFrom", "", new { #class = "form-control", #id="price" })
<script>
$(function() {
$('#price').on('input',function() {
var price = $('#price').val();
if (price.substring(0, 1) == '£')
{
price = price.substring(2);
}
$('#price').val('£ ' + price);
});
});
</script>
See this fiddle here : http://jsfiddle.net/49gdh95z/
A slightly better solution might be to use CSS that shows a background image of a pound sign, like StackOverflow uses to show a magnifying glass image on it's search box.
A fiddle for this example can be found here : http://jsfiddle.net/7pjm9v66/
Note that this second example adds the pound sign immediately after something is typed into the input box (and doesn't display beforehand). If you wanted to have the pound sign always display, then you can of course omit the JavaScript and move the CSS it applies directly to the #price element in the CSS.
I'm trying to add a font awesome icon into a kendo UI ASP.NET Menu. Unfortunately I can't find an example at Kendo on how to do it. The code is as follows:
#(Html.Kendo().Menu()
.Name("PreferencesMenu")
.HtmlAttributes(new { style = "width: 125px; height:900px; border:0px;" })
.Direction("down")
.Orientation(MenuOrientation.Vertical)
.Items(items =>
{
items.Add()
.Text("Account");
items.Add()
.Text("Notification")
.Items(children =>
{
children.Add().Text("Email");
});
items.Add()
.Text("Theme");
})
)
Does anyone know how I could add a font-awesome icon before the .Text("Account"); ?
This seemed to work for me with a sample project.
If you change the .Text("Account")
To this
.Text("<span class=\"fa fa-arrow-up\"></span> Account").Encoded(false)
That should then show an arrow up next to Account. (Obviously change the Font Awesome element to one that you want.
edit: I have added the following sample for you showing this working at multiple levels and adding the font's at the child level
#(Html.Kendo()
.Menu()
.Name("men")
.Items(item =>
{
item.Add()
.Text("<span class=\"glyphicons glyphicons-ok\"> </span>some item")
.Items(i =>
{
i.Add().Text("<span class=\"glyphicons glyphicons-plus\"></span> Hello").Encoded(false);
}
)
.Encoded(false);
item.Add()
.Text("<span class=\"glyphicons glyphicons-thumbs-up\"> </span>some item")
.Items(i =>
{
i.Add().Text("Hello");
})
.Encoded(false);
})
)
The reason for setting .Encoded(false) is so that the rendering engine just passes the data and assumes it is safe code to write out it is the equivalent of doing
#Html.Raw("<p> some html here</p>")
By setting it to true the system just treats the incoming text as a string and doesn't try to interpret the text and then apply any "html/javascript" recognition eg. <p>I'm a paragraph</p> if encoding is set to true would render out as <p>I'm a paragraph</p> if false would give you the I'm a paragraph as it's own paragraph and the markup would be applied to the page.
I'm very new to using HTML. I'm required to use it for a project and I have no education on it at all. Here's a break down of what I need to do. I need to have a graph of text boxes (I have added some features to some of them provided by webix) and I would like to have buttons that allow me to add or delete rows. I'm using a webix datatable as well. Here is my code for the button. At the moment, I just want to add a row to the top of the chart. Right now I just have the add rows button. Once I figure this out, I can easily do the remove.
input type='button' class="sample_button" value='add row' onclick= grida.addRowCss(1, getElementById('grida').style.color = "black");
Here is my datatable code.
webix.ready(function(){
grida = webix.ui({
container:"testA",
view:"datatable",
columns:[
{ id:"stage",editor:"text", header:"Stage", width:150},
{ id:"component",editor:"text", header:"Component",width:200},
{ id:"epic",editor:"text", header:"Epic" , width:200},
{ id:"engineering", editor:"text", header:"Engineering", width:200, suggest:numSuggest},
{ id:"design", editor:"text", header:"Design", width:200, suggest:numSuggest},
{ id:"research",editor:"text", header:"Research", width:200, suggest:numSuggest},
{ id:"notes", editor:"popup", header:"Notes", width:200}
],
editable:true,
autoheight:true,
autowidth:true,
data: [
{id: 1, stage:"Test 1", component:"Strategy", epic:"Design", engineering:2, design:0, research:0, notes: "This is a test"},
]
});
});
Everything is functional except for the button, which appears, but does nothing.
This is a link for the addRow webix function.
http://docs.webix.com/api__ui.datatable_addrowcss.html
Any and all help is appreciated, especially because I'm completely new to this.
Thanks
Edit1:
Thank you for the answer. So at the moment I make my button like this (before the script)
input type="button" value="Add row" onclick= 'add_row()'
And the table remains the same as before, however I've included the add_row function after the conclusion of the table. I'll include the last bit of the table for context
data: [
{id: 1, stage:"Test 1", component:"Strategy", epic:"Design", engineering:2, design:0, research:0, notes: "This is a test"}
]
});
function add_row(){
grida.add({
stage:"Test 2",
component:"Strategy",
epic:"Design",
engineering:2,
design:0,
research:0,
notes: "This is a test"
},2)
}
I've also tried
$$("grida").add(...)
to no avail. The button is on screen, but doesn't work. I imagine I'm doing something out of order, but I'm not sure what.
You need to use add not addRowCss as in your code snippet
http://docs.webix.com/api__link__ui.datatable_add.html
add adds the new row
addRowCss adds css class to the row
grida.add({ stage:"Test 2", component:"Second Component"})