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.
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.
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.
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.
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 ActionThanks,
Miguel
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 [:)]
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
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.
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
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.
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
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.
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 ActionsAugi
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...