Как отправить форму ASP.NET MVC Ajax с помощью JavaScript, а не кнопки отправки

Ответ 1

Я собираюсь предположить, что ваше отсутствие цитат вокруг селектора - это просто ошибка транскрипции, но вы все равно должны ее проверить. Кроме того, я не вижу, где вы на самом деле даете форму id. Обычно вы делаете это с помощью параметра htmlAttributes. Я не вижу, чтобы вы использовали подпись. Опять же, если форма вообще отправляется, это может быть ошибкой транскрипции.

Если селектор и идентификатор не являются проблемой, я подозреваю, что это может быть связано с тем, что обработчик кликов добавляется через разметку при использовании расширения Ajax BeginForm. Вы можете попробовать использовать $('form'). Trigger ('submit') или в худшем случае, обработчик клика на якоре создайте скрытую кнопку отправки в форме и щелкните по ней. Или даже создайте собственное представление ajax, используя чистый jQuery (что, вероятно, я и сделаю).

Наконец, вы должны понимать, что, заменив кнопку "Отправить", вы полностью прервете это для людей, у которых нет javascript. Путь вокруг этого - также иметь кнопку, скрытую с помощью тега noscript, и обрабатывать сообщения AJAX и не-AJAX на сервере.

Кстати, он рассматривает стандартную практику, которую Microsoft не выдерживает, для добавления обработчиков через javascript не через разметку. Это позволяет организовать javascript в одном месте, чтобы вы могли более легко увидеть, что происходит в форме. Вот пример того, как я буду использовать механизм запуска.

  $(function() {
      $('form#ajaxForm').find('a.submit-link').click( function() {
           $('form#ajaxForm').trigger('submit');
      }).show();
  }

<% using (Ajax.BeginForm("Update", "Description", new { id = Model.Id },
     new AjaxOptions
     {
       UpdateTargetId = "DescriptionDiv",
       HttpMethod = "post"
     }, new { id = "ajaxForm" } )) {%>
   Description:
   <%= Html.TextBox("Description", Model.Description) %><br />
   <a href="#" class="submit-link" style="display: none;">Save</a>
   <noscript>
       <input type="submit" value="Save" />
   </noscript>
<% } %>

Ответ 2

Простой пример, когда изменение в раскрывающемся списке вызывает форму ajax-submit для перезагрузки datagrid:

<div id="pnlSearch">

    <% using (Ajax.BeginForm("UserSearch", "Home", new AjaxOptions { UpdateTargetId = "pnlSearchResults" }, new { id="UserSearchForm" }))
    { %>

        UserType: <%: Html.DropDownList("FilterUserType", Model.UserTypes, "--", new { onchange = "$('#UserSearchForm').trigger('submit');" })%>

    <% } %>

</div>

Триггер ('onsubmit') - это ключевая вещь: он вызывает функцию onsubmit, которую MVC перенесла на форму.

NB. Контроллер UserSearchResults возвращает PartialView, который отображает таблицу с помощью поставляемой модели

<div id="pnlSearchResults">
    <% Html.RenderPartial("UserSearchResults", Model); %>
</div>

Ответ 3

К сожалению, запуск onsubmit или отправки событий не будет работать во всех браузерах.

• Работает в IE и Chrome: # ('form # ajaxForm') trigger ('onsubmit');
• Работает в Firefox и Safari: # ('form # ajaxForm') trigger ('submit');

Кроме того, если вы запускаете ('submit') в Chrome или IE, это приводит к публикации всей страницы, а не к поведению AJAX.

Что работает для всех браузеров, удаление поведения события onsubmit и просто вызов submit() в самой форме.

<script type="text/javascript">
$(function() {

    $('form#ajaxForm').submit(function(event) { 
        eval($(this).attr('onsubmit')); return false; 
        });

    $('form#ajaxForm').find('a.submit-link').click( function() { 
        $'form#ajaxForm').submit();
        });

  }
</script>
  <% using (Ajax.BeginForm("Update", "Description", new { id = Model.Id },
     new AjaxOptions
     {
       UpdateTargetId = "DescriptionDiv",
       HttpMethod = "post"
     }, new { id = "ajaxForm" } )) {%>
   Description:
   <%= Html.TextBox("Description", Model.Description) %><br />
   <a href="#" class="submit-link">Save</a> 
<% } %>

Кроме того, ссылка не должна содержаться в форме, чтобы это работало.

Ответ 4

Я пробовал несколько раз, чтобы получить представление формы ajax прекрасно, но всегда встречал либо полный сбой, либо слишком много компромиссов. Здесь приведен пример страницы, в которой плагин jQuery Form внутри страницы MVC обновляет список проектов (с использованием частично визуализированного элемента управления), когда пользователь вводит в поле ввода:

<div class="searchBar">
    <form action="<%= Url.Action ("SearchByName") %>" method="get" class="searchSubmitForm">
        <label for="projectName">Search:</label>
        <%= Html.TextBox ("projectName") %>
        <input class="submit" type="submit" value="Search" />
    </form>
</div>
<div id="projectList">
    <% Html.RenderPartial ("ProjectList", Model); %>
</div>

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#projectName").keyup(function() {
            jQuery(".searchSubmitForm").submit();
        });

        jQuery(".searchSubmitForm").submit(function() {
            var options = {
                target : '#projectList'
            }

            jQuery(this).ajaxSubmit(options);

            return false;
        });

        // We remove the submit button here - good Javascript depreciation technique
        jQuery(".submit").remove();
    });
</script>

И на стороне контроллера:

public ActionResult SearchByName (string projectName)
{
    var service = Factory.GetService<IProjectService> ();
    var result = service.GetProjects (projectName);

    if (Request.IsAjaxRequest ())
        return PartialView ("ProjectList", result);
    else
    {
        TempData["Result"] = result;
        TempData["SearchCriteria"] = projectName;

        return RedirectToAction ("Index");
    }
}

public ActionResult Index ()
{
    IQueryable<Project> projects;
    if (TempData["Result"] != null)
        projects = (IQueryable<Project>)TempData["Result"];
    else
    {
        var service = Factory.GetService<IProjectService> ();
        projects = service.GetProjects ();
    }

    ViewData["projectName"] = TempData["SearchCriteria"];

    return View (projects);
}

Ответ 5

Попробуйте выполнить следующее:

<input type="submit" value="Search" class="search-btn" />
<a href="javascript:;" onclick="$('.search-btn').click();">Go</a>

Ответ 6

Ajax.BeginForm выглядит неудачно.

Используя обычный Html.Begin for, это делает трюк только красиво:

$('#detailsform').submit(function(e) {
    e.preventDefault();
    $.post($(this).attr("action"), $(this).serialize(), function(r) {
        $("#edit").html(r);
    });
}); 

Ответ 7

Вместо использования JavaScript, возможно, попробуйте что-то вроде

<a href="#">

  <input type="submit" value="save" style="background: transparent none; border: 0px none; text-decoration: inherit; color: inherit; cursor: inherit" />

</a>

Ответ 8

Просто поместите обычную кнопку indide Ajax.BeginForm и нажмите кнопку "Найти родительскую форму" и "нормально отправить". Форма Ajax в бритве:

@using (Ajax.BeginForm("AjaxPost", "Home", ajaxOptions))
    {        
        <div class="form-group">
            <div class="col-md-12">

                <button class="btn btn-primary" role="button" type="button" onclick="submitParentForm($(this))">Submit parent from Jquery</button>
            </div>
        </div>
    }

и Javascript:

function submitParentForm(sender) {
    var $formToSubmit = $(sender).closest('form');

    $formToSubmit.submit();
}