Как отправить ASP.NET форма Ajax MVC с помощью JavaScript, а не кнопки отправки
Идеи приблизительно Социальные Вычисления имели усовершенствования с 1980. Хорошо запустился в 1985. В то время как я уверен, что были онлайн-сообщества прежде, я полагаю, что часть истинного понимания в области произошла сообщение 1980. Неблагоприятные динамические аспекты социальных сообществ и их взаимодействия в программной системе во многом как аварии , Такома Сужает Мост .
я думаю Clay Shirky , работа в области освещает те эффекты и как смягчить их. Я сказал бы, что интересные примеры реального мира социального понимания программного обеспечения включают вещи как reCAPTCHA и Википедия , где значительная ценная работа сделана участниками, установленными программным обеспечением.
3 ответа
Я предполагаю, что отсутствие кавычек вокруг селектора - просто ошибка транскрипции, но вы все равно должны это проверить. Кроме того, я не не видеть, где вы фактически даете форме идентификатор. Обычно это делается с параметром 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>
<% } %>
I've tried a few times to get the ajax form submit working nicely, but always met with either complete failure or too many compromises. Here's an example of page that uses the jQuery Form plug-in inside of a MVC page to update a list of projects (using a partially rendered control) as the user types in an input box:
<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>
And on the controller side:
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);
}
Простой пример, когда изменение в раскрывающемся списке запускает отправку формы ajax для перезагрузки сетки данных:
<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>