Advertisement
Guest User

How to post ASP.NET MVC Ajax form using JavaScript rather than submit button

a guest
Jan 2nd, 2012
213
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.08 KB | None | 0 0
  1. <% using (Ajax.BeginForm("Update", "Description", new { id = Model.Id },
  2. new AjaxOptions
  3. {
  4. UpdateTargetId = "DescriptionDiv",
  5. HttpMethod = "post"
  6. },new {id ='AjaxForm' })) {%>
  7. Description:
  8. <%= Html.TextBox("Description", Model.Description) %><br />
  9. <input type="submit" value="save" />
  10. <% }%>
  11.  
  12. $('form#AjaxForm').submit();
  13.  
  14. <a href="#" onclick="$('form#AjaxForm').submit(); return false;">submit</a>
  15.  
  16. $(function() {
  17. $('form#ajaxForm').find('a.submit-link').click( function() {
  18. $('form#ajaxForm').trigger('submit');
  19. }).show();
  20. }
  21.  
  22. <% using (Ajax.BeginForm("Update", "Description", new { id = Model.Id },
  23. new AjaxOptions
  24. {
  25. UpdateTargetId = "DescriptionDiv",
  26. HttpMethod = "post"
  27. }, new { id = "ajaxForm" } )) {%>
  28. Description:
  29. <%= Html.TextBox("Description", Model.Description) %><br />
  30. <a href="#" class="submit-link" style="display: none;">Save</a>
  31. <noscript>
  32. <input type="submit" value="Save" />
  33. </noscript>
  34. <% } %>
  35.  
  36. <div class="searchBar">
  37. <form action="<%= Url.Action ("SearchByName") %>" method="get" class="searchSubmitForm">
  38. <label for="projectName">Search:</label>
  39. <%= Html.TextBox ("projectName") %>
  40. <input class="submit" type="submit" value="Search" />
  41. </form>
  42. </div>
  43. <div id="projectList">
  44. <% Html.RenderPartial ("ProjectList", Model); %>
  45. </div>
  46.  
  47. <script type="text/javascript">
  48. jQuery(document).ready(function() {
  49. jQuery("#projectName").keyup(function() {
  50. jQuery(".searchSubmitForm").submit();
  51. });
  52.  
  53. jQuery(".searchSubmitForm").submit(function() {
  54. var options = {
  55. target : '#projectList'
  56. }
  57.  
  58. jQuery(this).ajaxSubmit(options);
  59.  
  60. return false;
  61. });
  62.  
  63. // We remove the submit button here - good Javascript depreciation technique
  64. jQuery(".submit").remove();
  65. });
  66. </script>
  67.  
  68. public ActionResult SearchByName (string projectName)
  69. {
  70. var service = Factory.GetService<IProjectService> ();
  71. var result = service.GetProjects (projectName);
  72.  
  73. if (Request.IsAjaxRequest ())
  74. return PartialView ("ProjectList", result);
  75. else
  76. {
  77. TempData["Result"] = result;
  78. TempData["SearchCriteria"] = projectName;
  79.  
  80. return RedirectToAction ("Index");
  81. }
  82. }
  83.  
  84. public ActionResult Index ()
  85. {
  86. IQueryable<Project> projects;
  87. if (TempData["Result"] != null)
  88. projects = (IQueryable<Project>)TempData["Result"];
  89. else
  90. {
  91. var service = Factory.GetService<IProjectService> ();
  92. projects = service.GetProjects ();
  93. }
  94.  
  95. ViewData["projectName"] = TempData["SearchCriteria"];
  96.  
  97. return View (projects);
  98. }
  99.  
  100. <div id="pnlSearch">
  101.  
  102. <% using (Ajax.BeginForm("UserSearch", "Home", new AjaxOptions { UpdateTargetId = "pnlSearchResults" }, new { id="UserSearchForm" }))
  103. { %>
  104.  
  105. UserType: <%: Html.DropDownList("FilterUserType", Model.UserTypes, "--", new { onchange = "$('#UserSearchForm').trigger('onsubmit');" })%>
  106.  
  107. <% } %>
  108.  
  109. </div>
  110.  
  111. <div id="pnlSearchResults">
  112. <% Html.RenderPartial("UserSearchResults", Model); %>
  113. </div>
  114.  
  115. <script type="text/javascript">
  116. $(function() {
  117.  
  118. $('form#ajaxForm').submit(function(event) {
  119. eval($(this).attr('onsubmit')); return false;
  120. });
  121.  
  122. $('form#ajaxForm').find('a.submit-link').click( function() {
  123. $'form#ajaxForm').submit();
  124. });
  125.  
  126. }
  127. </script>
  128. <% using (Ajax.BeginForm("Update", "Description", new { id = Model.Id },
  129. new AjaxOptions
  130. {
  131. UpdateTargetId = "DescriptionDiv",
  132. HttpMethod = "post"
  133. }, new { id = "ajaxForm" } )) {%>
  134. Description:
  135. <%= Html.TextBox("Description", Model.Description) %><br />
  136. <a href="#" class="submit-link">Save</a>
  137. <% } %>
  138.  
  139. <a href="#">
  140.  
  141. <input type="submit" value="save" style="background: transparent none; border: 0px none; text-decoration: inherit; color: inherit; cursor: inherit" />
  142.  
  143. </a>
  144.  
  145. $('#detailsform').submit(function(e) {
  146. e.preventDefault();
  147. $.post($(this).attr("action"), $(this).serialize(), function(r) {
  148. $("#edit").html(r);
  149. });
  150. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement