I have 2 dropdownlist on a page.When i select some value from first dropdown list then in second dropdownlist all the values should load according to the value selected (Subcategories loaded according to Categories). Here is what I tried but it doesn't work:
Model
public class Product
{ ...
public int CategoryId { get; set; }
public virtual Category Category { get; set; }
public IEnumerable<SelectListItem> Categories { get; set; }
public int SubCategoryId { get; set; }
public virtual SubCategory SubCategory { get; set; }
public IEnumerable<SelectListItem> SubCategories { get; set; }
...
}
View
<label>Select Category</label>
#Html.DropDownListFor(m => m.CategoryId, new SelectList(Model.Categories, "Value", "Text"), "Select Category", new { id = "catList", #class = "form-control" })
<label>Selectat Subcategory</label>
#Html.DropDownListFor(m => m.SubCategoryId, new SelectList(Enumerable.Empty<SelectListItem>(), "Value", "Text"), "Selectat Subcategory", new { id = "subcatList", #class = "form-control" })
<script type="text/javascript">
$(document).ready(function () {
$("#catList").change(function () {
var cID = $(this).val();
$.getJSON("../Product/New/LoadSubCategories", { catId: cID },
function (data) {
var select = $("#subcatList");
select.empty();
select.append($('<option/>', {
value: 0,
text: "Selecteaza o subcategorie"
}));
$.each(data, function (index, itemData) {
select.append($('<option/>', {
value: itemData.Value,
text: itemData.Text
}));
});
});
});
});
</script>
Controller
[AcceptVerbs(HttpVerbs.Get)]
public JsonResult LoadSubCategories(string catId)
{
var subCatList = GetAllSubCategories(Convert.ToInt32(catId));
return Json(subCatList, JsonRequestBehavior.AllowGet);
}
[NonAction]
public IEnumerable<SelectListItem> GetAllSubCategories(int selectedCatId)
{
//generate empty list
var selectList = new List<SelectListItem>();
var subcategories = from sbcat in db.SubCategories
where sbcat.CategoryId == selectedCatId
select sbcat;
foreach (var subcategory in subcategories)
{
//add elements in dropdown
selectList.Add(new SelectListItem
{
Value = subcategory.SubCategoryId.ToString(),
Text = subcategory.SubCategoryName.ToString()
});
}
return selectList;
}
you need to change your getJson to Ajax method
here is the ajax sample code
$.ajax({
type: "GET",
url: '/Product/New/LoadSubCategories',
data: {catId: cID},
success: successFunc,
error: errorFunc
});
function successFunc(data) {
var select = $("#subcatList");
select.empty();
select.append($('<option/>', {
value: 0,
text: "Selecteaza o subcategorie"
}));
$.each(data, function (index, itemData) {
select.append($('<option/>', {
value: itemData.Value,
text: itemData.Text
}));
});
}
function errorFunc() {
alert('error');
}
});
this ajax code you need to write on dropdown change and in success of ajax call, you need to write the code you want to do when dropdown's value changes and data received successfully
For change the second Drop down value according to first drop down value, you need to write an Onchange event, then only it will get change.. please check below stackoverflow question an answer it will be help full to you
Click here
Related
I am working on a request form for work. The request deals with series of products. There are many series, so I am trying to filter them down by the product line that they are produced on. I am attempting this using cascading dropdown lists from Ajax. I know the script is working to a degree, because the default selected option changes to "Make Selection". However, the rest of the dropdown does not populate.
Here are the two dropdowns.
#Html.DropDownListFor(model => model.SelectedProductLine, new SelectList(Model.ProductLines, "Value", "Text"), "Select a Product Line", new { #class = "form-control", #style = "width: 400px;", #id = "ProductLineID"})
#Html.DropDownListFor(model => model.SelectedSeries, new SelectList(string.Empty, "Value", "Text"), "Select a Series", new { #class = "form-control", #id = "SeriesID"})
The Ajax Script.
$(document).ready(function () {
//Dropdownlist Selectedchange event
$('#ProductLineID').change(function () {
$.ajax({
url: '/SMRMaster/RequestForm/GetSeries',
type: 'GET',
datatype: 'JSON',
data: { id: $('#ProductLineID').val() },
success: function (result) {
$('#SeriesID').html('');
$('#SeriesID').append($('<option>Make Selection</option>'));
$.each(result, function (index, item) {
$('#SeriesID').append($('<option></option>').val(item.Value).html(item.Text));
});
}
});
});
});
The Controller.
public JsonResult GetSeries(string id)
{
int Id = Convert.ToInt32(id);
db.Database.ExecuteSqlCommand("SET TRANSACTION ISOLATION LEVEL READ UNOCMMITTED;");
var productLineName = "";
switch (Id)
{
case 0:
productLineName = "Electric";
break;
case 1:
productLineName = "Europe Gas";
break;
case 2:
productLineName = "Gas";
break;
case 3:
productLineName = "Miscellaneous";
break;
case 4:
productLineName = "Water";
break;
default:
productLineName = "Electric";
break;
}
IEnumerable<SelectListItem> series = (from s in db.Series
where s.ProductLineName == productLineName
select new SelectListItem { Value = s.ProductLineName, Text = s.ProductLineName }).ToList();
return Json(series, JsonRequestBehavior.AllowGet);
}
public List<ProductLine> GetProductLines()
{
db.Database.ExecuteSqlCommand("SET TRANSACTION ISOLATION LEVEL READ UNCOMMITTED;");
var productLineList = (from p in db.ProductLines
select p).ToList();
return productLineList;
}
public ActionResult RequestForm()
{
var count = 0;
var productLineList = new List<SelectListItem>();
foreach (var item in GetProductLines())
{
productLineList.Add(new SelectListItem { Text = item.ProductlineName, Value = count.ToString() });
}
db.Database.ExecuteSqlCommand("SET TRANSACTION ISOLATION LEVEL READ UNCOMMITTED;");
var requestViewModel = new RequestViewModel { SMRMaster = new SMRMaster(), Engineers = GetEngineers(), ProductLines = productLineList };
return View(requestViewModel);
}
And the view model.
public class RequestViewModel
{
public List<SelectListItem> ProductLines { get; set; }
public string SelectedProductLine { get; set; }
public SMRMaster SMRMaster { get; set; }
public List<string> Engineers { get; set; }
[Required(ErrorMessage = "Engineer is required.")]
public string SelectedEngineer { get; set; }
public List<Series> Series { get; set; }
public string SelectedSeries { get; set; }
}
I do not know where the error is coming from. Any help is appreciated.
Try this
$.each(result, function (i, item) {
var optionData = '<option value="' + item.Value + '">' + obj.Text + '</option>';
$(optionData).appendTo('#SeriesID')
});
Or debug and see what's your response from server.
A colleague helped me solve this problem. Firstly, the Ajax script was using the wrong URL. Secondly, my controller functions were unnecessarily complicated.
Here is the updated AJAX script:
$(document).ready(function () {
//Dropdownlist Selectedchange event
$('#ProductLine').change(function () {
$.ajax({
url: '/SMRMaster/GetSeries',
type: 'GET',
datatype: 'JSON',
data: { productLine: $('#ProductLine').val() },
success: function (result) {
$('#SeriesID').html('');
$('#SeriesID').append($('<option>Make Selection</option>'));
$.each(result, function (i, item) {
var optionData = '<option value="' + item.Value + '">' + item.Text + '</option>';
$(optionData).appendTo('#SeriesID')
});
}
});
});
});
And here is the updated Controller:
public JsonResult GetSeries(string productLine)
{
db.Database.ExecuteSqlCommand("SET TRANSACTION ISOLATION LEVEL READ UNCOMMITTED;");
List<SelectListItem> series = (from s in db.Series
where s.ProductLineName == productLine
select new SelectListItem { Value = s.SeriesName, Text = s.SeriesName }).Distinct().ToList();
return Json(series, JsonRequestBehavior.AllowGet);
}
public List<ProductLine> GetProductLines()
{
db.Database.ExecuteSqlCommand("SET TRANSACTION ISOLATION LEVEL READ UNCOMMITTED;");
var productLineList = (from p in db.ProductLines
select p).ToList();
return productLineList;
}
public ActionResult RequestForm()
{
var productLineList = new List<SelectListItem>();
foreach (var item in GetProductLines())
{
productLineList.Add(new SelectListItem { Text = item.ProductlineName, Value = item.ProductlineName });
}
db.Database.ExecuteSqlCommand("SET TRANSACTION ISOLATION LEVEL READ UNCOMMITTED;");
var requestViewModel = new RequestViewModel { SMRMaster = new SMRMaster(), Engineers = GetEngineers(), ProductLines = productLineList };
return View(requestViewModel);
}
I have an application dealing with Donations from Houses for a Church. I would like it so when a donation comes in to the Church, someone will type in a textbox the address but as there will be a lot of homes, I want an autocomplete box to make it easier.
Here are my models:
public class Donation
{
[Key]
public int DonationId { get; set; }
public string TypeOfDonation { get; set; }
public decimal Amount { get; set; }
[ForeignKey("Church")]
public int ChurchId { get; set; }
[ForeignKey("House")]
public int HouseId{ get; set; }
public virtual Church Church { get; set; }
public virtual House House { get; set; }
}
public class House
{
[Key]
public int HouseNumber { get; set; }
public string AddressLine1 { get; set; }
public string AddressLine2 { get; set; }
public string AddressLine3 { get; set; }
}
I think I am doing something wrong in my controller method:
public JsonResult GetAddress(string term)
{
var items = db.Houses
.Where(x => x.AddressLine1.Contains(term))
.Select(x => new { Label = x.HouseNumber, Value = x.AddressLine1 })
.Take(10);
return Json(items, JsonRequestBehavior.AllowGet);
}
Or my jQuery:
<div class="form-group">
#Html.LabelFor(model => model.House.HouseNumber, "Address", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.House.HouseNumber, new { id = "HouseNumber" })
#Html.ValidationMessageFor(model => model.House.HouseNumber, "", new { #class = "text-danger" })
</div>
</div>
$('#Address').autocomplete({
source: function(request, response) {
$.get('#Url.Action("GetAddress", "DonationsController")',
{ term: request.term },
function(data) {
response($.map(data, function (item) {
return {
label: item.Label,
value: item.Value
}
}));
});
},
minLength: 2
})
Can anyone point me in the right direction?
EDIT:
Your screenshot shows the problem.
When creating URLs in MVC, you should not include the word "Controller", even though the controller class is called DonationsController
Change it to
$.get('#Url.Action("GetAddress", "Donations")',
I just created an autocomplete with JQuery UI this example could help.
jQuery
$("#txtCode").autocomplete({
source: function (request, response) {
$.ajax({
url: '#Url.Action("ProductAutocompleteByCode", "Products")',
dataType: 'json',
data: {
codigo: $("#txtCode").val()
},
success: function (data) {
var parsedData = $.map(data, function (n, i) {
return { label: n.Code, value: n.Id };
});
response(parsedData);
}
});
}
});
Controller
public JsonResult ProductAutocompleteByCode(string code)
{
var products = Json(db.Products.Where(p => p.code.Contains(code)).Select(p => new ProductDTO { Id = p.id, Code = p.code, Name = p.name, Price= p.price }));
return Json(products.Data, JsonRequestBehavior.AllowGet);
}
I have a problem with using #Html.DropDownListFor element.
What i have:
Model 'DatabaseModel':
public class DirectionEntity
{
public string Id { get; set; }
public string DirectionName { get; set; }
}
public class ViewModel
{
public int SelectedDirectionID { get; set; }
public List<DirectionEntity> DirectionList { get; set; }
}
Model 'DataFactory':
public class DataFactory
{
public static ViewModel Refresh()
{
using (var db = new MyDatabase())
{
return new ViewModel()
{
DirectionList = db.Directions.Select(_ => new { _.Id, _.DirectionName })
.ToList()
.Select(_ => new DirectionEntity() { Id = _.Id.ToString(), DirectionName = _.DirectionName })
.ToList(),
};
}
}
}
Controller:
public System.Web.Mvc.ActionResult AddNewDocument()
{
var db = DataFactory.Refresh();
return View(db);
}
[HttpPost]
public System.Web.Mvc.ActionResult AddNewEntry(ViewModel m)
{
m = DataFactory.Save(m);
ModelState.Clear();
return View(<some view>);
}
View:
#using (Html.BeginForm())
{
#Html.DropDownListFor(m => m.SelectedDirectionID, new SelectList(Model.DirectionList.Select(x => new SelectListItem { Value = x.Id.ToString(), Text = x.DirectionName }), "Value", "Text"), new { #class = "Duration", required = "required" })
<button type="submit" class="btn btn-default SaveAll">Save</button>
}
The question:
How to handle 'SelectedDirectionID' value, after user selected some position on dropdownlist, but not yet sent the request to the server using a POST-method.
See what the id of your dropdown is and then you can subscribe to the change event on the client side. You can do this using jQuery.
$("#idOfYourDropDown").change(function () {
// Do whatever you need to do here
// Here are some ways you can get certain things
var end = this.value;
var selectedText = $(this).find("option:selected").text();
var selectedValue = $(this).val();
alert("Selected Text: " + selectedText + " Value: " + selectedValue);
});
Also you should see my answer here on why you should not return a view from a POST action the way you are.
In this case you have to use Jquery. As per your view id for your drop down is 'SelectedDirectionID';
Your Js:
$(document).ready(function () {
var selectedValue = $('#SelectedDirectionID').val();
var selectedText = $("#SelectedDirectionID option:selected").text();
});
Or Inside drop down change event.
$('#SelectedDirectionID').change(function () {
var selectedValue = $(this).val();
var selectedText = $(this).find("option:selected").text();
});
I have two cascading dropdownlists which I would like to bind based on my knockout.js. Essentially what I want to achieve is two dropdownlist that populate from a database for each branch of the company and one which will populate the various departments based on the branch that was selected in the other dropdownlist. I am having problems converting to a list and then binding to dropdownlist.
function CompanyViewModel() {
var self = this;
self.DepartmentName = ko.observable(" ")
self.Department =ko.observableArray([]);
self.DepartmentName = ko.Observable([]);
self.Branch =ko.observableArray([]);
self.BranchName = ko.Observable([])
}
CompanyViewModel = new CompanyViewModel();
ko.applyBindings(CompanyViewModel);
function populateCompanyBranches() {
$.ajax({
type: "GET",
$.when(getSecureData("/api/Branches/" ))
.done(function (Branches) {
Branch.unshift({ "BranchID": 0, "department name": "Please select a Branch." });
CompanyViewModel.Branch(Branch);
})
.fail(function (message) {
$.msgbox(message);
});
};
function populateBranchDepartments() {
$("#Branches").change(function () {
var BranchID = $("#Branches").val();
$.ajax({
type: "GET",
$.when(getSecureData("/api/Departments/GetDepartment" + BranchID))
.done(function (Department) {
CompanyDepartment.unshift({ "CompanyID": 0, "departmentName": "Please select a department" });
CompanyViewModel.Department(Department);
})
.fail(function (message) {
$.msgbox(message);
});
};
}
View
Branch Name: <select data-bind="options: CompanyViewModel. CompanyViewModel, optionsCaption: 'Select a Branch',
optionsValue: function (item) { return item.BranchId; },
optionsText: function (item) { return item.BranchName; }, value: Branch,
valueUpdate: 'change'" id="Branches" name="Branch"></select>
<br />
Deaprtment Name: <select data-bind="options: CompanyViewModel.Department, optionsCaption: 'Choose Department...',
optionsValue: function (item) { return item.DepartmentId; },
optionsText: function (item) { return item.DepartmentName; }, value: DepartmentName,
valueUpdate: 'change'" id="Department" name="Department"></select>
<br />
</div>
public class CompanyDTO
{
public int BranchId { get; set; }
public string BranchName { get; set;}
public int DepartmentId { get; set; }
public string DepartmentName { get; set;}
}
public static class CompanyBranchList
{
public static CompanyDTO DepartmentToBranchDTO(listing e)
{
return new CompanyDTO
{
BranchId = e.BranchId,
BranchName = e.BranchName
DepartmentId = e.DepartmentId
DepartmentName = e.DepartmentName
};
}
public static List<CompanyDTO> ListBranchToDepartmentDTO(List<listing> e)
{
List<CompanyDTO> lstCompanyDTO= e.Select(
lstng => new CompanyDTO()
{
BranchId = lsting.BranchId,
BranchName = lsting.BranchName
DepartmentId = lsting.DepartmentId
DepartmentName = lsting.DepartmentName
}).ToList();
return ListBranchToDepartmentDTO;
}
Repository
public class CompanyRepository : IComapnyRepository
{
public List<CompanyDTO> GetBranches()
{
using (TestDBEntities dbcontext1 = new TestDBEntities())
{
var lstCountries = from r in dbcontext1.Branches select r;
List<CompanyDTO> lst = new List<CompanyDTO>();
lst = CompanyBranchList.DepartmentToBranchDTO(lstCompanyDTO.ToList());
return lst;
}
}
Controller
public List<CompanyDTO> GetDepartments(int deparmentId)
{
using (TestDBEntities dbcontext = new TestDBEntities())
{
var lstDep = dbcontext.States.Where(b => b.DepartmentID == departmentId).ToList();
List<CompanyDTO> list = new List<CompanyDTO>();
list = CompanyBranchList.ListBranchToDepartmentDTO(lstDep.ToList());
return list;
}
}
You achieve cascading dropdown lists by doing this:
// the view model bound to the view
var vm = {
branches: ko.observableArray([]),
selectedBranch: ko.observable(),
departments: ko.observableArray([]),
selectedDepartment: ko.observable()
}
// subscription to listen to changes to the selected branch
vm.selectedBranch.subscribe(function(current, last){
if(!current) return; // do nothing if nothing is selected
if(current == last) return; // do nothing if nothing changed
$.ajax({
type: 'GET',
url: '/api/Departments/GetDepartment/' + current.BranchId,
contentType: 'application/json'
})
.then(function(result){
vm.departments(result)
});
}
// load the list of branches
$.ajax({
type: 'GET',
url: '/api/Branches',
contentType: 'application/json'
})
.then(function(result){
vm.branches(result); // populate branch observable array
ko.applyBindings(vm);// bind view model to view
});
I have an error on my project in the index view and partial view on asp.net mvc here's my code:
Controller
public ActionResult Index()
{
Customers _model = new Customers();
var custcategoryList = db.CustomerLists.ToList();
_model.Customer_List = (from d in custcategoryList
select new SelectListItem
{
Value = d.CustID.ToString(),
Text = d.CustCategory
}).ToList();
var qq = (from r in db.CustStatus
join a in db.CustomerLists on r.CustID equals a.CustID
join b in db.SalesPersons on a.SalesRepID equals b.SalesRepID
join c in db.WebStatus on r.WebStatID equals c.WebStatID
join d in db.OrderStatus on r.OrderStatID equals d.OrderStatID
join e in db.SalesPersons on r.AssignedTo equals e.SalesRepID
select new
{
custID = a.CustID,
customername = a.Customer,
CUstcategory = a.CustCategory,
custstatID = r.CustStatID,
region = a.Region,
}).ToList();
_model.Customer_grid = qq;
return View("CustomerView", _model);
}
public ActionResult Filter(string CustCategory)
{
int? CustID = Convert.ToInt32(CustCategory);
var qq = (from a in db.CustomerLists
join d in db.CustStatus on a.CustID equals d.CustID
//where e.Department_id == department_id
select new Customers
{
CustID=a.CustID,
Customer=a.Customer,
CustCategory=a.CustCategory,
CustStatID=d.CustStatID
}).ToList();
return PartialView("CustomerView", qq);
}
}
Index View
#model Calling_List.Models.Customers
<tr>
<td>
#*#Html.DropDownList("CustID",null, "select",Model.Customer_List)*#
#Html.DropDownList("lstdepartment", Model.Customer_List, new {#class="form-control"})
</td>
</tr>
<tr>
<td>
<div id="CustomerViewGrid">
#Html.Partial("CustomerView", Model.Customer_grid)
#*#Html.ViewBag("Partial1",new Calling_List.Models.Customers());*#
}
</div>
</td>
</tr>
<script type="text/javascript">
$('#lstdepartment').change(function (e) {
e.preventDefault();
var url = '#Url.Action("Filter")';
$.get(url, { depart: $(this).val() }, function (result) {
debugger;
$('#CustomerViewGrid').html(result);
});
});
Partial View
#model List<Calling_List.Models.Customers>
<div id="gridposition" style="overflow: scroll; height: 300px; overflow-x: hidden;">
#{
var grid1 = new WebGrid(source: Model, canPage: true, rowsPerPage: 5, ajaxUpdateContainerId: "gridContent");
#grid1.GetHtml(mode: WebGridPagerModes.All, tableStyle: "webGrid",
headerStyle: "header",
alternatingRowStyle: "alt",
selectedRowStyle: "select",
rowStyle: "description",
htmlAttributes: new { id = "positionGrid" },
fillEmptyRows: false,
columns: grid1.Columns(
grid1.Column("CustID", header: "CustomerID"),
grid1.Column("Customer", header: "Customername"),
grid1.Column("Region", header: "Region"),
grid1.Column("CustCategory", header: "CustomerCategory"),
grid1.Column("CustStatID", header: "CustStatID")))
}
View Model
public class Customers
{
public List<SelectListItem> Customer_List { get; set; }
public List<CustomerList> Customer_grid { get; set; }
public int CustID { get; set; }
public string Customer { get; set; }
public string CustCategory { get; set; }
public string Branch { get; set; }
public string Region { get; set; }
public string ContactName { get; set; }
public int CustStatID { get; set; }
}
i want to filter the Customer's Details based on the selected dropdownlist binded with "custcategory " names and display the details on the webgrid on the partial view.It does display the filtering parameter "custCategory" on the dropdown but it does not display the customers details.
Change your JavaScript like below.
I change the parameter as CustCategory instead of depart that you used.
Look care Full on the 4th line on my code and your code
$('#lstdepartment').change(function (e) {
e.preventDefault();
var url = '#Url.Action("Filter")';
$.get(url, { CustCategory: $(this).val() }, function (result) {
debugger;
$('#CustomerViewGrid').html(result);
});
});
by change that parameter name it will aromatically takes you to the particular page.