I have a two cascading dropdown, when I run the application everything works fine, because the cascade works, but when I get the value of the dropdown only get the value of first dropdown. The second I always get the value of zero.
The ViewModel code:
public class MyViewModel
{
public string SelectedUniversidadId { get; set; }
public string SelectedCiudadId { get; set; }
public IEnumerable<UNIVERSIDAD> Universidades { get; set; }
}
Partial view code:
<script type="text/javascript">
$(function () {
$('#universidad').change(function () {
var selectedUniversidadId = $(this).val();
$.getJSON('#Url.Action("GetCiudadList", "Consultorio", new { Area = "Superusuario", controller = "Consultorio" })', { UniversidadId: selectedUniversidadId }, function (myData) {
var citiesSelect = $('#ciudad');
citiesSelect.empty();
$.each(myData, function (index, itemData) {
citiesSelect.append($('<option/>', {
value: itemData.Value,
text: itemData.Text
}));
});
});
});
});
</script>
#model RolesMVC3.Areas.Superusuario.Models.MyViewModel
<div>
Universidad:
#Html.DropDownListFor(x => x.SelectedUniversidadId, new SelectList(ViewBag.IdUniversidad, "IdUniversidad", "Nombre"), "-- Selecione Universidad --", new { id = "universidad" })
</div>
<div>
Ciudad:
#Html.DropDownListFor(x => x.SelectedCiudadId, Enumerable.Empty<SelectListItem>(), "-- Seleccione Ciudad --", new { id = "ciudad" })
</div>
Controller code:
public ActionResult GetCiudadList(int UniversidadId)
{
decimal idd = (decimal)UniversidadId;
var universidades = (from u in db.UNIVERSIDAD
join s in db.SEDE_UNIVERSIDAD on u.IdUniversidad equals s.IdUniversidad
join c in db.CIUDAD on s.IdCiudadSede equals c.IdCiudad
where u.IdUniversidad == idd
select c).ToList();
var myData = universidades.Select(a => new
{
Text = a.NombreCiudad,
Value = a.IdCiudad.ToString(),
});
return Json(myData, JsonRequestBehavior.AllowGet);
Thanks and blessings
You need a controller action that receives 2 parameters (selected values for the 2 dropdowns). Also, pay attention to the values of the name attributes for the input elements. the name of the parameters need to be the same as the "name" input attribute.
Related
I'm trying to make one list dependent on the other using javascript, but the value of the second is the value of the first list plus its own id, separeated by "*". I've been trying to split the value and get only the first part, but it returns nothing. What's wrong with the code?
listaversao = _context.Versao.Select(v => new SelectListItem
{
Value = v.idLinguagem.ToString() + "*" + v.idVersao.ToString(),
Text = v.nmVersao //this one depends on listaling, but it has two ids separated by the *;
});
listaling = _context.Linguagem.Select(l => new SelectListItem
{
Value = l.idLinguagem.ToString(),
Text = l.nmLinguagem
});
Javascript:
var $linguagem = $('#lingua'),
$versao = $('#versao'),
$options = $versao.find('option');
$linguagem.change(function () {
$('#versao option')
.hide() // hide all
.filter(versao => versao.val().split("*")[0] == $linguagem.val()) // splits the val and filter options with required value
.show(); // and show them
});
And that's how I'm setting the binding:
public IEnumerable<SelectListItem> listaversao { get; set; }
public IEnumerable<SelectListItem> listaling { get; set; }
[BindProperty(SupportsGet =true)]
public string[] selecaover { get; set; }
And the html:
<label asp-for="Scripts.idLinguagem" class="control-label"></label>
<br />
<select onchange="mudar()" id="lingua" asp-for="linguagem" asp-items="Model.listaling"></select>
<select id="versa" size="10" onclick="mostrarv()" multiple="multiple" asp-for="selecaover" asp-items="Model.listaversao"></select>
Thanks for helping.
How to fetch .Net MVC Model value in the JavaScript?
I am populating the Radio Button Control from the list stored in the database.
item.MyColumn has the list of Radio button options such as Yes, No, NA etc.
In the jQuery, I need to fetch the value of Yes (or) No (or) NA and based on that value, I have to do some validation.
<div class="col-sm-8 checkbox-inline text-left">
#foreach (var item in Model.YesNoNAList)
{
#Html.RadioButtonFor(model => model.ReceivingMedication, item.ID, new { #id = "ReceivingMedication" + item.MyColumn }) #: #item.MyColumn
}
<span asp-validation-for="ReceivingMedication" class="text-danger"></span>
</div>
Having this syntax in the JavaScript, gives me the column : id . And not the value associated with the Id.
var selValue = $('input[name=ReceivingMedication]:checked').val();
Normally, you do not need to manipulate the control's ID. If you want to assign default value, you assign it to ReceivingMedication.
<div class="col-sm-8 checkbox-inline text-left">
#foreach (var item in Model.YesNoNAList)
{
<p>#Html.RadioButtonFor(model => model.ReceivingMedication, item.Value) #item.Text</p>
}
<span asp-validation-for="ReceivingMedication" class="text-danger"></span>
</div>
<script>
var selValue = $('input[name=ReceivingMedication]:checked').val();
console.log(selValue);
</script>
Model
public class Model
{
public List<SelectListItem> YesNoNAList { get; set; }
public string ReceivingMedication { get; set; }
public string ID { get; set; }
}
Controller
public class HomeController : Controller
{
public ActionResult Index()
{
var model = new Model
{
YesNoNAList = new List<SelectListItem>
{
new SelectListItem {Text = "Yes", Value = "1"},
new SelectListItem {Text = "No", Value = "0"},
new SelectListItem {Text = "N/A", Value = ""}
},
ReceivingMedication = "0" // Default value
};
return View(model);
}
}
I have a requirement which I need to display price based on drop down selection. and that price comes from same db, when I click one Test from dropdown then respected price of that test should display in textbox.The value is binding in textbox after selecting option from dropdown also it is displaying after taking span but not displaying on textbox, please tell me solution because i want to display it only on textbox .
here is Error Image
Model class
public partial class TwoDDiagnostic
{
public int TwoD_ID { get; set; }
public string TwoDDiagnostic_Name { get; set; }
public string TwoD_Price { get; set; }
public Nullable<System.DateTime> TwoD_Date { get; set; }
public Nullable<int> centr_Id { get; set; }
}
Controller
IEnumerable<SelectListItem> selectList2D = from twod in db.TwoDDiagnostics
where twod.centr_Id == Id
select new SelectListItem()
{
Text = twod.TwoDDiagnostic_Name,
Value = twod.TwoDDiagnostic_Name
};
var lasttwoD = db.TwoDDiagnostics.Where(x => x.centr_Id == Id).OrderByDescending(c => c.TwoD_ID).Take(1).FirstOrDefault();
if (lasttwoD == null)
{
ViewBag.twoDID = new SelectList(selectList2D, "Value", "Text");
model.ViewModel_TwoDDiagnostic = null;
return View(model);
}
string twodname = (from sub in db.TwoDDiagnostics where sub.TwoD_ID == lasttwoD.TwoD_ID select sub.TwoDDiagnostic_Name).First();
ViewBag.twoDID = new SelectList(selectList2D, "Value", "Text", twodname);
View
<div class="form-inline">
<label for="inputEmail1" class=" col-lg-2 col-sm-4 control-label">2D Diagnostic Services</label>
<div class="col-lg-5">
#Html.DropDownListFor(model => model.PTwoDDiagnostic_name, (SelectList)ViewBag.twoDID, "- Select 2D Diagnostics -", new { #class = "form-control ", #id = "twopID", #onchange = "fill()" })
</div>
<div class="col-lg-3">
#*<span class="form-control" id="twoprice"></span>*#
#Html.TextBoxFor(model => model.PTwoDDiagnostic_price, new { #class = "form-control ", #id = "twoprice" , #onchange = "fill()"})
</div>
</div>
here is json method
public JsonResult GetTwoDPrice()
{
AllViewModel model = new AllViewModel();
Session["Two_D"] = model.TwoD_ID;
var id = (int)Session["Two_D"];
if (!string.IsNullOrEmpty(Session["Two_D"].ToString()))
{
//int Id = (int)Session["Two_D"];
var Record = (from patient in db.TwoDDiagnostics
where patient.TwoD_ID == id
select new
{
TwoD_ID = patient.TwoD_ID,
TwoD_Price = patient.TwoD_Price
}).FirstOrDefault();
return Json(Record, JsonRequestBehavior.AllowGet);
}
return Json("", JsonRequestBehavior.AllowGet);
}
here is a script
<script type="text/javascript">
$("#twopID").on('change', function (event) {
$.ajax({
url: "#Url.Action("GetTwoDPrice", "Center")",
type: "Get",
success: function (data) {
debugger;
console.log(data.TwoD_Price);
$('#twoprice').text(data.TwoD_Price);
}
});
});
</script>
You need to use the jquery val() method to set the Value for the TextBox. If you use text() method, it sets the innerText of the input element (in between the <input> and </input> HTML tags) which is applicable only for HTML Elements like span, label, h, div, etc.
$('#twoprice').val(data.TwoD_Price);
Im developing a mvc5 application. In a view, using jquery i generate html elements(dropdownlists and textboxes) dynamically.
View briefly
#using (#Html.BeginForm("Save", "Item"))
{
#Html.DropDownListFor(a => a.MainGrpId, new SelectList(ViewBag.mnGrpList, "MainGroupId", "MainGroupName"), " Select a MainGroup", new { Class = "form- control", title = "", style = "width:175px;height:30px; margin-top:6px;" })
#Html.DropDownListFor(a => a.SubGrpId, new SelectList(ViewBag.sbGrpList, "SubGroupId", "SubGroupName"), " Select a SubGroup", new { Class = "form-control", title = "", style = "width:175px;height:30px; margin-top:6px;" })
<div id="ss" class="col-md-6">
</div>
#Html.TextBoxFor(a=>a.ItemName, new { Class = "form-control", placeholder = " Item Name", TextMode = "MultiLine2", onkeyup = "return validateChar(this)", style = "width:175px;height:25px;" })
<input type="submit" value="Save" class="btn btn-success" />
}
Jquery
var ss = $('#ss');
$('#SubGrpId').change(function () {
$('#ss').empty();
$.ajax({
url: '#Url.Action("FillItem", "Item")', // dont hard code your url's
type: "GET",
dataType: "JSON",
data: { MnId: $('#MainGrpId').val(), SbId: $(this).val() }, // pass the selected value
success: function (y) {
$.each(y, function (l, u) {
// add the label
var label = u.Name;
var name = 'Field' + l;
var label = $('<label></label>').text(label).attr('for', name);
ss.append(label);
if (u.Options.length==0) {
// There is only one item and its for generating a textbox
var input = $('<input>').attr({ type: 'text', id: name, name: name });
ss.append(input);
} else {
// Its a select
var select = $('<select></select>').attr({ id: name, name: name });
// add each option
$.each(u.Options, function (i, option) {
select.append($('<option></option>').val(option.Value).text(option.Text));
})
ss.append(select);
}
});
},
error: function () {
alert("something wrong");
}
});
});
ItemViewModel
public class ItemViewModel
{
public string ItemName { get; set; }
public int MainGrpId { get; set; }
public int SubGrpId { get; set; }
public string Field0 { get; set; }
public string Field1 { get; set; }
public string Field2 { get; set; }
public string Field3 { get; set; }
public string Field4 { get; set; }
public string Field5 { get; set; }
}
Altogether number of dynamically generated ddls+textboxes are equal or less than 6. What i want to do is when user selects an item from a ddl or enters a value to a texbox, the value in that particular element(string) should be shown in 'ItemName' textbox. User can go on adding like that. Each added value(string) should be shown separated by a space in 'ItemName' textbox.
Futher every ddl and textbox(only dynamically generated ones-Field0, Field1, Field2, Field3, Field4, Field5, ) should get enabled one by one(one after another) allowing user to select(ddls)/enter(textboxes). But im struggling to develop the correct jquery function for this whole scenario. Pls help me with this. Thanks!
I'm having two dropdown lists in my MVC(Razor) view: Country and State.
I'm able to fill both the dropdown's independent of each other.Now i want to fill second dropdown(State) based on the change event of Country's dropdown.
For this I have used JsonResult method in Controller and for this method i'm passing countryID on the Change event of Country from my view inorder to fill my second dropdown state.
Problem Statement: The JsonResult method is getting triggered from my view but the CountryId value is not getting passed from view to controller in-order to fill state.
What i'm doing wrong here?
View:
Javascript:
<script type="text/JavaScript">
function CountryChange() {
var url = '#Url.Content("~/MasterConfigGeneral/GetState")';
var ddlsource = "#CountryID";
var ddltarget = "#StateID";
if ($(ddlsource).val() != "") {
$.ajaxSetup({ cache: false });
$.getJSON(url, { countryID: $(ddlsource).val() }, function (data) {
$(ddltarget).empty();
$("#StateID").append("<option value=''>Select State</option>");
$.each(data, function (index, optionData) {
$("#StateID").append("<option value='" + optionData.Value + "'>" + optionData.Text + "</option>");
});
});
}
else {
$("#StateID").empty();
$("#StateID").append("<option value=''>Select State</option>");
}
}
</script>
Dropdown's in my View:
<div class="cssclass">
#Html.DropDownListFor(model => model.companyModel.CountryID, new SelectList(Model.ddlCountryStateCity.ddlCountry, "Value", "Text"), "Select Country", new { onchange="CountryChange()" })
#Html.ValidationMessageFor(model => model.companyModel.CountryID)
</div>
<div class="cssclass">
#Html.LabelFor(model => model.companyModel.StateID)
</div>
<div class="editor-field">
#Html.DropDownList("stateid",Model.ddlCountryStateCity.ddlState,"Select State")
#Html.ValidationMessageFor(model => model.companyModel.StateID)
</div>
Controller:
Country Dropdown:
#region Country
public DropdownListCountryStateCity FillDropDownListCountry()
{
objDropDownCountryStateCity.ddlCountry = (from s in dbEntity.Countries
select new SelectListItem()
{
Text = s.Name,
Value = s.CountryID
}).ToList<SelectListItem>();
return objDropDownCountryStateCity;
}
#endregion
State Dropdown:
#region State
public JsonResult GetState(string countryID)
{
JsonResult jsResult = new JsonResult();
objDropDownCountryStateCity.ddlState = (from csc in dbEntity.CountryStateCities
join c in dbEntity.Countries on csc.CountryID equals c.CountryID
join s in dbEntity.States on csc.StateID equals s.StateID
where csc.CountryID == countryID
select new SelectListItem()
{
Text = s.Name,
Value = s.StateID
}).ToList<SelectListItem>();
jsResult.Data = objDropDownCountryStateCity.ddlState;
jsResult.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
return jsResult;
}
#endregion
Your problem lies on how the DropDownListFor helper generates the element.
In your code, it's generating names and ids something like this:
<select id="companyModel_CountryID" name="companyModel.CountryID">
...
</select>
In your javascript the ddlSouce is "#CountryID". Since there's no element with that id, jQuery pass null as data to $.getJSON. That's why the controller method receives nothing.
You have two options:
Change ddlSource javascript to the proper id (you'll have to see on the source code) OR
Change the last DropDownListFor helper from
new { onchange="CountryChange()" }
to
new { id = "CountryID", onchange="CountryChange()" }
IMHO, the last option is the best choice.