I have invested my few hours figuring out how to work with dropdownlists..
finally I have a working piece of code.. but I do not know how it works.
http://www.youtube.com/watch?v=79aYSOcmpV8&list=PL6n9fhu94yhVm6S8I2xd6nYz2ZORd7X2v
In Controller.
ViewBag.Breed = new SelectList(db.Breeds, "breed", "breed");
In view
#Html.DropDownList("Breed", "Select Breed")
How does it works??
ViewBag.Breed = new SelectList(db.Breeds, "breed", "breed");
The first parameter here is the data source of your dropdown list.
For the second parameter, you can pass it a property of your model, then it would become the value of your drop down.
The third parameter is the display text of your drop down list.
#Html.DropDownList("Breed", "Select Breed")
The first parameter is the name of your SelectList ViewBag. The second one is the default text for your dropdown list when nothing is selected yet.
Related
This is my first dropdown list in my view.:
And this is my controller:
My problem is that whenever I click the available dropdown in my first dropdown list it should populate the data available on the one that I have clicked on the second dropdown list. But It has an error it will not proceed to the next line which the JavaSerializer. How can I fix my code like it will work. I don't know where is the problem is, whether in the ajax? or in my controller?
Please change the select as jQuery("#availability option:selected").val();
- Change the ajax type as GET method in client side
- JavascriptSerializer not required
- remove [httppost] tag from code behind
- check where any error is there in browser console.
and change $('#availability').push("" + this.name+ "");
I was wondering if anyone has ever experienced a problem like I'm currently having.
Controller:
_OpsAdminViewModel.userRoleID = _OpsAdminViewModel.retrieveHighestUserRoleGuidFromUserID(id.Value);
_OpsAdminViewModel.ActiveRoleList = _OpsAdminViewModel.GetActiveRoles();
_OpsAdminViewModel.UserRoleSelectList = new SelectList(_OpsAdminViewModel.ActiveRoleList, "RoleID", "RoleName", _OpsAdminViewModel.userRoleID);
View:
#Html.DropDownListFor(model=>model.selectedRoleID, Model.UserRoleSelectList)
Now, here is where it gets very odd. When I place a break on the Controller's Return line or the View's DropDownListFor line, I literally see that the value I want to have selected should be selected. Expanding the UserRoleSelectList object, reveals the correct "SelectedValue" ID and in the "Results View", the correct value has a "True" for selected. However, when the page is rendered, the pull-down menu is displaying the 0-position element of the pull-down menu.
Model binding works by binding to the value of your property. When your use DropDownListFor() the method internally builds a new IEnumerable<SelectListItem> and sets the Selected property based on the value of your property. In your case, the value of selectedRoleID does not match the value of one of the options so the first option is selected (because something has to be).
Set the value of selectedRoleID in the GET method before you pass the model to the view
model.selectedRoleID = _OpsAdminViewModel.userRoleID;
return View(model);
and delete the last parameter in your SelectList constructor since its pointless.
I have a dropdownlist inside a form and a div. I want that, when i select a value from the dropdownlist, it shows in the div.
I've succeeded in this, but the problem is that the following selections ,after first one, are deleting previous results from the div.
public ActionResult SelectStudWhoWantReport(int StudentId = 0)
{
IEnumerable<SelectListItem> items = db.Students.Select(c => new SelectListItem
{
Value = SqlFunctions.StringConvert((double)c.StudentID).Trim(),
Text = c.StudentName
});
ViewBag.StudentId = items;
Student WhomakeReport = db.Students.Find(StudentId);
ViewBag.Name = WhomakeReport.StudentName;
return View();
}
viewbag is the value that apear in div, When I select that how can I append the value of the second select with the first select to show the two in the div.
I think you are using a bad approach to solve your problem.
You are getting the result of the selection on your controller class, through a form submission I supose, and later send it to your View.
The problem is that when you call the controller your page is reloaded, thus you loose the previous info. There are different ways in which you'd be able to store previous results and build them on the View.
However, I think it's better that I explain you a more correct approach to solve this problem.
You should have a dropdownlist component on your View, which you load through your controller. I supose you already have this.
When the selection is made, instead of submitting the form, make an AJAX call to a method in the server which makes what you're currently doing in your controller (get the result depending on the selected id) and, instead of returning an ActionResult, just return the value you want.
When the AJAX callback returns, you'll have the result on your client code, so you just have to append it after previous results.
This approach not only is better from a MVC pattern point of view, it's also easier to implement and will allow your users to select elements in the dropdownlist and see the results without having to reload the whole page.
I am making a web application with ASP MVC4 application. I am also using the TwitterBootstrapMVC api. I am trying to make a view where I have a drop down list at the top along with a text-box. Below, is a table of people. The drop down list will contain the column headers of the table. Once the user selects a column in the drop down list, they can then type into the text-box to narrow the results in the list of items in the table below.
For example. The table has many people in it. The user then selects "Last Name" in the drop down list. He then proceeds to type Smith into the text-box. As he types every character, the table's results are narrowed by only displaying people with a "s" in their last name. When the "m" is typed into the text-box, the list of people are narrowed to only show people with "sm" in their last name etc.
I know how to make the table, text-box, etc. I do not know how to make the results in the table change as I type in the text-box without reloading the page.
You can use jQuery's ajax and an action method that returns a partial view containing the searched data and your html table strucutre. Here's a short sample:
public ActionResult Search(string searchTerm){
var model = db.Users.Where(u => u.LastName.contains(searchTerm));
return PartialView("_Students", model);
}
Script
$("#textBoxId").on("keyup change", function() {
var searchTerm = $(this).val();
$.get("/Controller/Search", { searchTerm: searchTerm }, function(data) {
$("#tableId").html(data);
});
});
You just need to add another parameter to your action method for checking what was selected in the dropdown.
Read this for more: https://api.jquery.com/jQuery.get/
What you're trying to implement is an autocomplete textbox. jQuery has a nice one. It is fairly simple to implement.
Or you can try out the ASP.NET AJAX Control toolkit. I haven't tried this one myself, so I'm not sure how simple/friendly it is.
I have a simple drop down list in my view:
#Html.DropDownList("ddlAppIds", new SelectList(ViewBag.AppIds))
And right below it, I have an ActionLink. I want to send the selected value of the above drop down list as a query string parameter inside this ActionLink:
#Html.ActionLink("Next", "Index", new { id = selectedAppId })
selectedAppId is just for demonstration purposes of what I want to hopefully accomplish. How can I pass the drop down list's selected value as a query string parameter in my view?
Unless you happen to already have a selected value at page load, MVC has no way of knowing the user selects without a postback. Once the page has been sent to the client, MVC is done until the next request: your Razor view has already been rendered and no changes will be made to anything in the DOM without you manually doing it via JavaScript.
If you want to change the link based on the selected value, then you will need to write JavaScript to make that happen. Since you're using MVC, I'm going to assume jQuery support, because it's included by default:
$(document).ready(function () {
$('#ddlAppIds').on('change', function () {
var selectedValue = $(this).val();
$('#IdForYourLink').prop('href', '/url/to/next/' + selectedValue);
});
});
You'll need to figure out on your own the best way to replace the selected value. You might prefer to do some sort of regex on the current link, only include a partial link as the href to begin with, etc.