Submit Form using Ajax. Could someone please help me out? RSS

• • Reply
  

  shapper

  Contributor

  3932 Points

  3789 Posts

  Submit Form using Ajax. Could someone please help me out?

  Feb 26, 2009 12:56 PM|LINK

  Hello,

  I have a view with a form that includes a validation summary.

  On the controller I have the action that uses TryUpdateModel and Model Validation.

  Everything is working fine.

  Is there a way in MVC to make this form being submitted using Ajax?

  HTML View
  

  <%Html.BeginForm<BoxController>(bc => bc.Create(), FormMethod.Post, new { id = "Create" });%>
        <%=Html.ValidationSummary(new { @class ="Validation" })%>
            <label for="Name" class="Required">Nome</label>
            <%=Html.TextBox("Name")%>
            <label for="Body">Conteúdo</label>
            <%=Html.TextArea("Body", null, 10, 20, new { @class ="_TinyMCE-Extended" })%>
        <%=Html.SubmitButton("Submit", "Create", new { title ="Create", @class ="Submit" })%>
        <%=Html.AntiForgeryToken()%>
    <%Html.EndForm();%>

  Controller Action
  

      [AcceptVerbs(HttpVerbs.Get), Authorize(Roles = "Administrator")]
      public ActionResult Create() {
        VBox vBox = new VBox {
          Box = new YBox(),
        };
        return View(vBox);
      } // Create
  
      [AcceptVerbs(HttpVerbs.Post), Authorize(Roles = "Administrator"), ValidateAntiForgeryToken, ValidateInput(false)]
      public ActionResult Create(FormCollection collection) {
        VBox vBox = new VBox {
          Box = new YBox(),
        };
        TryUpdateModel(vBox.Box, new[] { "Body", "Name" });
        if (ModelState.IsValid) {
          BoxService.CreateBox(vBox.Box);
          return RedirectToAction("List");
        }
        else {
          return View(vBox);
        }
      } // Create

  Thanks,

  Miguel
  

• • Reply
  

  Augi

  Contributor

  6730 Points

  1142 Posts

  Re: Submit Form using Ajax. Could someone please help me out?

  Feb 26, 2009 02:39 PM|LINK

  You can use Ajax.BeginForm method [:)]

  Don't forget to click "Mark as Answer" on the post that helped you.
• • Reply
  

  shapper

  Contributor

  3932 Points

  3789 Posts

  Re: Submit Form using Ajax. Could someone please help me out?

  Feb 26, 2009 04:26 PM|LINK

  So all I need is to replace my BeginForm by Ajax.BeginForm and probably include Microsoft.Ajax on my site?

  And how can I check when the form is sussefuly submited?

  I would like to fire a JQuery command that displays a message when that happens.

  Thanks,

  Miguel
  

• • Reply
  

  Augi

  Contributor

  6730 Points

  1142 Posts

  Re: Submit Form using Ajax. Could someone please help me out?

  Feb 26, 2009 09:58 PM|LINK

  Ajax.BeginForm method generates form element that handles onsubmit event by Sys.Mvc.AsyncForm.handleSubmit JavaScript function. So you have to add MicrosoftAjax.js and MicrosoftAjaxMvc.js into your page.
  When you are calling Ajax.BeginForm method then you can pass AjaxOptions as parameter. This class has properties OnBegin, OnProcess, OnComplete and OnFailture that can be set to name of JavaScript function that will be called in appropriate situation.

  Don't forget to click "Mark as Answer" on the post that helped you.
• • Reply
  

  shapper

  Contributor

  3932 Points

  3789 Posts

  Re: Submit Form using Ajax. Could someone please help me out?

  Feb 26, 2009 11:10 PM|LINK

  Hi,

  I was able to make it work as follows:
  

  <% using (Ajax.BeginForm("Create", "Box", new AjaxOptions() { OnSuccess = "", HttpMethod = "POST" }, new { id = "Create" })) { %>

  There is only one problem:

  When I submit the form with errors the Validation Summary does now show.

  Any idea why?

  Thanks,

  Miguel
  

   

• • Reply
  

  Augi

  Contributor

  6730 Points

  1142 Posts

  Re: Submit Form using Ajax. Could someone please help me out?

  Feb 27, 2009 08:04 AM|LINK

  It cannot show because you didn't specify UpdateTargetId on AjaxOptions so this AJAX call has no output to page. I'm using this scenario:

  1) form element has some id - you specified it to "Create". It's OK.
  2) AjaxOptions.UpdateTargetId is set to this id value, so add UpdateTargetId = "Create" into AjaxOptions initializer.
  3) Action method that is handling AJAX request returns partial-view that contains form element (including validation summary). Thanks to UpdateTargetId value, this new rendered partial-view will replace old form element.

  Don't forget to click "Mark as Answer" on the post that helped you.
• • Reply
  

  shapper

  Contributor

  3932 Points

  3789 Posts

  Re: Submit Form using Ajax. Could someone please help me out?

  Feb 27, 2009 11:28 AM|LINK

  I added the UpdateId but something strange happens:

  On the form region the same page appears again! The form and everything else.
  

  Do you mean I need to create a partial view (ascx) and insert the form there?

  I did that and added <%Html.RenderPartial("CreateForm");%> on my Create view but the same problem happens.

  Any idea?

  Thanks,

  Miguel
  

   
  

• • Reply
  

  Augi

  Contributor

  6730 Points

  1142 Posts

  Re: Submit Form using Ajax. Could someone please help me out?

  Feb 27, 2009 12:17 PM|LINK

  You should have partial view (ascx) that contains form only. If you are rendering page then you can render this partial view using Html.RenderPartial (as you wrote). But if you are processing AJAX data then you cannot return View() (which represents whole page) but only PartialView() method. So if you are processing AJAX data the you should output partial view only.

  Don't forget to click "Mark as Answer" on the post that helped you.
• • Reply
  

  shapper

  Contributor

  3932 Points

  3789 Posts

  Re: Submit Form using Ajax. Could someone please help me out?

  Feb 27, 2009 12:36 PM|LINK

  Still happens the same ... I am lost. This is what I have:

  View Html
  

  <%Html.RenderPartial("CreateForm");%>

  ASCX Partial View  
  

    <% using (Ajax.BeginForm("Create", "Box", new AjaxOptions() { OnSuccess = "", HttpMethod = "POST", UpdateTargetId = "CreateForm" }, new { @class = "Base", id = "CreateForm" })) { %>
        <%=Html.ValidationSummary(new { @class ="Validation" })%>
            <label for="Name" class="Required">Nome</label>
            <%=Html.TextBox("Name")%>
            <label for="Body">Conteúdo</label>
            <%=Html.TextArea("Body", null, 10, 20, new { @class ="_TinyMCE-Extended" })%>
        <%=Html.SubmitButton("Submit", "Create", new { title ="Create", @class ="Submit" })%>
        <%=Html.AntiForgeryToken()%> 
    <%}%>  
  

  Controller Actions 
  

      [AcceptVerbs(HttpVerbs.Get), Authorize(Roles = "Administrator")]
      public ActionResult Create() {
        VBox vBox = new VBox {
          Box = new YBox(),
        };
        return PartialView(vBox);
      } // Create
  
      [AcceptVerbs(HttpVerbs.Post), Authorize(Roles = "Administrator"), ValidateAntiForgeryToken, ValidateInput(false)]
      public ActionResult Create(FormCollection collection) {
        VBox vBox = new VBox {
          Box = new YBox(),
        };
        TryUpdateModel(vBox.Box, new[] { "Body", "Name" });
        if (ModelState.IsValid) {
          BoxService.CreateBox(vBox.Box);
          return RedirectToAction("List");
        }
        else {
          return PartialView(vBox);
        }
      } // Create

  Am I missing something? 

  A side note: can I also use Ajax.BeginForm when a file is being uploaded?

  Thanks,

  Miguel 
  

   
  
• • Reply
  

  Augi

  Contributor

  6730 Points

  1142 Posts

  Re: Submit Form using Ajax. Could someone please help me out?

  Feb 27, 2009 03:55 PM|LINK

  Create action method for GET should return View, not PartialView. This method should be used for whole page rendering so you should call View("Page") where Page.aspx is page that contains <html><head>.... code and Html.RenderPartial("CreateForm").

  Create action method for POST will be called after submit button click and result of this request will be rendered. So you should always get some PartialView, not RedirectToAction. If all is OK in Create POST method then you should indicate it by some message rendering. You cannot use RedirectToAction here...

  Don't forget to click "Mark as Answer" on the post that helped you.