forum

Home / DeveloperSection / Forums / How to use Ajax.BeginForm in Asp.Net MVC?

Ask Question

How to use Ajax.BeginForm in Asp.Net MVC?

Anonymous User237107-Oct-2014
Is there a tutorial or code example of using Ajax.BeginForm within Asp.net MVC 3 where unobtrusive validation and Ajax exist?

This is an elusive topic for MVC 3, and I cannot seem to get my form to work properly. It will do an Ajax submit but ignores the validation errors.
asp.net mvcasp.net asp.net mvc 
Updated on 07-Oct-2014
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

1 Answers

Anonymous User

Anonymous User

07-Oct-2014
Example:
Model

publicclassMyViewModel
        {
            [Required]
            publicstring Foo { get; set; }
        }

Controller

publicclassHomeController : Controller
        {
            publicActionResult Index()
            {
                return View(new MyViewModel());
            }
 
            [HttpPost]
            publicActionResult Index(MyViewModel model)
            {
                return Content("Thanks", "text/html");
            }
        }

View

@model AppName.Models.MyViewModel
 
<scriptsrc="@Url.Content("~/Scripts/jquery.validate.js")"type="text/javascript"></script>
<scriptsrc="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"type="text/javascript"></script>
<scriptsrc="@Url.Content("~/Scripts/index.js")"type="text/javascript"></script>
 
<divid="result"></div>
 
@using (Html.BeginForm())
{
    @Html.EditorFor(x => x.Foo)
    @Html.ValidationMessageFor(x => x.Foo)
    <inputtype="submit"value="OK"/>
}

Javascript

<script>
    $(function () {
        $('form').submit(function () {
            if ($(this).valid()) {
                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) {
                        $('#result').html(result);
                    }
                });
            }
            returnfalse;
        });
    });
</script>

Liked By