MVC - DropDownList / TextBox

RockLobster · 4 Mar 2014 at 15:45

Hi All

Ignore the crap look I'll work on that later. If a user types in an value into the textbox and clicks search I want to use that value to filter the dropdownlist which is bound to an dbset (entity framework). Any ideas? I assume I need to write some code in the ActionResult? Or am I wrong?

PHP:

  public ActionResult Search(string name)
        {
            //some operations goes here

            return View(); //return some view to the user
        }

PHP:

<body>
    <div>
        @using (Html.BeginForm("Search", "Home"))
        {
            @Html.TextBox("name")
            <input type="submit" value="Search" />
        }

        @using (Html.BeginForm())
        {
            @Html.LabelFor(x => x.SelectedApplicationId)
            @Html.DropDownList("SelectedApplicationId", new SelectList(Model.PeopleUnits, "ID", "UNIT_INSTANCE_CODE"))
        }
    </div>
</body>

davetherave2 · 4 Mar 2014 at 22:00

Ok. There are a number of ways of doing this. But what is the ultimate goal of this feature. Should the drop down do something once a value is selected?

RockLobster · 4 Mar 2014 at 22:23

Below is a YouTube video I created to give you an idea - this was done using webforms.

A user types in a value, using that value I populate the dropdownlist so basically select * from sometable where textbox.value = someid. When a user selects a value from the dropdown I need the value selected when a post occurs (submit).

http://www.youtube.com/watch?v=kMhJE7v5G7s&feature=share&list=UUukCqz3oYlDwsFl3z5oIKcQ

davetherave2 · 4 Mar 2014 at 23:01

I see what you are doing here.

I can see the webforms thinking coming through.

(been there done that. A tough habit to break)

There are a number of ways of doing this.

1) On the post of the form within your actionresult you could stuff your data that is brought back into the viewdata and bind the dropdown to that.

so something like:

public ActionResult Search(string name)
{
//some operations goes here
//IEnumerable<dropdownobject> returneddropdownlist = getMyList(name);
ViewData["dropdownlist"] = returneddropdownlist

return View(); //return some view to the user
}

think of the viewdata object as session state in webforms.

this object can then used as the list of objects for the dropdown list

something like this:
@Html.DropDownList("SelectedApplicationId",
new SelectList((IEnumerable<yourdatatype>) ViewData["dropdownlist"], "Id", "Name"))

where id and name are the value and text field.

Not the cleanest and most maintainable code in the world but will get you started.

The more preferred option would be to bind the dropdown via JSON data. This all depends on your level of javascript, jquery or some other framework like Knockout (but I suspect these may be too far for now).

So using some javascript you could make an ajax call to a JSONResult (like an action result but returns json data rather than a view).

then if you needed this data to be posted back after selection you could either include it as part of the form submission or do an ajax post back unless you need it to go to another page.

Hopefully this gives you enough to get you started.

If you need some more help give me a shout in trust.

RockLobster · 5 Mar 2014 at 08:37

Thanks for your help. I'll have a crack today.

davetherave2 · 6 Mar 2014 at 11:38

So how did you get on?

Dj_Jestar · 6 Mar 2014 at 11:59

Filter the select list with javascript, in this instance. This is a webpage, not an app, right?

There's a number of plugins to choose from if you're that way inclined, or if you are doing it for the lols and to learn, try doing it yourself by manipulating the DOM.

RockLobster · 6 Mar 2014 at 18:53

davetherave2 said:
So how did you get on?

I had a few problems so I had to revert to webforms as management wanted it implemented that day.

I'm a one man band here now (there was only 2 of us anyway) so it's hard to convince myself to use good practices such as dependency injection, IOCs, SOLID principles, etc when all management care about is that the systems I'm working on are ready asap. I've started to look for another jobs, I have another interview on Wednesday as I've realised that unless I get myself in a development team I'm not going to have the opportunity to learn off others or use good practices. Sorry, for the long reply but it gets to you.

davetherave2 · 6 Mar 2014 at 21:39

It's a shame you didn't get it to work but there is no point trying to rush something.

As for all the dependency injection and other stuff there is no point cramming that in now if you are not familiar with the concepts. It will just complicate matters.

What I would suggest is get yourself a trial account on pluralsight and view a couple of the videos on MVC and start from there. It will explain the tech and the different way of thinking from webforms. As I said its a hard habit to break when you have been used to drag and drop controls.

I actually found using Telerik's kendo ui controls amazing for helping me get to grips with MVC a lot quicker. The MVC wrappers are amazing to help build quick code but gives you the flexibility to customize and extend.

Try to continue with the MVC as it will just click all at once and try to do some simple stuff first like a contact form and then expand from there.

RockLobster · 7 Mar 2014 at 10:44

davetherave2 said:
It's a shame you didn't get it to work but there is no point trying to rush something.

As for all the dependency injection and other stuff there is no point cramming that in now if you are not familiar with the concepts. It will just complicate matters.

What I would suggest is get yourself a trial account on pluralsight and view a couple of the videos on MVC and start from there. It will explain the tech and the different way of thinking from webforms. As I said its a hard habit to break when you have been used to drag and drop controls.

I actually found using Telerik's kendo ui controls amazing for helping me get to grips with MVC a lot quicker. The MVC wrappers are amazing to help build quick code but gives you the flexibility to customize and extend.

Try to continue with the MVC as it will just click all at once and try to do some simple stuff first like a contact form and then expand from there.

Thanks for your comments. I do have a Pluralsight account and I have been going through videos by Scott Allen. I'm also reading this book which I've found to be really good - http://www.amazon.co.uk/Pro-NET-Framework-Professional-Apress/dp/1430242337. After I've finished with that then this book - http://www.amazon.co.uk/Dependency-...&sr=1-1-fkmr0&keywords=.net+depency+injection.

The Kendo controls look good but are quite expensive and they've already bought the DevExpress Universal for me.

sist_si · 8 Mar 2014 at 01:00

If you're just getting to grips with ASP.NET MVC (I use v3 and 4) then don't worry too much about trying to get to know everything all at once as RockLobster said. Just do little tasks at a time and as your projects get more complicated you will naturally learn and implement new methodologies that suit your way of working.

In the case of this example, I'd have done it in one of three ways:

1. Post the entire page on the submit of your textbox. This would pass the value back to a [HttpPost] version of your view (in the controller) and you could return the new version of the dropdown list content in your Model or the ViewBag (or ViewData if you're using < MVC3).

2. Use Jquery to post the textbox data back to the controller [HttpPost] version of your view, fetch the dropdown data as in 1 but return it as JSON back to the jQuery method where you can clear and repopulate the dropdown list in JavaScript.

3. Have the Dropdown list as a PartialView on the page and use jQuery to post the textbox data back to the [HttpPost] version of your PartialView in the controller which filters the data and returns a new version of the Dropdownlist (rendered HTML code) back to jQuery where you can write it back out to your original view.

(Edit: there are of course loads of other JS frameworks, UI controls etc you could use...it's all about personal taste)

Dj_Jestar · 8 Mar 2014 at 17:41

Use javascript to manipulate the DOM. Seriously.

http://jsfiddle.net/SJFnA/