#Html.DropDownListFor(model => model.Status, new List<SelectListItem>
{ new SelectListItem{Text="Active", Value="1",Selected =true},
new SelectListItem{Text="Deactive", Value="0"}})
If i change the value Active to De active display the one alert box. How to display the alert box.
You could use the change() handler in Jquery to listen for the event.
$( "#targetId").change(function() {
alert( "Something changed handle it here" );
});
http://api.jquery.com/change/
Razor:-
#Html.DropDownListFor(model => model.Status, new List<SelectListItem>
{ new SelectListItem{Text="Active", Value="1",Selected =true},
new SelectListItem{Text="Deactive", Value="0"}})
Jquery(Change event is called when you change the dropdownlist value whose id is attached in below query) :-
<script>
$(document).ready(function(){
$('select#status').change(function() {
alert("value changed. New value is " + $(this).val());
});
});
});
</script>
Add this code in your master layout or in view in which Dropdown is:
First Way:
Jquery CODE:
<script>
$(document).ready(function(){
$('select#status').change(function() {
alert($(this).val());
});
});
</script>
Second Way:
Or you can add your own id like this:
#Html.DropDownListFor(model => model.Status, new List<SelectListItem>
{ new SelectListItem{Text="Active", Value="1",Selected =true},
new SelectListItem{Text="Deactive", Value="0"}
},
null,
new {#id="DDLStatus"})
and script:
<script>
$(document).ready(function(){
$('select#DDLStatus').change(function() {
alert($(this).val());
});
});
</script>
Note: make sure that jquery script file is included in your master layout mostly it is in View --> Shared --> _Layout.cshtml
Related
I have an ASP.NET MVC DropDownList:
#{var selectionList = new List<SelectListItem>
{
new SelectListItem { Text = "All Patients", Value="All Patients" },
new SelectListItem { Text = "Chosen Patients", Value="Chosen Patients" }
};
}
#Html.DropDownList("Selection",new SelectList(selectionList,"Value","Text"))
I have also a KendoGrid that should be hided before click on the list item: "Chosen Patients":
<script type="text/javascript">
$('#CheckedPatientsRep').hide();
</script>
This is KendoGrid:
#(Html.Kendo().Grid<RunSummary>()
.Name("CheckedPatientsRep")
//.Events( events => events.DataBinding("onDataBinding"))
.DataSource(datasource => datasource
.Ajax().PageSize(25)
.ServerOperation(false)
.Sort(sort => sort.Add("UniqueId").Ascending())
.Read(read => read.Action("GetRunSummaries", "PatientReport")))
.Columns(columns =>
{
etc.
I would like to show the KendoGrid after click on "Chosen Patients" in the DropDownList. This is my code for click:
<script>
$("#Selection").click(function () {
var selectedValue = $(this).find('option:selected').val();
if (selectedValue.toLower() == "chosen patients") {
$('#CheckedPatientsRep').show();
}
});
</script>
I have two problems: the KendoGrid is not hided at first, and the second is that the click doesn't work. How to solve this? Thank you in advance for any help.
Everything is ok now :). I only put the code
<script type="text/javascript">
$('#CheckedPatientsRep').hide();
</script>
before KendoGrid. The code for click also works, except it should use the function toLowerCase() instead of toLower().
I want to create text area which will be disabled or invisible at starting.
There's a dropdown list, on selection of last option i.e other, it should enable or make the text area visible and take the value and pass to controller on submission.
Use
#Html.TextArea("Name", null, new { disabled="disabled" })
For You:
<div>
#Html.TextArea("Name", null, new { disabled="true" })
#Html.DropDownList("switch", new List<SelectListItem>() {
new SelectListItem(){Text="Enable", Value="Enable"},
new SelectListItem(){Text="Disable", Value="Disable", Selected=true},
})
</div>
<script>
$(function ($) {
var dropDown = $("#switch");
var txtName = $("#Name");
dropDown.change(function () {
if (dropDown.val() === "Disable")
{
txtName.attr("disabled", true);
}
else {
txtName.removeAttr("disabled");
}
})
})(jQuery)
</script>
You should hide the text area, not only disable it. What you can do is add the html :
#Html.TextArea("Text", null, new { #class="hiddenOptionArea", disabled="disabled" })
and apply the class:
hiddenOptionArea {
display:none
}
Also you better use #Html.EditorFor and make yourself a template for your model, so that you can reuse your html wherever you need it - you can find the link here: http://rachelappel.com/razor/partial-views-in-asp-net-mvc-3-w-the-razor-view-engine/
You should try this for creating disabled textArea
#Html.TextAreaFor(m => m.property, new { id = "txtId", disabled = "disabled" })
Script
$(document).ready(function () {
"use strict";
$.validator.unobtrusive.parse($("#form"));
$("#submit").on("click", function () {
var form = $("#form");
form.validate();
if (form.valid()) {
}
return false;
});
});
HTML
<span>Please enter the amount of orders you wish you process:</span>
<br>
#Html.TextBoxFor(m => m.OrderModel.AmountOfOrders, new {id = "AmountOfOrders"})
#Html.ValidationMessageFor(m=> m.OrderModel.AmountOfOrders)
<input type="submit" value ="Submit" id="submit" />
I seem to have a problem with the script. The DataAnnotations for C# are showing up on the View but even if required fields are empty it will still continue to the other page.
if your button is not given
type="button"
, it will default to
type="submit"
Considering that you are using a form, the form will get submitted by the button click as your javascript is executing.
Try this.
$("#submit").on("click", function (event) {
var form = $("#form");
form.validate();
if (form.valid()) {
}
else
{
event.preventDefault();
return false;
}
});
Always use the submit event for forms, not the click event. That way it will work with key-presses:
$("#submit").on("submit", function () {
var form = $("#form");
form.validate();
if (form.valid()) {
// Proceed with submit!
}
else {
// Stop submit!
return false;
}
});
I have a Partial view (_SubView) which is having multiple controls
<script type="text/javascript">
$(document).ready(function () {
$(".datepicker").datepicker({
showOn: 'both',
dateFormat: 'dd-MM-yy',
buttonImage: "#Url.Content("~/Content/Images/Icons/Calendar.png")" , //"../../Content/Images/Icons/Calendar.png",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
//altFormat: 'yymm',
onClose: function (dateText, inst) {
$(this).datepicker();
$(this).change();
}
});
$(".datepicker").datepicker().keydown(function (e) {
e.preventDefault();
// TAB: 9
// LEFT: 37
// UP: 38
// RIGHT: 39
// DOWN: 40
// IE OTHER
var code = e.keyCode || e.which;
DatePickerKeyDownEvent($(this).val(), code);
if (currentDate != null) { $(this).datepicker("setDate", currentDate); }
});
});
</script>
#using(Html.BeginCollectionItem("form")
{
// A set of labels and dropdown controls
#Html.TextBoxFor(x => x.MaturityDate, new { #class = "datepicker", #title = "Enter Maturity Date",id="date-picker" })
}
In main view, I have a button "Add New Item". When ever user clicks on Add New Item, _SubView will be added to the main view dynamically.
Question:
When ever user dynamically add multiple partial views to the main view and try to change individual maturity date , date is changing only in the initially added partial view.
But when user tries to change the date using keydown event, respective date control is changing correctly without any issues.
Can anyone help me where exactly I am doing wrong?
Regards
I believe the problem is happening because you set the input id to "date-picker",
remove id="date-picker"
I have a simple MVC 5 page with a single dropdown list. Based upon the selection made from this dropdown list I enable visibility for one of three divs on the page. The problem I am running into is each div takes space on the page, even if it is not visible. So when I select something from dropdown list that causes the second div to be visible I will see that content shifted down on the page.
Here is the code from the Controller to create the data for the dropdown list.
public ActionResult Index()
{
var searchBy = new List<SearchBy>
{
new SearchBy { Name = "Email Address", Value = "EmailAddress" },
new SearchBy { Name = "Last name, First name", Value = "Name" },
new SearchBy { Name = "Username", Value = "Username" }
};
ViewBag.SearchByOptions = new SelectList(searchBy, "Value", "Name");
return View();
}
Here is my markup for the Index.cshtml
#{
<script type="text/javascript">
$(document).ready(function() {
// Make all three <div>s hidden when the page loads...
document.getElementById("searchByEmail").style.visibility = "hidden";
document.getElementById("searchByName").style.visibility = "hidden";
document.getElementById("searchByUsername").style.visibility = "hidden";
});
function searchBy(selectedItem) {
if (selectedItem == "EmailAddress") {
// Make visible
document.getElementById("searchByEmail").style.visibility = "visible";
// Make in-visible
document.getElementById("searchByName").style.visibility = "hidden";
document.getElementById("searchByUsername").style.visibility = "hidden";
}
if (selectedItem == "Name") {
// Make visible
document.getElementById("searchByName").style.visibility = "visible";
// Make in-visible
document.getElementById("searchByEmail").style.visibility = "hidden";
document.getElementById("searchByUsername").style.visibility = "hidden";
}
if (selectedItem == "Username") {
// Make visible
document.getElementById("searchByUsername").style.visibility = "visible";
// Make in-visible
document.getElementById("searchByEmail").style.visibility = "hidden";
document.getElementById("searchByName").style.visibility = "hidden";
}
};
</script>
}
<h2>Index</h2>
<div>
Search for existing users by: #Html.DropDownList("SelectedItem", (SelectList)ViewBag.SearchByOptions, "-- Select One --", new { onchange = "searchBy($('#SelectedItem').val());" })
</div>
<div id="searchByEmail">
Emails...
</div>
<div id="searchByName">
Names...
</div>
<div id="searchByUsername">
Usernames...
</div>
}
I am not sure what trick is needed to get all of the divs to take the same "real estate" on the page as I will only be showing one of them at a time.
Assuming that you use jQuery, try:
#{
<script type="text/javascript">
$(document).ready(function() {
$("#searchByEmail").hide();
$("#searchByName").hide();
$("#searchByUsername").hide();
});
function searchBy(selectedItem) {
if (selectedItem == "EmailAddress") {
$("#searchByEmail").show();
$("#searchByName").hide();
$("#searchByUsername").hide();
}
if (selectedItem == "Name") {
$("#searchByName").show();
$("#searchByEmail").hide();
$("#searchByUsername").hide();
}
if (selectedItem == "Username") {
$("#searchByUsername").show();
$("#searchByEmail").hide();
$("#searchByName").hide();
}
};
</script>
}
<h2>Index</h2>
<div>
Search for existing users by: #Html.DropDownList("SelectedItem", (SelectList)ViewBag.SearchByOptions, "-- Select One --", new { onchange = "searchBy($('#SelectedItem').val());" })
</div>
Also, check what is the difference between CSS rules:
visibility:hidden
and
display:none
The first just hide the element, but preserve the placeholder the same size as it is visible.
The second removes it from the size and dimension calculations.
.style.display = "block"; /* or none to hide it */