CODEWITHSUNDEEP
javascriptc#jqueryasp.net-mvc
JJRocks
JJRocks

Reputation: 1

AJAX wont send DropDownList value to controller

I am trying to build my first MVC app and I have met my match with this probable simple problem:

I am loading a partial class that contains dropdown list with AJAX JQuery on my view:

<script>

    $(document).ready(function () {
        $.ajax({
            url: "/Home/DDLCities",
            success: function (result) {               
                $(".cities").append(result);
            }
        });
    });

</script>

This works fine,

The form has several dropdown lists like this:

@using (Html.BeginForm("SearchResoult", "Home", FormMethod.Get))
{
    <b> Enter Search paramaterars</b>
    <br />
    <span>Total rooms</span>
    @Html.DropDownList("TotalRooms", 
        new SelectList(ViewBag.numbers), new { @onChange = "selectedtext(text)" })
    <br />

    <span>Max adoults</span>
    @Html.DropDownList("MaxAdoults",
        new SelectList(ViewBag.numbers), new { @onChange = "selectedtext(text)" })
    <br />

    <span>MaxChildren</span>
    @Html.DropDownList("MaxChildren",
        new SelectList(ViewBag.numbers), new { @onChange = "selectedtext(text)" })
    <br />
    <div class="cities">
        <span>Cities: </span>
    </div>

But my Controller gets only values from dropdown lists that are not loaded with jquery ajax, at dough I used the same form on my partial view as on my "regular" view.

Controller:

public ActionResult SearchResoult(string TotalRooms, string MaxAdoults, string MaxChildren, string Cites)
{
    List<Apartment> apartments = _repo.GetApartments();
    List<Apartment> searched = apartments.FindAll(
            x => x.TotalRooms == int.Parse(TotalRooms) &&
            x.MaxAdults == int.Parse(MaxAdoults) &&
            x.MaxChildren == int.Parse(MaxChildren) &&
            x.CityName == Cites);

    ViewBag.a = searched;
    return View();
}

And this is my partial:

@using (Html.BeginForm("SearchResoult", "Home", FormMethod.Get))
{
    @Html.DropDownList("Cites", new SelectList(Model))
}

Upvotes: 0

Views: 85

Answers (1)

Shahreyar Butt
Shahreyar Butt

Reputation: 23

What you can do is use a simple dropdownFor list and do not add new { @onChange = "selectedtext(text)" } while generating the Html.

<span class="column">
@Html.LabelFor(model => model.TotalRooms)
@Html.DropDownListFor(model => model.TotalRooms, TotalRoomsList, 
new { @class = "anyClass" })
@Html.LabelFor(model => model.MaxAdoults)
@Html.DropDownListFor(model => model.MaxAdoults, MaxAdoultsList, 
new { @class = "anyClass" })
</span>

//If you don't have a model use the simple dropdown which you are already using it will work the same. The jquery code will be something like this.

 function postPackageFeatures(){

 //Do this for all the dropdown lists.
 let TotalRooms= $("#TotalRooms").find(":selected").val()
 let TotalRooms= $("#MaxAdoults").find(":selected").val()
        
       
  })
        $.ajax(
            {
                type: "POST", //HTTP POST Method
                url: '@Url.Action("ActionName", "ControllerName")', // using url.action to create a action link.
                data: { //Passing data
                    TotalRooms: TotalRooms,
                    TotalRooms: TotalRooms,
                },
                traditional: true,
                success: function (data, status, xhr) {
                    
                window.location.replace("/somePage/List");
                },

            }
        );
    }

Upvotes: 1

Related Questions