Korzystanie Z Ajax.BeginForm with ASP.NET Maszynka Do Golenia MVC 3

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

Jeśli używasz formularza Ajax tak, że musi on sam się zaktualizować (a nie inny div poza formularzem), musisz umieścić zawierający div Poza 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 zostanie wyświetlony na nowej stronie.

Mam rozwiązanie Darin działa w końcu, ale popełnił kilka błędów, które doprowadziły do problemu podobnego do Davida (w komentarzach poniżej rozwiązania Darin), gdzie wynik był publikowanie na nowej stronie.

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

var form = $(this);

Jednak ta zmienna nie miała właściwości "action" lub "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ć "tego" zmienna:

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

Rozwiązanie Darina Dimitrowa zadziałało dla mnie z jednym wyjątkiem. Po przesłaniu częściowego widoku z (celowymi) błędami walidacji, w oknie dialogowym zwrócono zduplikowane formularze:

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>

Kiedy formularz został złożony, wyczyściłem div w funkcji success I wypisałem zwalidowany 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 walidacja danych nie jest wyłączona lub zawartość jest zawsze zwracana w nowym oknie, upewnij się, że te 3 linie znajdują się na górze 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 // PartailViewcshtml

@model MyModel

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

W Indeksie.widok 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>
}

In Controller

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 walidacją, którą zastosowałeś w modelu i dopisze treść w polu" targetId " div w indeksie.cshtml. I w ten sposób poprzez przechwycenie renderhtml częściowego widoku można zastosować walidację.

Formularze Ajax działają asynchronicznie przy użyciu Javascript. Jest więc wymagane, aby załadować pliki skryptów do wykonania. Mimo że jest to mały kompromis wydajności, wykonanie odbywa się bez postbacku.

Musimy zrozumieć różnicę między zachowaniami formularzy Html i Ajax.

Ajax:

1. Nie przekieruje formularza, nawet jeśli wykonasz przekierowanie ().

2. Wykona operacje zapisu, aktualizacji i modyfikacji asynchronicznie.

Html:

1. Przekieruje formularz.

2. Wykonuje operacje zarówno synchronicznie jak i asynchronicznie(z dodatkowym kodem i troską).

Pokazano różnice z POC w poniższym linku. Link

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

1. jquery-1.7.1./ min.js
2. jquery.dyskretny-ajax./ min.js

Tylko te dwa wystarczą do wykonania operacji Ajax.