Hi I'm building application to display reports, I have a set of setting which I would like the user to select, and while he selecting a preview updates. It is strongly typed view:
#model MRS.UI.Models.SettingsModel
#using (Html.BeginForm("Settings", "Report", FormMethod.Post))
{
<div class="white-box edit-box">
#Html.DropDownListFor(m => m.range, new SelectList(new List<Object>{new { value = 0, text = "12 hours"},
new { value = 1, text = "24 hours"},
new { value = 2, text = "4 days"},
new { value = 3, text = "8 days"},
new { value = 4, text = "16 days"},
new { value = 5, text = "month"},
new { value = 6, text = "quarter"},
new { value = 7, text = "year"}
},
"value",
"text",
Model.range
), new { #class = "select_change" }
)
#Html.TextBoxFor(m => m.title)
#Html.RadioButtonFor(m => m.layout, 1) <p>Layout 1</p><br />
#Html.RadioButtonFor(m => m.layout, 2) <p>Layout 2</p><br />
#Html.RadioButtonFor(m => m.layout, 3) <p>Layout 3</p><br />
#Html.RadioButtonFor(m => m.layout, 4) <p>Layout 4</p><br />
<input class="blueButton" type="submit" value="Complete Report"/>
</div>
}
<script>
$('.select_change').change(function () { alert(#Model.range); })
</script>
After I press "Complete Report" data is saving and then I can use it on different view, but how can I use it on the same view, while is selected. I tried to use JavaScript to display value of range in a form of alert message, but it displays not updated value.
How can I use selected value in #Html.DropDownListFor ?
Many thanks for your help
you can't use the value coming from your Model, which is not updated on client side (and the change event happens on client)
You have to do
$(.select_change).change(function() {
alert($(this).val());//selected value
alert($(this).find('option:selected').text());//selected option text
});
Related
question is very simple, I have this line of code within a template:
#Html.TextAreaFor(m => m.AnswerText, new { #class="Textarea", placeholder=Model.QuestionPlaceholder })
The problem is that sometimes AnswerText contains special characters like &, so I have tried the following:
#{var text = HttpUtility.HtmlDecode(Model.AnswerText); }
#Html.TextAreaFor(m => text, new { #class="Textarea", placeholder=Model.QuestionPlaceholder })
And now the problem is that I can see properly the text, but it doesn't save.
I also have tried the following:
#Html.TextAreaFor(m => HttpUtility.HtmlDecode(m.AnswerText), new { #class="Textarea", placeholder=Model.QuestionPlaceholder })
but I get the following error:
update: I have tried the following:
<div class="InputField">
#Html.TextAreaFor(m => m.AnswerText)
</div>
but when I try to save & and then go back to the page and have a look I see &
How do you do this? It is Blazor, Razor, MVC, within an InputField
I didn't like how I solved it, but it works. There is probably a better way:
#Html.TextAreaFor(m => m.AnswerText, new { #class = "Textarea " + Model.ID, placeholder = Model.QuestionPlaceholder })
<script>
var elements = document.getElementsByClassName("Textarea " + #Model.ID)[0];
elements.value = unescapeHtml(elements.value);
function unescapeHtml(value) {
return String(value)
.replace(/&/g, '&')...;
}</script>
I have below code and I want to change label text base on selected role.
For example, If I select Admin then in label Text I need "Admin Name" etc.
I use below code but I is not working.
<div class="editor-field">
#Html.DropDownListFor(model => model.RoleID, new SelectList(ViewBag.RoleLsit, "Id", "RoleName"), "Select Category", new { onchange = "SelectedIndexChanged()" })
</div>
<div>
#Html.LabelFor(model => model.RoleName)
#Html.EditorFor(model => model.RoleName)
#Html.ValidationMessageFor(model => model.RoleName)
</div>
<script type="text/javascript">
function SelectedIndexChanged() {
var sub = document.getElementsByName("RoleName");
sub.value = "Selected Role Name";
}
Thanks
You could find your elements using #Html.IdFor, if your js is in your view.
function SelectedIndexChanged() {
//find the label
var label = document.querySelector('label[for="#Html.IdFor(m => m.RoleName)"]');
//get the dropDown selected option text
var dropDown = document.getElementById("#Html.IdFor(m => m.RoleId)");
var selectedText = dropDown.options[dropDown.selectedIndex].text;
//set the label text
label.innerHTML=selectedText
}
By the way, taking a look a jQuery might be an "interesting" option.
You could simply remove the new { onchange = "SelectedIndexChanged()" , then
$('##Html.IdFor(m => m.RoleId)').change(function() {
$('label[for="#Html.IdFor(m => m.RoleName)"]').text($(this).children('option:selected').text());
});
function SelectedIndexChanged() {
document.getElementsById("RoleName").InnerHtml="Role name goes here";
}
you should use get element by id instead of name because when this html helper renders the strongly typed binded attributes becomes the id of that control . so in your case role name will be the ID
mvc option with html content
how to write/render
<select>
<option><span style="">Hi</span></option>
<option><span style="">Hi1</span></option>
<option><span style="">Hi2</span></option>
</select>
using #html.DropDownList()
--------Update-------------
i want to use html formatted text in option
when i passed it from modal, it was showing in dropdown list
<span style="">Hi</span>
<span style="">Hi1</span>
<span style="">Hi2</span>
here the span style="" is html it is not string, and the list is coming from controller
Use SelectItem in the code, insert options in that list, provide another property for selected item on Post using passing it to the view and use #Html.DropDownListFor(x => x.SelectItem) a simple example can be
#Html.DropDownListFor(model => model.Package.State, new SelectList(
new List<Object>{
new { value = 0 , text = "Red" },
new { value = 1 , text = "Blue" },
new { value = 2 , text = "Green"}
},
"value",
"text",
2))
I need to create the textarea field at my form
<textarea class="img-shadow" cols="20" id="Message" name="Message" rows="2">Message</textarea>
I write code
#Html.TextAreaFor(model => model.Message, new { #class = "img-shadow" })
but I get empty textarea without any text
<textarea class="img-shadow" cols="20" id="Message" name="Message" rows="2"></textarea>
How can I add text in?
The content of the text box will be whatever the value of model.Message is.
This should be set in your Action method in the Controller, and passed to the View
public ViewResult ActionName() {
var model = new ViewModel();
model.Message = "Text Area Content";
return View(model);
}
As a test just output model.Message in the View, it will be empty.
<p>#Model.Message</p>
Then #Html.TextAreaFor(model => model.Message, new { #class = "img-shadow" }) will output
<textarea class="img-shadow" cols="20" id="Message" name="Message" rows="2">Text Area Content</textarea>
After much scratching around I managed to get it done this way.
#{ var _address="Line 1\nLine 2\n Line 3"; }
#Html.TextArea(Model.xxxx , new { id="address" } )
<script>
var x = #Html.Raw(Json.Encode( _address )) ;
document.getElementById("address").value = x;
</script>
If you haven't any control characters like newline \n you can replace var x=#Html...... with var x = "Text" ;
#Html.TextAreaFor(model => model.Message, new { #class = "img-shadow", value = "added text" })
But If you initialize your model in controller Get method, then it will add text to your textarea, automaticly.
Check these tutorials
you add the default value into it.. by
#Html.TextAreaFor(model => model.Message, new { #class = "img-shadow",#value = "added text" })
In Controller Write
ModelVariable.Message= Server.HtmlDecode(ModelVariable.Message);
#Html.TextAreaFor(model => model.Message, new { #class = "img-shadow" })
It has worked for me
I have three DropDownLists. If a specific Value from my first DropDownList is chosen, the second Dropdownlist should be enabled. Example, if "Player 3" has been choosen, the other two DropDownList should be enabled, though, if "Player 2" is chosen the last DropDownList should be disabled and the second one enabled.
How can I easily do this? I am using MVC 3 EF model first.
This is my code in my view:
<p>Player</p>
<div class="editor-field">
#Html.DropDownListFor(m => m.PlayerName,Model.SubjectTypes, "Choose player" , new { #class = "selectstyle" })
#Html.ValidationMessageFor(model => model.PlayerName)
</div>
<p>Position</p>
<div class="editor-field">
#Html.DropDownListFor(model => model.PositionName, Model.Consultants, "Choose Position", new { #class = "selectstyle" })
#Html.ValidationMessageFor(model => model.ContactPerson)
</div>
<p>Team</p>
<div class="editor-field">
#Html.DropDownListFor(model => model.TeamName, Model.Teams, "Choose Team", new { #class = "selectstyle" })
#Html.ValidationMessageFor(model => model.ContactPerson)
</div>
I would do the following in jquery:
$('#PlayerName').change(function()
{
var id = $(this).val()
$.ajax({
url: '#Url.Action("GetPositions")',
data:
{
"id": id,
},
success: function (data)
{
$("#positions").html(data);
}
});
}
Then i will have in the action controller:
public JsonResult GetPositions(int id)
{
var positions = Repository.GetPositionsByPlayerId(id);
var hmtl = positions.Select(x => new SelectListItem
{
Value = x.PositionID.ToString(),
Text = x.Name
});
return new JsonResult { Data = html };
}
This will fill the values with all the postions related to that player.
You could subscribe to the .change() event of the first dropdown and then based on the currently selected value enable/disable the others:
$(function() {
$('#PlayerName').change(function() {
var value = $(this).val();
if (value == 'Player3') {
$('#PositionName, #TeamName').removeAttr('disabled');
} else if (value == 'Player2') {
$('#PositionName').removeAttr('disabled');
$('#TeamName').attr('disabled', 'disabled');
}
});
});