i have an MVC application just making a simple search with one controller and view, everything works fine but i cant show my returned values in my view

below is my Index.cshtml , HomeController and script file respectively, i dont seem to get an error and ajax call returns with a response but i somehow fail to show it on the index page , and i cant seem to find the reason why for a while now,
i need you help asap ,thanks

@model TrainTicketMachine.Models.StationViewResponse

@{
    ViewBag.Title = "Index";
}


<form method="GET" class="search" >

    <input type="text" name="searchTerm" id="searchTerm"/>
   


    </form>
<p>

   
<div>
    <table class="center">
     @if (Model.StationList != null)
        {
        <tr>
            <td>
                <h3>Station(s)</h3>


            </td>

        </tr>
        foreach (var item in Model.StationList)
        {
            <tr>
                <td>

                    @Html.DisplayFor(modelItem => item.StationName)

                </td>
            </tr>
        }
    
     }
    </table>

    <table class="center">

        
        @if (Model.RecomLetters != null)
        {
            <tr>
                <td>
                    <h3>Next Possible Letter(s)</h3>


                </td>

            </tr>
            foreach (var item in Model.RecomLetters)
            {
                    <tr>
                        <td>

                          
                            <label for="letter">@item.ToString()</label>

                        </td>
                    </tr>
                }
        }
    </table>
</div>

Open in new window


 public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
           StationDataModelContainer _db = new StationDataModelContainer();
           //List<Station> result = _db.Stations.Where(s => s.StationName.StartsWith(searchTerm)).ToList();
           StationViewResponse response = new StationViewResponse();


           //if (result != null && result.Count > 0 && !string.IsNullOrEmpty(searchTerm))
           //{
           //    Letters recomendedLetters = new Letters(searchTerm.RecommendLetters(result));
           //    response.RecomLetters = recomendedLetters;
           //    response.StationList = result;
           //    return View(response);

           //}

            return View(response);
        }

        [HttpPost]
        public StationViewResponse Index(string searchTerm = null)
        {
            StationDataModelContainer _db = new StationDataModelContainer();
            List<Station> result = _db.Stations.Where(s => s.StationName.StartsWith(searchTerm)).ToList();
            StationViewResponse response = new StationViewResponse();


            if (result != null && result.Count > 0 && !string.IsNullOrEmpty(searchTerm))
            {
                Letters recomendedLetters = new Letters(searchTerm.RecommendLetters(result));
                response.RecomLetters = recomendedLetters;
                response.StationList = result;
                return response;

            }

            return response;
        }

    }

Open in new window



 <script type="text/javascript">

       $("#searchTerm").on('input', function() {

            console.log('before call');
            var searchTerm = $("#searchTerm").val();
            console.log(searchTerm);
            $.ajax({
                url: '/Home/Index',
                type: 'POST',
                data: JSON.stringify({ 'searchTerm': searchTerm }),  //JSON.stringify({ 'Options': searchTerm }),
                contentType: "application/json",
                dataType: 'json',
                traditional: true,
                success: function (data) {
                    console.log(data); 
                },
                error: function (request, status, error) {
                    alert(error);
                }

           
            })
            console.log('after call');
        });

    </script>

Open in new window

nicedoneAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

nicedoneAuthor Commented:
In my homecontroller when i changed return to

 
 return Json(response, JsonRequestBehavior.AllowGet);

Open in new window


then as a result of the call i do get the json response which i need to show on my page but i do not know how to do that in jquery, or should i change the type to html  then when i get html should i assign this to whole page's html to see the result i want to see ??
0
Miguel OzSoftware EngineerCommented:
Assuming that you only need to call the second controller method to return JSON, then please delete the post method in your controller and proceed to do the following changes:
View:
There is no need for form tag, just include the input:
<input type="text" name="searchTerm" id="searchTerm"/>

Open in new window


Controller: Add this method: (and delete the post method)
[HttpGet]
public JsonResult GetSearchResults(string searchTerm = null))
{
   //Your second method (the post one) code goes here
   return Json(response, JsonRequestBehavior.AllowGet);
}

Open in new window

Modify JS as: (Notice that I use getJSON method)
<script type="text/javascript">
   $("#searchTerm").on('change', function() {
		console.log('before call');
		var searchValue = $("#searchTerm").val();
		console.log(searchValue);
		$.getJSON('/Home/GetSearchResults/', { searchTerm: searchValue }, loadData);
		console.log('after call');
   });
   function loadData(data) {
	   alert(data); //add your code that modifies your html here.
    }
</script>

Open in new window

Notes: 1) I will strongly suggest to use a search button that user click to start search. The current code will fire every time the user types a new character  in (or modify) the text area.
2) If more help needed please post the exact error(s), code and the console.log results.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.