Korzystanie z Ajax.BeginForm z ASP.NET MVC 3 Razor

Czy istnieje samouczek lub przykład użycia Ajax.BeginFormw Asp.net MVC 3, gdzie istnieją dyskretne sprawdzanie poprawności i Ajax?

To nieuchwytny temat dla MVC 3 i wydaje mi się, że mój formularz nie działa poprawnie. Dokonuje przesłania Ajax, ale ignoruje błędy sprawdzania poprawności.

Przykład:

Model:

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

Kontroler:

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

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

Widok:

@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" />
}

a oto lepszy (z mojej perspektywy) przykład:

Widok:

@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;
    });
});

które można dodatkowo ulepszyć za pomocą wtyczki jQuery .

Myślę, że wszystkie odpowiedzi pominęły kluczowy punkt:

Jeśli używasz formularza Ajax, aby musiał się zaktualizować (a NIE inny div poza formularzem), musisz umieścić div zawierający NA ZEWNĄTRZ formularza. Na przykład:

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

W przeciwnym razie skończysz jak @David, gdzie wynik jest wyświetlany na nowej stronie.

W końcu udało mi się uruchomić rozwiązanie Darina, ale najpierw popełniłem kilka błędów, co spowodowało problem podobny do Davida (w komentarzach poniżej rozwiązania Darina), gdzie wynik był publikowany na nowej stronie.

Ponieważ po zwróceniu metody musiałem coś zrobić z formularzem, zapisałem go do późniejszego użycia:

var form = $(this);

Jednak ta zmienna nie miała właściwości „action” ani „method”, które są używane w wywołaniu 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();
});

Zamiast tego musisz użyć zmiennej „this”:

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

Rozwiązanie Darina Dimitrowa działało dla mnie z jednym wyjątkiem. Kiedy przesłałem widok częściowy z (celowymi) błędami weryfikacji, w oknie dialogowym zwrócono duplikaty formularzy:

Aby to naprawić musiałem zawinąć Html.BeginForm w div:

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

Po przesłaniu formularza wyczyściłem div w funkcji powodzenia i wyprowadziłem zweryfikowany formularz:

    $('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;
    });
});

Jeśli nie sprawdzono sprawdzania poprawności danych lub treść jest zawsze zwracana w nowym oknie, upewnij się, że te 3 wiersze znajdują się u góry widoku:

<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>

Przykład

// W modelu

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

// W 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>

W widoku 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>
}

W kontrolerze

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();
            }
        }

musisz przekazać ViewName i Model do metody RenderPartialViewToString. zwróci ci widok z zatwierdzeniem, które zostały zastosowane w modelu i dołączą treść do div „targetId” w Index.cshtml. W ten sposób, przechwytując RenderHtml częściowego widoku, możesz zastosować walidację.

Formularze Ajax działają asynchronicznie przy użyciu Javascript. Konieczne jest więc załadowanie plików skryptów do wykonania. Mimo że jest to niewielki kompromis w zakresie wydajności, wykonanie odbywa się bez postback.

Musimy zrozumieć różnicę między zachowaniem formularzy HTML i Ajax.

Ajax:

1. Nie przekieruje formularza, nawet jeśli wykonasz funkcję RedirectAction ().

2. Wykona asynchronicznie operacje zapisywania, aktualizacji i wszelkich modyfikacji.

HTML:

1. Przekieruje formularz.

2. Wykonuje operacje zarówno synchronicznie, jak i asynchronicznie (z dodatkowym kodem i ostrożnością).

Wykazano różnice za pomocą POC w poniższym linku. Połączyć

Przed dodaniem Ajax.BeginForm. Dodaj poniższe skrypty do swojego projektu w podanej kolejności,

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

Tylko te dwa są wystarczające do wykonania operacji Ajax.