Usando Ajax.BeginForm con ASP.NET MVC 3 Razor

¿Hay un tutorial o ejemplo de código de uso Ajax.BeginFormdentro de Asp.net MVC 3 donde existe una validación discreta y Ajax?

Este es un tema evasivo para MVC 3, y parece que no puedo hacer que mi formulario funcione correctamente. Hará un envío Ajax pero ignora los errores de validación.

Ejemplo:

Modelo:

public class MyViewModel
{
    [Required]
    public string Foo { get; set; }
}

Controlador:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return Content("Thanks", "text/html");
    }
}

Ver:

@model AppName.Models.MyViewModel

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

<div id="result"></div>

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" }))
{
    @Html.EditorFor(x => x.Foo)
    @Html.ValidationMessageFor(x => x.Foo)
    <input type="submit" value="OK" />
}

y aquí hay un mejor ejemplo (en mi perspectiva):

Ver:

@model AppName.Models.MyViewModel

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/index.js")" type="text/javascript"></script>

<div id="result"></div>

@using (Html.BeginForm())
{
    @Html.EditorFor(x => x.Foo)
    @Html.ValidationMessageFor(x => x.Foo)
    <input type="submit" value="OK" />
}

index.js:

$(function () {
    $('form').submit(function () {
        if ($(this).valid()) {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    $('#result').html(result);
                }
            });
        }
        return false;
    });
});

que se puede mejorar aún más con el complemento de formulario jQuery .

Creo que todas las respuestas perdieron un punto crucial:

Si se utiliza el formulario Ajax por lo que tiene que actualizarse (y no otro div exterior de la forma), entonces usted necesita para poner el div que contiene FUERA de la forma. Por ejemplo:

 <div id="target">
 @using (Ajax.BeginForm("MyAction", "MyController",
            new AjaxOptions
            {
                HttpMethod = "POST",
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "target"
            }))
 {
      <!-- whatever -->
 }
 </div>

De lo contrario, terminará como @David donde el resultado se muestra en una nueva página.

Finalmente conseguí que la solución de Darin funcionara, pero primero cometí algunos errores que resultaron en un problema similar a David (en los comentarios debajo de la solución de Darin) donde el resultado se publicaba en una nueva página.

Debido a que tuve que hacer algo con el formulario después de que el método regresó, lo almacené para su uso posterior:

var form = $(this);

Sin embargo, esta variable no tenía las propiedades "acción" o "método" que se utilizan en la llamada ajax.

$(document).on("submit", "form", function (event) {
    var form = $(this);

    if (form.valid()) {
        $.ajax({
            url: form.action, // Not available to 'form' variable
            type: form.method,  // Not available to 'form' variable
            data: form.serialize(),
            success: function (html) {
                // Do something with the returned html.
            }
        });
    }

    event.preventDefault();
});

En su lugar, debe usar la variable "this":

$.ajax({
    url: this.action, 
    type: this.method,
    data: $(this).serialize(),
    success: function (html) {
        // Do something with the returned html.
    }
});

La solución de Darin Dimitrov funcionó para mí con una excepción. Cuando envié la vista parcial con errores de validación (intencionales), terminé devolviendo formularios duplicados en el cuadro de diálogo:

Para solucionar esto, tuve que envolver el Html.BeginForm en un div:

<div id="myForm">
    @using (Html.BeginForm("CreateDialog", "SupportClass1", FormMethod.Post, new { @class = "form-horizontal" }))
    {
        //form contents
    }
</div>

Cuando se envió el formulario, borré el div en la función de éxito y envié el formulario validado:

    $('form').submit(function () {
        if ($(this).valid()) {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    $('#myForm').html('');
                    $('#result').html(result);
                }
            });
        }
        return false;
    });
});

Si no se realizó ninguna validación de datos, o el contenido siempre se devuelve en una nueva ventana, asegúrese de que estas 3 líneas estén en la parte superior de la vista:

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

Ejemplo

// En modelo

public class MyModel
{  
   [Required]
    public string Name{ get; set; }
}

// En PartailView //PartailView.cshtml

@model MyModel

<div>
    <div>
      @Html.LabelFor(model=>model.Name)
    </div>
    <div>
        @Html.EditorFor(model=>model.Name)
        @Html.ValidationMessageFor(model => model.Name)
    </div>
</div>

En la vista Index.cshtml

@model MyModel
<div id="targetId">
    @{Html.RenderPartial("PartialView",Model)}
</div>

@using(Ajax.BeginForm("AddName", new AjaxOptions { UpdateTargetId = "targetId", HttpMethod = "Post" }))
{
     <div>
        <input type="submit" value="Add Unit" />
    </div>
}

En el controlador

public ActionResult Index()
{
  return View(new MyModel());
}


public string AddName(MyModel model)
{
   string HtmlString = RenderPartialViewToString("PartailView",model);
   return HtmlString;
}


protected string RenderPartialViewToString(string viewName, object model)
        {
            if (string.IsNullOrEmpty(viewName))
                viewName = ControllerContext.RouteData.GetRequiredString("action");

            ViewData.Model = model;

            using (StringWriter sw = new StringWriter())
            {
                ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
                ViewContext viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
                viewResult.View.Render(viewContext, sw);
                return sw.GetStringBuilder().ToString();
            }
        }

debe pasar ViewName y Model al método RenderPartialViewToString. le devolverá la vista con la validación que está aplicando en el modelo y agregará el contenido en "targetId" div en Index.cshtml. De esta manera, al capturar RenderHtml de vista parcial, puede aplicar la validación.

Los formularios Ajax funcionan de forma asíncrona usando Javascript. Por lo tanto, es obligatorio cargar los archivos de script para su ejecución. Aunque es un pequeño compromiso de rendimiento, la ejecución se realiza sin devolución de datos.

Necesitamos entender la diferencia entre los comportamientos de los formularios Html y Ajax.

Ajax:

1. No redirigirá el formulario, incluso si realiza una Acción de redireccionamiento ().

2. Realizará operaciones de guardado, actualización y modificación de forma asincrónica.

HTML:

1. Redirigirá el formulario.

2. Realizará operaciones tanto sincrónicamente como asincrónicamente (con un código adicional y cuidado).

Demostró las diferencias con un POC en el siguiente enlace. Enlace

Antes de agregar el Ajax.BeginForm. Agregue los siguientes scripts a su proyecto en el orden mencionado,

1. jquery-1.7.1.min.js
2. jquery.unobtrusive-ajax.min.js

Solo estos dos son suficientes para realizar la operación Ajax.