I have an MVC view that has a model with a IEnumerable<SelectListItem> which populates a #Html.DropDownList (Form select).
I want to write code so that when a item in the drop down list is selected, it will populate another listbox (also a form select) with values from the server.
Should I use AJAX to get a seperate partial view that contains the listbox with the values on each click of the dropdownlist? Or should I generate a listbox on load and then use WebAPI to just get the data on each click?
It seems like a simple problem but I'm trying to figure out my models and views and the best approach.
Populate your dropdownlist
Create an empty list box.
Have a javascript function that fires on dropdown list change event and do ajax call to the action method that returns the json result.
Bind the json data to the list box on success.
I would rather go with an Ajax since other dropdown lists are dependent on your first dropdown.
and in your controller, just have a JsonResult, something like this:
public JSonResult getDropdownItems(your parameters)
{
//do some iteration in your context
return Json( /*list or iEnumerable*/, Json.AllowGet);
}
Related
I pass a list of a specific object type from the controller to a partial view as model for the view. It is displayed in a table with each row containing minimum information about each object from the model. Each row has a button, which when clicked, launches a bootstrap modal and displays full details of the object. When the button is clicked, I want to be able to get the corresponding item from the list of items in the model and display all it's properties.
Assume the following are the types in my model.
List<T> ObjectList - Model
T Object - Individual object
How can I pass the ID of the object on button click and retrieve the item from the list of items in the model without querying the database again for the details of the object?
You can use custom attribute, like put attribute itemid and pass button object to method as below
<button type="button" itemid = '#model.id' onclick="showModal(this)">Show Details!</button>
and in js, while writing definitation for that method, get id by using attr() of JQuery.
function showModal(obj) {
var id = $(obj).attr('itemid');
// your code here
}
I passed entire object to the method, you can pass just id, but passing object will help you when you pass other details too.
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.
In my asp.net MVC site, i have a view with a empty grid and some textboxes, when the user fills those textboxes i need to get those values and make a new row for the grid.
How can i do that?
Thanks
ps(using Razor)
Take a look at the online GridView Filtering demo.
If the current "filter string" is empty (see the "Controller -> Filtering" action method; the "startsWith" parameter), do not initialize model.
If not empty, initialize the required model.
i'm working on a cascading dropdownlist in mvc3, when i used formmethod.post im able to select a value in dropdownlsi1 and based on the that selection im able to get values in dropdownlist2 and after selecting an item in dropdownlist2 , im getting a button which on clicking will give the user a message u have selected X and Y.....this is fine and i have no issue with it
but when i used formmethod.get, im able to get the 1st dropdownlist and based on the selection in the 1st dropdownlist im able to get 2nd dropdownlist nd items in the 2nd dropdownlist, after the selection in the 2nd dropdownlist , i got a button , but after clicking the button, again im seeing the same page when i get when i load the page i.e only the 1t dropdownlist..
In what scenario we should use formmethod.post and formmethod.get?
You use formmethod.get when you make http get request and formmethod.post when you make http post request it is methods of parameters. It seems to me your solution is to pass previous selected values of dropdown lists into the view and initialize helpers with selected values to render them properly.
It could be done with both request types.
You have two actions:
[HttpGet]
[HttpPost]
In first action you load page, if you use Post method, then you send Post data to second action. If you use Get method you just reload form action, it also send data, but they are included in url, like this site.com?param=1&test=2.
GET or POST method? What's the difference between them?
So I've got this #Html.DropDownList("Thangs") inside of a hidden div. When the user clicks a link to expose the div, I want to make an AJAX call to grab the things that should be in the list. It will be returned as JSON. How would I bind the incoming JSON objects as name/values into the DropDownList using jQuery?
you have not posted any sample json so
...
success:function(data){
$("#SelectList").empty(); //remove previous items in the ddl
//iterate the json
$.each(data,function(key,val){
$("<option/>",{value:key,text:val}).appendTo("#SelectList");
});
}
here is the DEMO