I am using asp.net core razor engine. I am trying to set text inside of my text area. I looked on stack and followed previous answers, but nothing seems to be working.
Here is my code
<h1>#TempData["quote"]</h1>// this prints out the correct value
#model login.Models.Quotes
<h1>Edit Your Quote</h1>
#using(Html.BeginForm("EditQuote","Home"))
{
<p>
<label>Your Quote</label>
#Html.TextAreaFor(d=>d.quotes, new { #Value = #TempData["quote"]})
#Html.ValidationMessageFor(d => d.quotes)
</p>
<input type="submit" name="submit" value="Edit my quote!"/>
}
You don't use attributes to set the value in the view - you set the value in the controller through the model property and bind that property to the text box.
In your controller:
model.quotes = TempData["quote"];
In your view:
#Html.TextAreaFor(model=>model.quotes)
Seems like maybe your lamda expression is not being evaluated properly.
Try:
#Html.TextAreaFor(d => d.quotes, new { #Value = #TempData["quote"]})
Related
I have here a html text box. It has an ng-model and an initial value on it. The problem is the initial value is not shown when there's an ng-model present and I need both of the ng-model and the initial value for the textbox.
HTML:
<input type="text"
ng-model="selPcode"
name="missionId"
value="123">
JS:
$scope.setPcode = function(site){
$scope.selPcode = site.id};
Can anyone suggest a way how to make the value show in the text box and keep the ng-model present? Thanks in advance.
Set an initial value to the ng-model on your controller's scope. Something like $scope.selPcode = 123. Set it to what your value would have been. That way, it'll display initially and then you can also change it.
Well, Angular works with two-way data binding, so why not simply set the initial value in your controller?
$scope.selPcode = 123;
This way, you'll see it in your input.
Use ng-init without having to touch the controller and keep the code in the HTML readable, like you would with the value= syntax for the standard use of the Inputbox. Plunkr here
Example Here (Controller As Syntax):
<div ng-controller="myController as my">
<h1>Hello {{my.name}}</h1>
<input type="text"
ng-init="my.selPcode=123"
ng-model="my.selPcode"
name="missionId">
</div>
Controller:
myApp.controller('myController', function($scope) {
this.name = "Gene";
});
I am unable to set a default value to ng-model="searchText". Here is the code I am using
<input ng-model="searchText" value="can you see me" />
Can anyone help me with this?
1st Solution: is to simply init the searchText in the controller.
App.controller('mainController',['$scope', function($scope) {
$scope.searchText = "can you see me";
}]);
2nd Solution: is to use ng-init insteat of value
<input ng-model="searchText" ng-init="searchText ='can you see me'"></input>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
<div >
<input ng-model="searchText" type="text" ng-init="searchText='your text'"/>
</div>
</div>
you can use ng-init
Try this following code:
<input ng-model="searchText" ></input>
In your controller
$scope.searchText = "your default value";
Edit : If you don't want to initialize the default value in controller just do
<input value="your default value" ></input>
Do not use ng-init on your input field to set the value. That's not required.
Just set the scope of your model to the value you would like. If it's simply placeholder text, it would be better to use the html5 placeholder attribute on your input element.
<input type="text" ng-model="someText" placeholder="Initial Text">
This will give you some text in the input field without the need to add anything to the controller scope.
If you want the text as a value you can pass without filling in the input field than you would need to set that in your controller.
$scope.someText = "Some Text";
You can set default value in the controller. Like this:
app.controller('myCtrl', function($scope){
$scope.searchText = "Some default value";
});
And keep value attribute blank on input tag.
For later angular versions:
In your ts file:
export class SearchComponent implements OnInit {
search: string;
ngOnInit(): void {
this.search = "Some default value";
}
}
html file contains:
<input [(ngModel)]="searchText">
<input type="text" name="search" id="search" style="border-style:ridge;" />
Thats the line of Html I'd like to have it as a html helper. I tried:
#Html.TextBox(" ", "",new { id="search", name="search", style="border-style:ridge;"})
but it won't post back for that text box when i press enter. It works fine for the input tag.
That would just be a regular box:
#Html.TextBox("search", null, new { style = "border-style: ridge;" })
Or assuming your model has a search property, it would be:
#Html.TextBoxFor(x => x.search, new { style = "border-style: ridge;" })
Both of these produce the same HTML. Unless there's any funny stuff going on, both the id and name of the textbox will be search.
I have a project written in C# MVC using Razor templates. On one of my pages I have several input fields that contain numeric values. The Razor code that sets the values of these input fields looks like this:
#Html.Editor(Model.DesignParams[i].ParamId,
new {
htmlAttributes = new
{
#Value = Model.DesignParams[i].DefaultValue,
#class = "form-control text-right",
#type = "text",
id = "_" + Model.DesignParams[i].ParamId,
uomid = Model.DesignParams[i].UOMId,
measureid = Model.DesignParams[i].MeasureId
}
})
The above code works fine using FireFox and Chrome and generates an input field that looks like this:
<input type="text" uomid="MBH" name="HeatOfRejection" measureid="HeatLoad"
id="_HeatOfRejection" class="form-control text-right text-box single-line"
value="5000.0">
But the same Razor code, identical #Model values viewed with IE generates this:
<input Value="5000" class="form-control text-right text-box single-line"
id="_HeatOfRejection" measureid="HeatLoad" name="HeatOfRejection"
type="text" uomid="MBH" value="" />
As you can see, there is a difference between the value= attribute generated for IE in that the value attribute that gets my actual value begins with an uppercase 'V' and the lowercase value is an empty string. I'm stumped on this...
Can anyone tell me why this is happening and possibly how to handle it?
This difference effects jQuery's ability to return the input's value with:
var value = $(inputfield).attr("value");
Maybe .val() will retrieve the input field value, but this is going to require a rewrite of core jQuery code that supports this page and others, so I wanted to ask if anyone can tell me why this 'Value=' gets created for IE only and if there is a way of overcoming the problem.
Update:
Changing #Value to #value (or just value) results in an empty value attribute in Firefox and IE:
<input type="text" value="" uomid="MBH" name="HeatOfRejection" measureid="HeatLoad"
id="_HeatOfRejection" class="form-control text-right text-box single-line">
As StuartLC points out, you are trying to get Html.Editor to do something it wasn't designed to do.
What happens when you pass a #value or #Value key to the htmlAttributes is that the rendering engine produces an attribute with that name in addition to the value attribute it's already generating:
<input type="text" name="n" value="something" value="somethingElse" />
or
<input type="text" name="n" value="something" Value="somethingElse" />
In both cases, you're giving the browser something bogus, so it can't be expected to exhibit predictable behavior.
As alluded above, Html.Editor has functionality to generate the value attribute based on the expression argument you pass to it. The problem is that you are using that incorrectly as well. The first argument to Html.Editor() needs to be an expression indicating the model property that the editor should be bound to. (e.g. the string value "DesignParams[0].ParamId") Nowadays, the preferred practice is to use the more modern EditorFor that takes a lambda function, as StuartLC showed in his post:
#Html.EditorFor(model => model.DesignParams[i].ParamId, ...)
You are "capitalising" the value html attribute. Change this to lower case...
#Value = Model.DesignParams[i].DefaultValue
as below ...
#value = Model.DesignParams[i].DefaultValue
IE is not the smartest of web browsers and there's definitely something wrong in the way Trident (they're parsing engine) validates elements' attributes as seen in these threads...
https://github.com/highslide-software/highcharts.com/issues/1978
Highcharts adds duplicate xmlns attribute to SVG element in IE
Also, as already noted somewhere else. What's the need for the Editor extension method? Isn't it simpler to just use TextBoxFor instead?
#Html.TextBoxFor(model => model.DesignParams[i].ParamId
, new
{
#class = "form-control text-right"
, uomid = Model.DesignParams[i].UOMId
, measureid = Model.DesignParams[i].MeasureId
})
Editor works with metadata. then you need to more about this,
http://aspadvice.com/blogs/kiran/archive/2009/11/29/Adding-html-attributes-support-for-Templates-2D00-ASP.Net-MVC-2.0-Beta_2D00_1.aspx
But the easiest way is go with
#model Namespace.ABCModel
#using (Html.BeginForm("Action", "Controller", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#Html.TextBoxFor(model => model.DesignParams[i].ParamId, new { #class = "form-control text-right", uomid = Model.DesignParams[i].UOMId, measureid = Model.DesignParams[i].MeasureId })
}
You shouldn't be using invalid Html attributes in this way. Use the data- attributes in Html 5.
Also, your use of #Html.Editor(Model.DesignParams[i].ParamId (assuming ParamId is a string) deviates from the helper's purpose, which is to reflect the property with the given name off the Model, and use the value of this property as the Html value attribute on the input. (MVC will be looking for a property on the root model with whatever the value of ParamId is, which seems to silently fail FWR)
I would do the defaulting of Model.DesignParams[i].ParamId = Model.DesignParams[i].DefaultValue in the Controller beforehand, or in the DesignParams constructor.
#Html.EditorFor(m => m.DesignParams[0].ParamID,
new {
htmlAttributes = new
{
// Don't set value at all here - the value IS m.DesignParams[0].ParamID
#class = "form-control text-right",
#type = "text",
id = "_" + Model.DesignParams[i].ParamId,
data_uomid = Model.DesignParams[i].UOMId,
data_measureid = Model.DesignParams[i].MeasureId
}
Note that this will give the input name as DesignParams[0].ParamID, which would be needed to post the field back, if necessary.
Here's a Gist of some example code
(The underscore will be converted to a dash)
Use data() in jQuery to obtain these values:
var value = $(inputfield).data("uomid");
I am searching for the same answer that was given here:
HTML/CSS Making a textbox with text that is grayed out, and disappears when I click to enter info, how?
But I want to do this in MVC4.
I got the following view:
#using (Html.BeginForm("Kompetens", "KumaAdmin"))
{
<div class="three columns" style="margin-right: 627px;">
<h6>Kompetens</h6>
<div style="width:456px;"> #Html.ListBox("kompetensId", (SelectList)ViewBag.KomId)</div><br/>
<h6>Lägg till kompetens</h6>
<div class="focus">
#Html.EditorFor(mm => mm.KompetensTest)
</div>
<input type="submit" style="margin-right: 205px;" value="Skapa"/><br/><br/>
</div>
}
Since this is my textbox:
#Html.EditorFor(mm => mm.KompetensTest)
I don't know how to apply the "onfocus" & onblur attributes on it like in the link above.
You need to create an Editor Template. Because the Html.EditorFor does not have the "object htmlattributes" parameter to do "new { onfocus = "js here" }".
Over the Views>Shared,
Create a folder called EditorTemplates
Then, you create a view using #model string/whathever this object is. Name the file as you want.
When you put the #model on a view you are specifying that it only accepts this type mas a model.
Inside this view, you create a Html.TextBox (not TextBoxFor) and voila.
On the Html.EditorFor method there is also a way to set which editor template you want to use. Choose the one you created by typing its name like this:
#Html.EditorFor(mm => mm.KompetensTest, "GreyedTemplate")
Code for the View I named as: GreyedTemplate.cshtml
#model string
#Html.TextBox("", Model, new { onfocus = "", onclick="" })
Note that the first parameter is empty. This was done on purpose, because when you use EditorFor(mm => mm.KompetensTest,"GreyedTemplate") it uses KompetensTest as the name of the field automatically.
You want to use the placeholder html attribute (http://www.w3schools.com/tags/att_input_placeholder.asp)
Something like #Html.EditorFor(mm => mm.KompetensTest, new { placeholder = "Text" })
#Gmoliv It worked finaly! I googeld arround and found that the "Editfor" does not have access to html attributes. Although I found "TextBoxFor" which has access to them, so the soloution is:
#Html.TextBoxFor(mm => mm.Profile, new { placeholder = "Ange Profil" })
#Pedro I really tried hard to make it work but the problem was that i could not get the value to be set so it was alwasy empty, i treid setting it in the view and in the templateView and it simply did not take. If you could i would appreciate a full code sample
Thanks alot!