Question

I have a small problem.

My action is :

 public ViewResult SearchForRooms(int HotelDDL) 
    {

        List<Room> roomsInHotel = bl.ReturnRoomsPerHotel(HotelDDL);

        return View(roomsInHotel);
    }

Here is the jquery that is calling the action:

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $("#HotelDDL").change(function () {

            var text = $("#HotelDDL option:selected").text();
            var value = $("#HotelDDL option:selected").val();
            alert("Selected text=" + text + " Selected value= " + value);

            $.post("/Home/SearchForRooms",
            {
                HotelDDL: $("#HotelDDL option:selected").val() 
            });
        });
    });
</script>

And finally, here is the View that should be called:

@model IEnumerable<RoomReservation.Entities.Entities.Room>

@{
    ViewBag.Title = "Search";
}

<h2>Result</h2>

<table>
    <tr>
        <th>
            City
        </th>
        <th>
            Hotel
        </th>
        <th>
            Room label
        </th>
        <th>
            Number of beds
        </th>
        <th>
            Price per night
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelitem=>item.Hotel.City.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Hotel.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.NumberOfBeds)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.PricePerNight)
        </td>
    </tr>
}
</table>

Everthing is working ok (databse return all rooms correctly) except final view rendering.
I have tried Phil’s tool but it doesn’t give me any suspicious hints:

RouteDebug.RouteDebugger.RewriteRoutesForTesting(RouteTable.Routes);

So, why is it not showing after jscript send it’s post method to SearchForRooms()?
Thank you

P.S. If you need any other piece of code please just say so.

Answer 1

Note that doing an ajax post will not refresh or redirect the page like a classic post would.

The view is not showing because there is no where to place it. You post successfully, and return a view successfully but then do nothing with it. If you want to show the returned view, then you have to append it to the dom somehow. Here is a common method:

<div id="successDiv"></div>
<script type="text/javascript" language="javascript">
 $(document).ready(function () {
    $("#HotelDDL").change(function () {

        var text = $("#HotelDDL option:selected").text();
        var value = $("#HotelDDL option:selected").val();
        alert("Selected text=" + text + " Selected value= " + value);

        $.post("/Home/SearchForRooms",
         {
            HotelDDL: $("#HotelDDL option:selected").val() 
         }, function(result){//add callback for success - result is the returned view
            $("#successDiv").html(result);//place the view inside of the div
        });
    });
 });
</script>

---

Comment Response

@TunAntun – You should use a classic post if you want the view to have its own page. There is no way to accomplish this from ajax. You could do this with javascript though

 $.post("/Home/SearchForRooms",
         {
            HotelDDL: $("#HotelDDL option:selected").val() 
         }, function(result){//add callback for success - result is the returned view
            $("#successDiv").html(result);//place the view inside of the div
        });

would become

        var postForm = document.createElement("form");
        postForm.setAttribute("method","post");
        postForm.setAttribute("action","/Home/SearchForRooms");
        var postVal = document.createElement("input");
        postVal.setAttribute("type","hidden");
        postVal.setAttribute("name","HotelDDL");
        postVal.setAttribute("value",$("#HotelDDL option:selected").val() );
        postForm.appendChild(postVal);
        document.body.appendChild(postForm);
        $(postForm).submit();

This will dynamically issue the post you wanted. Then in your controller it will properly redirect or return a view. It is highly suggested that when returning a view from a [HttpPost] that you use RedirectToAction and then return the view from a [HttpGet] method in order to prevent refresh from reposting old data.