Використання Ajax.BeginForm з ASP.NET MVC 3 Razor

Чи є підручник чи приклад коду використання Ajax.BeginFormв Asp.net MVC 3, де існує ненав’язлива перевірка та Ajax?

Це невловима тема для MVC 3, і я не можу зробити свою форму для належної роботи. Він виконає подачу Ajax, але ігнорує помилки перевірки.

Приклад:

Модель:

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

Контролер:

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

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

Вид:

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

і ось кращий (з моєї точки зору) приклад:

Вид:

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

який можна додатково покращити за допомогою додатка форми jQuery .

Я думаю, що всі відповіді пропустили вирішальний момент:

Якщо ви використовуєте форму Ajax таким чином, що вона потребує оновлення (а НЕ інший div поза формою), тоді вам потрібно поставити містить div OUTSIDE форми. Наприклад:

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

Інакше ви закінчитесь як @David, де результат відобразиться на новій сторінці.

Я змусив рішення Даріна в кінцевому підсумку, але спершу допустив кілька помилок, що призвело до проблеми, подібної до Девіда (у коментарях нижче рішення Даріна), де результат був розміщенням на новій сторінці.

Оскільки мені довелося щось робити з формою після повернення методу, я зберігав її для подальшого використання:

var form = $(this);

Однак ця змінна не мала властивостей "дія" чи "метод", які використовуються у виклику 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();
});

Натомість вам потрібно використовувати змінну "this":

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

Рішення Дарина Димитрова працювало на мене за одним винятком. Коли я подав частковий вигляд із (навмисними) помилками перевірки, я виявив, що у діалоговому вікні повертаються дублікати форм:

Щоб виправити це, мені довелося загортати Html.BeginForm у розділ:

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

Коли форма була подана, я очистив div у функції успіху та вивів затверджену форму:

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

Якщо не підтверджено перевірку даних або вміст завжди повертається в новому вікні, переконайтеся, що ці 3 рядки розташовані вгорі подання:

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

Приклад

// У моделі

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

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

У перегляді 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>
}

У контролері

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

ви повинні передати ViewName та Model методу RenderPartialViewToString. він поверне вам перегляд із підтвердженням, який ви застосували в моделі та додасть вміст у розділ "targetId" у Index.cshtml. Я таким чином, уловивши RenderHtml часткового перегляду, ви можете застосувати перевірку.

Форми Ajax працюють асинхронно за допомогою Javascript. Тому потрібно завантажити файли сценаріїв для виконання. Незважаючи на те, що це невеликий компроміс щодо продуктивності, виконання відбувається без поштового зворотного зв'язку.

Нам потрібно зрозуміти різницю між поведінкою як Html, так і Ajax форм.

Аякс:

1. Не вдасться переспрямувати форму, навіть якщо ви зробите RedirectAction ().

2. Асинхронно виконуватиме збереження, оновлення та будь-які операції з модифікації.

Html:

1. Переспрямує форму.

2. Виконуватиме операції як синхронно, так і асинхронно (з деяким додатковим кодом та обережністю).

Продемонстрував відмінності за допомогою POC у нижченаведеному посиланні. Посилання

До додавання Ajax.BeginForm. Додайте нижче сценарії до свого проекту у вказаному порядку,

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

Тільки цих двох достатньо для виконання операції «Аякс».