Публикация формы на другое действие MVC в зависимости от нажатой кнопки отправки
Я использую ASP.Net MVC 4
. У меня есть несколько кнопок на представлении. В настоящее время я вызываю тот же метод действий; и я различаю нажатую кнопку с помощью атрибута name
.
@using (Html.BeginForm("Submit", "SearchDisplay", new { id = Model == null ? Guid.NewGuid().ToString() : Model.SavedSearch }, FormMethod.Post))
{
<div class="leftSideDiv">
<input type="submit" id="btnExport" class="exporttoexcelButton"
name="Command" value="Export to Excel" />
</div>
<div class="pageWrapperForSearchSubmit">
<input type="submit" class="submitButton"
value="Submit" id="btnSubmitChange" />
</div>
}
//ACTION
[HttpPost]
public ActionResult Submit(SearchCostPage searchModel, string Command)
{
SessionHelper.ProjectCase = searchModel.ProjectCaseNumber;
if (string.Equals(Command, Constants.SearchPage.ExportToExcel))
{
}
}
ВОПРОСЫ
- Есть ли способ прямого обращения к различным методам POST-действий при разных нажатиях кнопок (без специальной маршрутизации)?
- Если нет настраиваемой маршрутизации, как мы можем это сделать с помощью настраиваемой маршрутизации?
Литература:
Ответы
Ответ 1
ЛУЧШИЙ ОТВЕТ 1:
ActionNameSelectorAttribute
, упомянутый в
http://weblogs.asp.net/scottgu/archive/2007/12/09/asp-net-mvc-framework-part-4-handling-form-edit-and-post-scenarios.aspx
ОТВЕТ 2
Ссылка: dotnet-tricks - Обработка нескольких кнопок отправки в одной форме - MVC Razor
Второй подход
Добавление новой формы для обработки Отмена нажмите кнопку. Теперь, нажав кнопку "Отмена", мы разместим вторую форму и переадресуем на домашнюю страницу.
Третий подход: клиент Script
<button name="ClientCancel" type="button"
onclick=" document.location.href = $('#cancelUrl').attr('href');">Cancel (Client Side)
</button>
<a id="cancelUrl" href="@Html.AttributeEncode(Url.Action("Index", "Home"))"
style="display:none;"></a>
Ответ 2
Вы можете выбрать URL-адрес, в котором форма должна быть опубликована (и, следовательно, вызванное действие) по-разному, в зависимости от поддержки браузера:
- для новых браузеров, поддерживающих HTML5, вы можете использовать атрибут formaction кнопки отправки
- для старых браузеров, которые не поддерживают это, вам нужно использовать JavaScript, который изменяет атрибут действия , когда кнопка нажата и перед отправкой
Таким образом вам не нужно ничего делать на стороне сервера.
Конечно, вы можете использовать методы расширения Url
в своей Razor, чтобы указать действие формы.
Для браузеров, поддерживающих HMTL5: просто укажите кнопки отправки следующим образом:
<input type='submit' value='...' formaction='@Url.Action(...)' />
Для старых браузеров Я рекомендую использовать ненавязчивый script, как это (включите его в свой "макет" ):
$(document).on('click', '[type="submit"][data-form-action]', function (event) {
var $this = $(this);
var formAction = $this.attr('data-form-action');
$this.closest('form').attr('action', formAction);
});
ПРИМЕЧАНИЕ. Этот script будет обрабатывать щелчок для любого элемента на странице с атрибутами type=submit
и data-form-action
. Когда это произойдет, оно принимает значение атрибута data-form-action
и устанавливает действие содержащейся формы на значение этого атрибута. Поскольку это делегированное событие, оно будет работать даже для HTML, загруженного с использованием AJAX, без дополнительных шагов.
Затем вам просто нужно добавить атрибут data-form-action
с требуемым URL-адресом действия к вашей кнопке, например:
<input type='submit' data-form-action='@Url.Action(...)' value='...'/>
Обратите внимание, что нажатие кнопки изменяет действие формы, и сразу после этого браузер отправляет форму в нужное действие.
Как вы можете видеть, это не требует специальной маршрутизации, вы можете использовать стандартные методы расширения Url
, и у вас нет ничего особенного в современных браузерах.
Ответ 3
Мне кажется, что у вас есть одна команда с двумя выходами, я бы выбрал для этого изменение как для клиента, так и для сервера.
На клиенте используйте JS для создания URL-адреса, который вы хотите отправить (используйте JQuery для простоты), т.е.
<script type="text/javascript">
$(function() {
// this code detects a button click and sets an `option` attribute
// in the form to be the `name` attribute of whichever button was clicked
$('form input[type=submit]').click(function() {
var $form = $('form');
form.removeAttr('option');
form.attr('option', $(this).attr('name'));
});
// this code updates the URL before the form is submitted
$("form").submit(function(e) {
var option = $(this).attr("option");
if (option) {
e.preventDefault();
var currentUrl = $(this).attr("action");
$(this).attr('action', currentUrl + "/" + option).submit();
}
});
});
</script>
...
<input type="submit" ... />
<input type="submit" name="excel" ... />
Теперь на стороне сервера мы можем добавить новый маршрут для обработки запроса excel
routes.MapRoute(
name: "ExcelExport",
url: "SearchDisplay/Submit/excel",
defaults: new
{
controller = "SearchDisplay",
action = "SubmitExcel",
});
Вы можете настроить 2 различных действия
public ActionResult SubmitExcel(SearchCostPage model)
{
...
}
public ActionResult Submit(SearchCostPage model)
{
...
}
Или вы можете использовать атрибут ActionName
как псевдоним
public ActionResult Submit(SearchCostPage model)
{
...
}
[ActionName("SubmitExcel")]
public ActionResult Submit(SearchCostPage model)
{
...
}
Ответ 4
вы можете использовать ajax-вызовы для вызова разных методов без обратной передачи
$.ajax({
type: "POST",
url: "@(Url.Action("Action", "Controller"))",
data: {id: 'id', id1: 'id1' },
contentType: "application/json; charset=utf-8",
cache: false,
async: true,
success: function (result) {
//do something
}
});