asked on

Pass two dropdown selections through ajax to controller at once

Good day, I have two dropdown lists, both being populated from my database. I have a controller that filters these lists, the controller is supposed to get the selected value from my dropdown. How do i pass both selections at the same time to the controller and return a view based on the filtered results of the controller? Thanks.

ViewModel

 public class LocationPurposeVM
    {
        public IEnumerable<Location> Locations { get; set; }
        public IEnumerable<Purpose> Purposes { get; set; }
        public IEnumerable<Hall> Halls { get; set; }
    }

Open in new window

CONTROLLER FOR POPULATING DROPDOWN LIST AND FILTERING BASED ON SELECTION

public ActionResult Index()
        {
            LocationPurposeVM vm = new LocationPurposeVM();
            vm.Locations = locationService.GetAll();
            vm.Purposes = purposeService.GetAll();
            vm.Halls = hallService.GetAll();
            return View(vm);
        }
        // GET: Location
        [HttpPost]
        public PartialViewResult ViewHalls(string location, string purpose)
        {
            LocationPurposeVM vm = new LocationPurposeVM();
            vm.Locations = locationService.GetAll();
            vm.Purposes = purposeService.GetAll();
            vm.Halls = hallService.GetAll();
            ViewBag.Location = (from r in vm.Halls
                                select r.Location).Distinct();
            ViewBag.Purpose = (from r in vm.Halls
                               select r.Purpose).Distinct();
            var model = from r in vm.Halls
                        orderby r.Name
                        where r.Location == location
                        where r.Purpose == purpose
                        select r;
            return PartialView("ViewHalls",model.ToList());
        }

Open in new window

MY VIEW(I NEED AN AJAX CALL ON THE SEARCH BUTTON THAT WILL HELP SEARCH BASED ON BOTH SELECTIONS)

<body>
    <fieldset>
        <legend>
            PREFERRED LOCATION:
        </legend>
        <div>
            <select class="form-control" id="locations" name="locations" placeholder="Choose A Location">
                @foreach (var item in Model.Locations)
                {
                    <option>@item.Name</option>
                }
            </select>
        </div>
        <legend>
            TYPE OF EVENT:
        </legend>
        <select class="form-control" id="purposes" name="purposes" placeholder="Event Type">
            @foreach (var item in Model.Purposes)
            {
                <option>@item.Name</option>
            }
        </select>
        >
        <div>
            <input type="submit" value="Search" id="submit" />
        </div>
        <div id="target">

        </div>
        <div id="log">

        </div>
    </fieldset>

Open in new window

PARTIAL VIEW TO BE RETURNED IN THE <DIV ID="TARGET"> WHEN RESULT SUCCESSFULLY GOTTEN

<div class="resul" style="display:none">
    @{foreach (var item in Model.Halls)
            {
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="@Html.DisplayFor(s => item.Image)" />
                    <h2>@item.Name</h2>
                    <h4><span class="price"></span>@item.Price.ToString("#x20A6")</h4>
                    <p>Located in @item.Location</p>
                    <p>Hall is for @item.Purpose</p>
                    <p>@item.Description</p>
                </div>
                </div>

            }
        }

            </div>

Open in new window

Julian Hansen

You don't seem to have an AJAX call in place yet?

It should be something like this
NOTE: You need to fill in the URL to your controller / view.

$(function() {
   $('#submit').click(function(e) {
      e.preventDefault();
      var url = 'URL TO YOUR ENDPOINT HERE';
      $.get(url, {
          location: $('#locations').val(), 
          purposes: $('#purposes').val()
        }, function(resp) {
          $('#target').html(resp);
       });
   });
});

Open in new window

Ofure Osezuah

ASKER

Thanks you, Julian. I just updated as you suggested, still isn't working. I put a breakpoint in my controller(POST), code did not even get there.

<body>
<fieldset>
<legend>
PREFERRED LOCATION:
</legend>
<div>
<select class="form-control" id="locations" name="locations" placeholder="Choose A Location">
@foreach (var item in Model.Locations)
{
<option>@item.Name</option>
}
</select>
</div>
<legend>
TYPE OF EVENT:
</legend>
<select class="form-control" id="purposes" name="purposes" placeholder="Event Type">
@foreach (var item in Model.Purposes)
{
<option>@item.Name</option>
}
</select>
>
<div>
<input type="submit" value="Search" id="submit" />
</div>
<div id="target">

</div>
<div id="log">

</div>
</fieldset>
<script type="text/javascript">
$(function () {
$('#submit').click(function (e) {
e.preventDefault();
var url = 'Halls/ViewHalls';
$.get(url, {
location: $('#locations').val(),
purposes: $('#purposes').val()
}, function (resp) {
$('#target').html(resp);
});
});
});
</script>

Please, go through and suggest what else I can do/add. Thanks

Chris Stanyon

You're making a GET request, not a POST request, so it's unlikely you'll ever hit your POST controller. Either change your server side code to deal with a GET request or change your client-side code to send a POST request:

[HttpGet]
public PartialViewResult ViewHalls(string location, string purpose)
{
    ...
}

Open in new window

$.post(url, {
    ...
}

Open in new window

Ofure Osezuah

ASKER

Thanks Chris, updated, still not working. I made my ajax call a POST, and left my controller as a POST

<script type="text/javascript">
$(function () {
$('#submit').click(function (e) {
e.preventDefault();
var url = 'Halls/ViewHalls';
$.post(url, {
location: $('#locations').val(),
purpose: $('#purposes').val()
}, function (resp) {
$('#target').html(resp);
});
});
});
</script>

This is important to me, and I really do appreciate the rapid response. Thank you!

Julian Hansen

Apologies I saw this
lines 9 and 10 of your code

       // GET: Location
        [HttpPost]

Open in new window

I saw GET and assumed GET

Just change the $.get to a $.post.

Julian Hansen

Not working - is not helpful for us to help you.

What is happening in your console - can you tell us what the response is from the $.post

Anything else that will help us help you - we can't work on "it is'nt working".

Ofure Osezuah

ASKER

Yes, Julian, done that. Thanks. Still don't know why it's not working, it's not even getting to the POST controller upon the submit button click. It's getting to the GET controller well alright(to populate the dropdown from the database), but for the POST? Nothing.

Ofure Osezuah

ASKER

@ JULIAN, nothing is happening at my console. The dropdown menus are showing, but on clicking the "Search" button, absolutely nothing is happening. I put a breakpoint on the POST controller it is supposed to call, nothing. It's the ajax call that's malfunctioning, but for the life of me, can't figure it out. Been on it for days now.... Thanks in advance experts!

Julian Hansen

If nothing is happening in the console then no POST is being made - putting a breakpoint on your controller will not have any effect as no call is being made.

The only reason for the above is if the ID on the submit button is not binding to the event hander.

The code I posted is binding to the click on the submit button id=submit

$('#submit').click(...

Open in new window

Can you check your submit button to see what the id is.

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Ofure Osezuah

ASKER

Thanks experts, @Chris Stanyon and @Julian Hansen...it finally did work. Jquery wasn't properly referenced in my project. I thank you both, now I know where to seek professional help when I run into any sort of code block :-D. Thanks again

Julian Hansen

@ JULIAN, nothing is happening at my console.

Your jQuery library was not included and there was nothing showing in your console?
That makes no sense.
If the library was not properly referenced you would have received an error that $ is not defined.

Ofure Osezuah

ASKER

Yes, I did, actually. Thing is, I'm new to this whole concept. I didn't initially inspect my elements, and I initially thought you were asking for exceptions. So sorry Julian, I know better now. Thank you.

Julian Hansen

It is important for us to be able to help you that you give us as much information as we need to understand your problem. If you are not sure then ask - we can guide you in this respect as well.

Also for future, you are able to select more than one answer to a question. If you feel multiple experts have assisted in solving your problem you can select the answer that you feel best matches the solution and then you can select those answers which you feel might have assisted in helping you reach an answer. Again if you are unsure of how to do this please ask.

Ofure Osezuah

ASKER

I don't know how to do that, select multiple answers. I tried it, then just decided to choose Chris' since he mentioned the exact jquery problem. How do I do this, please?

Julian Hansen

This article should give you some indication of how to close the question and select multiple answers.

http://support.experts-exchange.com/customer/en/portal/articles/2527982-how-do-i-close-my-question-?b_id=44

Ofure Osezuah

ASKER

Thank you.