#javascript #ajax #asp.net-mvc #post
#javascript #ajax #asp.net-mvc #Публикация
Вопрос:
Думаю, я здесь немного запутался. У меня есть моя домашняя страница, и я нажимаю кнопку поиска, которая вызывает jquery post (пробовал с .get тоже) на мой контроллер. Контроллер получает некоторую информацию, а затем, в этот момент, я хочу отобразить новую страницу / представление под названием «События». НО страница не загружается в браузере, HTML для просмотра отправляется обратно в результатах jquery post. К вашему СВЕДЕНИЮ — я использую форму только для получения результатов проверки, я не отправляю ее с помощью нажатия какой-либо кнопки. Вопрос — Должен ли я отправить форму, чтобы это тоже работало так, как я ожидаю?
Вот мой код контроллера.
[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." });
}
}
Вот форма просмотра / home / index
<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>
Вот javascript для моего контроллера, чтобы получить результаты и загрузить новое представление
$("#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');
});
}
}
});
Комментарии:
1. Если вы хотите отобразить новую страницу, то не используйте ajax (весь смысл ajax в том, чтобы оставаться на той же странице)
2. итак, если я хочу передать некоторые данные на свой контроллер, выполнить некоторую логику в этом контроллере, а затем загрузить новую страницу, я должен отправить форму?
3. ДА. И в методе POST, который вы отправляете, вы должны использовать
return RedirectToAction(...);для перенаправления на другой метод, который отображает ваше другое представление.4. Мне не нужно перенаправлять на другое действие. Я просто хочу загрузить представление для действия, которое я отправляю в свой контроллер, поэтому, я думаю, я прерываю отправку вызовом .on (submit), чтобы получить больше данных и выполнить некоторую логику, затем, если все хорошо, я выполняю ручной вызов типа $ (‘form’).submit()?
5. Если вы не хотите перенаправлять на другую страницу, тогда вам нужно обновить DOM при успешном обратном вызове — например,
$.post(...., function(result) { $(someElement).html(result); }— но ваш метод должен возвращатьPartialView()неView()
Ответ №1:
Просто используйте следующее, чтобы получить данные.
var info;
$("#div").load("URL",function(response, status, xhr){info = response;});
Комментарии:
1. Я не думаю, что вы ошибаетесь, используя AJAX для обновления содержимого и используя эти данные для перезагрузки страницы.
2. Я думаю, вы правы, но тогда мне пришлось бы загрузить в какой-то основной контейнер div, чтобы показать возвращенный html. Я не знаю, хочу ли я этого. Это главная страница, которая получает результаты поиска, а затем отображает их на странице результатов.
3. Да, я подумал, что было бы лучшим решением, если бы вам не приходилось перенаправлять, пока вы не выполнили логику. Я все еще думаю, что использование Ajax — хорошая идея, давайте предположим, что результатов их поиска нет. Им не нужно перезагружать пустую страницу, потому что у вас есть результаты заранее.