Jquery post returning html in the result and not loading it in the page

Question

I guess I'm a little confused here. I have my home page and I click the search button, which calls a jquery post (tried with .get too) to my controller. The controller gets some info and then, at that point, I want to display a new page/view called "Events". BUT, the page isn't loading in the browser, the HTML for the view is being sent back in the jquery post results. FYI - I'm only using a form to get validation results, I'm not submitting it with any button click. Question - Do I have to submit a form for this to work the way I expect it too?

Here is my controller code.

[HttpPost]
    [AllowAnonymous]
    public ActionResult JumbotronSearch(SearchCriteria searchCriteria)
    {
        try
        {
            var viewModel = new EventsViewModel();
            DbGeography location = Geocoding.GetDbGeography(searchCriteria.latitude.ToString(), searchCriteria.longitude.ToString());
            viewModel.Events = _Repository.AllWithinDistance(location,
                    searchCriteria.date.Add(searchCriteria.date == DateTime.Now.Date
                        ? DateTime.Now.TimeOfDay
                        : new TimeSpan(12, 0, 0, 0)), 1);

            viewModel.SearchCriteria = searchCriteria;

            return View("Events",viewModel);
        }
        catch (Exception ex)
        {
            // log exception in file or db or both
            return Json(new { error = "true", message = "Oh No! Something happened trying to submit your search. Please contact YogaBandy Help Desk." });
        }
    }

Here is the /home/index view form

 <form id="jumbotronForm" class="form-group form-inline" style="position: relative"> <input id="jumbotronSearch" type="text" class="form-control input-lg" placeholder="Location" required maxlength="50" minlength="4" /> <label id="location-error" for="jumbotronSearch" style="display: none;">The location was not found.</label> <input id="jumbotronDate" type="text" class="form-control input-lg" value="@DateTime.Now.Date.ToShortDateString()" readonly/> <input id="jumbotronSubmit" type="button" class="btn btn-default btn-lg" value="Search" /> </form> 

Here is the javascript to my controller to get the results and load the new view

  $("#jumbotronSubmit").off('click').on('click', function() { model.date = $('#jumbotronDate').val(); var form = $('#jumbotronForm'); form.validate(); if (form.valid()) { if (model.formatted_address == location.value) { submitSearchCriteria(model); } else { var navbarGeocoder = new google.maps.Geocoder(); navbarGeocoder.geocode({ 'address': location.value }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { model.formattedAddress = results[0].formatted_address; model.latitude = results[0].geometry.location.lat(); model.longitude = results[0].geometry.location.lng(); model.mapType = results[0].types[0]; submitSearchCriteria(model); } else { $('#location-error').show(); setTimeout(function() { $('#location-error').fadeOut('fast'); }, 2000); yb.base.displayNotification("Couldn't find location. Check your spelling", 'danger'); } }); } function submitSearchCriteria(model) { $.post(scope.enumControllers.jumbotronSearch, model, function(result) { if (result.error == true) { yb.base.displayNotification(result.message, 'danger'); } }).fail(function(jqXHR, textStatus) { yb.base.displayNotification("Oh no! Something went wrong sending your request. Please contact the help desk.", 'danger'); }); } } }); 

Answer 1

Just use the following to get the data.

 var info;
 $("#div").load("URL",function(response, status, xhr){info = response;});