Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

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

By: a guest on Jan 2nd, 2012  |  syntax: None  |  size: 4.08 KB  |  views: 144  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  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. });