This week only. Pastebin PRO Accounts Christmas Special! Don't miss 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: 153  |  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. });
clone this paste RAW Paste Data