I had this working at one point but I'm not sure what is breaking it now. Objects and object properties are not populating the drop down. I can get object properties to show up if I pass just an array of strings of one of the properties in my autocomplete controller but I would like to pass the whole objects to the autocomplete dropdown and style a template from there. I have been changing DataTextField and Template to simplify for this example and testing purposes but hasn't granted any success yet. Also now I am returning an array of Objects from my Parts_Read method and made sure that AllowGet was enabled. Do you notice anything I am missing?
View
#(Html.Kendo().AutoComplete()
.Name("parts_results")
.DataTextField("Name")
.Template("#= VendorPartCode # | #= Name # | #= UpcCode #")
.HeaderTemplate("<div class=\"dropdown-header k-widget k-header\">" +
"<span>Matching Parts</span>" +
"</div>")
.FooterTemplate("Total <strong>#: instance.dataSource.total() #</strong> items found")
.Filter("contains")
.MinLength(3)
.HtmlAttributes(new { style = "width:100%", #class = "form-control"})
.Height(520)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Parts_Read", "AutoComplete")
.Data("onAdditionalData");
})
.ServerFiltering(true);
})
)
Script
function onAdditionalData() {
return {
text: $("#parts_results").val(),
supplier: $("#part_supplier").val()
};
}
Autocomplete controller
public JsonResult Parts_Read(string text)
{
int supplier = int.Parse(Request.Params["supplier"]);
var search = Request.Params["text"];
if (!string.IsNullOrEmpty(text) && supplier >0)
{
dbContext db = new dbContext();
var data = db.dbParts.Where(x => x.PartSupplierCompanyId == supplier && (x.PartName.ToLower().Contains(search.ToLower()) || x.PartCode.ToLower().Contains(search.ToLower()))).Select(p => new TimsPart(p,p.Company)).ToArray();
return Json ( data, JsonRequestBehavior.AllowGet );
}
else
{
return new JsonResult { Data = new List<TimsPart>(), JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
}
I have a list:
public IList<SelectListItem> ToCountryList { get; set; }
I have this line in the razor view:
#Html.DropDownListFor(m => m.Filter.ToCountryId, Model.ToCountryList, string.Empty, new { style = "min-width: 100px; width:180px" })
Now I want jQuery to select ToCountryId from the selected value of the dropdownlist.
I need the id of the record. For example - I have a pair: ID-NAME 5-USA. So I need to retrieve 5 (int)
How should I get the id?
This gives nothing:
$("select[name='Filter.ToCountryId'] option:selected").val()
HTML from browser (not sure how to publish - so plain text):
..select starts
select id="Filter_ToCountryId" name="Filter.ToCountryId" style="min-width: 100px; width:180px"
option tags with countries
..select ends
Just give your dropdown a deterministic id:
#Html.DropDownListFor(
m => m.Filter.ToCountryId,
Model.ToCountryList,
string.Empty,
new { id = "myddl", style = "min-width: 100px; width:180px" }
)
and then you could easily get the selected value using an id selector:
$('#myddl').val()
You should take value from the select itself, not from the option:
$("select[name='Filter.ToCountryId']").val()
I am using MVC ASP to create a series of dropdownlist's that are populated by SQL stored procedures. However, each successive dropdownlist needs to be populated by passing the selection of the previous list as a parameter to the procedure call. How can I POST the selection of the list created using:
#Html.DropDownListFor(x => x.environmentName, new SelectList(Model.environmentName))
?
I was attempting to save it to a modelView and then pass the view to the controller again, but I feel this is a poor way to go about it.
Here is a JQuery solution I wrote for 3 cascading drop-downs with ajax callbacks to the controller to fill the next list based on the previous choices. This might get you going in the right direction.
Select: <select id="category" style="width: 150px">
<option></option>
#foreach (string cat in ViewBag.Categories)
{
<option>#cat</option>
}
</select><span id="errorforcategory" style="color: red"></span>
<select id="subcategory1" disabled="disabled" style="width: 150px"><option></option> </select>
<select id="subcategory2" disabled="disabled" style="width: 150px"><option></option></select>
<script type="text/javascript">
$("#category").change(function () {
$("#subcategory1").load('#Url.Action("GetSubCategory")' + "?category=" + $("#category").val());
$('#subcategory2').empty();
$('#subcategory2').append($("<option></option>"));
$('#subcategory2').attr('disabled', 'disabled');
}).ajaxStop(function () {
if ($('#subcategory1 option').size() > 2) {
$('#subcategory1').attr('disabled', '');
} else {
$('#subcategory1').attr('disabled', 'disabled');
}
});
$("#subcategory1").change(function() {
if ($("#subcategory1").val().trim()) {
$("#subcategory2").load('#Url.Action("GetSubCategory")' + "?category=" + $("#category").val() + "&subcategory=" + $("#subcategory1").val());
} else {
$('#subcategory2').empty();
$('#subcategory2').attr('disabled', 'disabled');
}
}).ajaxStop(function() {
if ($('#subcategory2 option').size() > 2) {
$('#subcategory2').attr('disabled', '');
} else {
$('#subcategory2').attr('disabled', 'disabled');
}
});
And then in your controller you can call your Stored Proc using whatever method you like then build out your result option text.
public string GetSubCategory(string category, string subcategory)
{
string returnval = "<option></option>";
if (!string.IsNullOrEmpty(subcategory))
{
foreach (
var cat in
db.Categories.Where(c => c.category1 == category && c.subcategory1 == subcategory)
.Select(c => c.subcategory2)
.Distinct())
{
if (!string.IsNullOrEmpty(cat.Trim()))
returnval += "<option>" + cat + "</option>";
}
return returnval;
}
return Enumerable.Aggregate(db.Categories.Where(c => c.category1 == category).Select(c => c.subcategory1).Distinct().Where(cat => !string.IsNullOrEmpty(cat.Trim())), returnval, (current, cat) => current + ("<option>" + cat + "</option>"));
}
I have a WebGrid full of lots of products, and I want to be able to edit the quantity for each row in the web grid and update the Cart table in the database when the textChanged event is raised on the corresponding textbox.
But is this even possible with WebGrid? I have not found anything that would suggest it's possible. I would really appreciate any help at all.
It's possible to attach a change event to the textboxes.
I set my grid up like the following:
#grid.GetHtml(
htmlAttributes: new { cellspacing = "2px", cellpadding = "2px" },
columns: grid.Columns(
grid.Column("Id"),
grid.Column("Description"),
grid.Column("PacketQuantity"),
grid.Column("ThickCover", format: (item) => {
var p = item.Value as MvcApplication1.Models.Product;
return Html.TextBox("ThickCover", p.ThickCover, new { #class = "thickCoverInput", #data_value = p.Id });
}),
grid.Column("ThinCover", format: (item) => {
var p = item.Value as MvcApplication1.Models.Product;
return Html.TextBox("ThickCover", p.ThinCover);
})
)
)
Then I had the following script to wire up the changes:
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script>
$(document).ready(function () {
$('.thickCoverInput').change(function(event) {
alert(event.currentTarget.attributes["data-value"].value);
alert(event.currentTarget.value);
// Here you can post data to an action to update your table
});
});
</script>
When I changed the value in the textbox, I was able to get two alerts. One for the Id of the Product and the other is the new value.
Hope this is what you were looking for.
I have 3 dropdownlist i wanna make 3 dropdownlist with cascade. I am using LinqSql for database..
I have 3 tables Product(id,name), Design(id,master_id,name), Model(id,design_id,name)
master_id bound to Product(id), design_id bound to Design(id)..
I want to create one dropdown which is gonna show Products and than when i choose a product its gonna make Design dropdown enabled else it will stay disabled.. also here is the tricky part that i couldnt solve and i need great explanation in here creating 3rd dropdown which is gonna be disabled normally till a Design is chosen.
Each of them gonna populate a lower dropdownlist bound to them.Its like;
Product gonna enable and populate Design,
Design gonna enable and populate Model.
I can do it with 2 dropdowns but when it comes to 3 dropdown i stuck really badly im on (brain-freeze)..
I already checked the other questions couldnt find any solution for my self. As i said im using LinqSql i need a solution about 3 cascadingdropdown list for this type of data reach.
thanks already for anything u can do! and if u can explain Model-View-Controller partials and the parameters and why you use them that would be awesome. Iam kinda beginner at this MVC3.
I would approach the problem something like this:
First, in the controller, we'll set up have the following methods:
public JsonResult GetDesignsForProduct(int productId)
{
// Instantiate our context and do whatever goo we need to select the objects we want
using (MyDatabaseContext ctx = new MyDatabaseContext())
{
return Json(ctx.Designs.Where(d => d.master_id == productId).ToList(), JsonRequestBehavior.AllowGet);
}
}
public JsonResult GetModelsForDesign(int designId)
{
// Instantiate our context and do whatever goo we need to select the objects we want
using (MyDatabaseContext ctx = new MyDatabaseContext())
{
return Json(ctx.Models.Where(d => d.design_id == designId).ToList(), JsonRequestBehavior.AllowGet);
}
}
I've turned on "get" here; if your data contains sensitive information - user names/e-mail addresses, other proprietary or legally protected data, etc. - you can change this to only allow "post", and modify your Javascript accordingly. See Phil Haack's article.
Also, if you expect this data to change frequently, these methods will cache it by default according to your application's cache settings. You can add an OutputCache attribute on the method to alter this behavior.
Then, in the view you'll have some AJAX plumbing, something like this:
function LoadDesigns() {
// Get the currently-selected value in our Product dropdown
var prod = $("#Product").val();
// Call our controller method and process the list of Design objects
$.getJSON('#Url.Content("~/ControllerName/GetDesignsForProduct")', { productId: prod },
function (designs) {
$("#Design").empty();
$.each(designs, function (i, c) {
$("#Design").append(
$('<option></option>').val(c.id).html(c.name)
);
});
});
}
function LoadModels() {
// Get the currently-selected value in our Design dropdown
var des = $("#Design").val();
// Call our controller method and process the list of Model objects
$.getJSON('#Url.Content("~/ControllerName/GetModelsForDesign")', { designId: des },
function (models) {
$("#Model").empty();
$.each(models, function (i, c) {
$("#Model").append(
$('<option></option>').val(c.id).html(c.name)
);
});
});
}
Finally, define all three drop-downs as follows:
#Html.DropDownList("Product", productSelectList, new { onchange = "LoadDesigns()" })
#Html.DropDownList("Design", null, new { onchange = "LoadModels()" })
#Html.DropDownList("Model")
Don't forget that the HTML helpers are really just shortcuts to generate the underlying HTML, and in Razor you frequently just go straight to HTML instead of messing with the helpers. So you could just as easily write these as:
<select id="Product" onchange="LoadDesigns()">
#foreach (var prod in products) {
<option value="#prod.id">#prod.name</option>
}
</select>
<select id="Design" onchange="LoadModels()"></select>
<select id="Model"></select>
Forget to set my finished work.. People may wanna see how it happens..
Here is my:
View + Jquery
$(function () {
$("select#Design").attr('disabled', 'true');
$("select#Model").attr('disabled', 'true');
$("select#Product").click(function () {
var prod = $("select#Product option:selected").val();
if (prod == "" || prod == 0) {
$("select#Design").attr('disabled', 'true');
$("select#Model").attr('disabled', 'true');
} else {
$.getJSON('#Url.Content("~/Admin/GetDesigns/")', { productId: prod }, function (data) {
$("select#Design").empty();
$("select#Model").empty();
$.each(data, function (i, c) {
$('select#Design').append('<option value="' + c.Value + '">' + c.Text + '</option>');
})
$("select#Design").removeAttr('disabled');
$("select#Design option:first").attr('selected', 'selected');
var des = $("select#Design option:selected").val();
if (des == "" || des == 0) {
$("select#Model").attr('disabled', 'true');
} else {
$.getJSON('#Url.Content("~/Admin/GetModels/")', { designId: des }, function (data) {
$("select#Model").empty();
$.each(data, function (i, c) {
$('select#Model').append('<option value="' + c.Value + '">' + c.Text + '</option>');
})
$("select#Model").removeAttr('disabled');
$("select#Model option:first").attr('selected', 'selected');
})
}
})
}
})
})
reason i use Jquery this way to fill all dropdowns and select first elements as default selection! When i choose an element from first dropdown the other two dropdowns starts to fill themselves and select their first element as default selection.. same code can be used for other dropdowns click function just like this:
$("select#Design").click(function () {
var des = $("select#Design option:selected").val();
if (des == "" || des == 0) {
$("select#Model").attr('disabled', 'true');
} else {
$.getJSON('#Url.Content("~/Admin/GetModels/")', { designId: des }, function (data) {
$("select#Model").empty();
$.each(data, function (i, c) {
$('select#Model').append('<option value="' + c.Value + '">' + c.Text + '</option>');
})
$("select#Model").removeAttr('disabled');
$("select#Model option:first").attr('selected', 'selected');
})
}
});
View
#using (Html.BeginForm("Index", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<table>
<tr>
<td style="background-color:#e8eef4;" rowspan="3">
</td>
<td style="width:190px; background-color:#e8eef4;">
#Html.DropDownList("Product", (SelectList)ViewData["ProductList"], "Please Select Product", new { style = "width:190px; padding:4px; margin:4px;" })
</td>
<td rowspan="3" style="width:400;">
</td>
<td style="background-color:#e8eef4;">
</td>
<td style="background-color:#e8eef4;" rowspan="3">
</td>
</tr>
<tr>
<td style="background-color:#e8eef4;">
<select id="Design" style="width:190px; padding:4px; margin:4px;">
<option label="Please Select Design" selected="selected"></option>
</select>
</td>
<td style="background-color:#e8eef4;">
</td>
</tr>
<tr>
<td style="background-color:#e8eef4;">
<select id="Model" style=" width:190px; padding:4px; margin:4px;">
<option label="Please Select Model"></option>
</select>
</td>
<td style="background-color:#e8eef4;">
</td>
</tr>
</table>
}
Just cause im using linqtosql and im too lazy to make a repository..
This is my CONTROLLER
public class AdminController : Controller
{
public linqVipDataContext db = new linqVipDataContext();
//
// GET: /Admin/
public ActionResult Index()
{
IEnumerable<SelectListItem> ProductItems = db.Products.AsEnumerable().Select(c => new SelectListItem()
{
Text = c.name,
Value = c.id.ToString(),
Selected = true,
});
SelectList prod = new SelectList(ProductItems, "Value", "Text");
ViewBag.ProductList = prod;
return View();
}
//
//Fill the Design List..
public JsonResult GetDesigns(int productId)
{
/*var data = dbs.Designs.Where(d => d.master_id == productId).ToList();*/
IEnumerable<SelectListItem> DesignItems = db.Designs.Where(c => c.master_id == productId).AsEnumerable().Select(c => new SelectListItem()
{
Text = c.name,
Value = c.id.ToString()
});
SelectList des = new SelectList(DesignItems, "Value", "Text");
return Json(des, JsonRequestBehavior.AllowGet);
}
//
//Fill the Model List..
public JsonResult GetModels(int designId)
{
/*This code down here! Doesnt work and says it's type is unknown*/
/*var data = dbs.Models.Where(d => d.design_id == designId).ToList();*/
/*For that reason im using this code*/
IEnumerable<SelectListItem> ModelItems = db.Models.Where(d => d.design_id == designId).AsEnumerable().Select(c => new SelectListItem()
{
Text = c.name,
Value = c.id.ToString()
});
SelectList mods= new SelectList(ModelItems, "Value", "Text");
return Json(mods, JsonRequestBehavior.AllowGet);
}
Json requires Value and Text 2 param seperated for creating a selectlist option.. So i must return my value that way..
I posted this cause i found some breakdowns at ur code, ty again for showing me this solution it gave me the idea and allowed me to solve all problems so this is the fully working code.. Ty again. Hope its usefull.