Использование Ajax.BeginForm с ASP.NET MVC 3 Razor


264

Есть ли учебник или пример кода использования Ajax.BeginFormв Asp.net MVC 3, где существуют ненавязчивая проверка и Ajax?

Это неуловимая тема для MVC 3, и я не могу заставить свою форму работать должным образом. Он выполнит отправку Ajax, но проигнорирует ошибки проверки.

Ответы:


427

Пример:

Модель:

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 .


41
Я согласен с использованием jQUery для Ajax. Я думаю, что подавляющее большинство приложений Ajax MVC Asp.net скорее используют jQuery, чем встроенные расширения Ajax.
Роберт Коритник

6
Я использую что-то вроде следующего, и результат, похоже, идет на свою страницу, а не просто заменяет результат div. Ты знаешь почему?
Дэвид

3
Да, я тоже согласен с использованием чистого jQuery для ajax, использование расширения ajax MVC означает, что вам не нужно изучать другие правила и синтаксис, чтобы, в конце концов, использовать jQuery. Так что даже мне нужно писать больше, но лучше делать это правильно, плюс вы получаете больше контроля и гибкости.
Нестор

3
@ darin-dimitrov: когда я попробую ваш последний пример, я должен добавить data: $ ('form'). serialize () в вызов ajax (). В противном случае данные формы не передаются и моя модель недействительна на стороне сервера. Интересно, есть ли что-то, что я упустил из виду?
Бретт

2
@DarinDimitrov Что делать, если с BLL произошла ошибка, и вам необходимо отправить модель обратно в представление и показать сообщение об ошибке, поскольку усиленный слой обеспечил более глубокую проверку данных и обнаружил проблему. Просто полагаться на проверку на стороне клиента недостаточно. Вы не можете вернуть View (модель); теперь, потому что весь вид отображается в результате div ... какой обходной путь для этого?
CD Smith

54

Я думаю, что во всех ответах пропущен важный момент:

Если вы используете форму Ajax так, что она должна обновлять себя (а НЕ другой div вне формы), тогда вам нужно поместить содержащий div ВНЕ формы. Например:

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

В противном случае вы закончите как @David, где результат отображается на новой странице.


7
Проблема Дэвида почти всегда вызвана отсутствием пакета jqueryval, который содержит ненавязчивый код ajax. Будьте очень осторожны с этим подходом, который вы опубликовали, иначе вы получите одно сообщение, а затем ваша форма будет скрыта, поскольку вы только что заменили ее. Затем вам необходимо, чтобы представление «MyAction» управляло его формой и повторно указывало все параметры ajax в нем.
Адам Тюльпер - MSFT

В моем приложении таргетированный div показывает всю форму с главной страницей, пожалуйста, помогите мне
Нитин ...

Для меня я не установил UnobtrusiveJavaScriptEnabledистину нигде
Кунал

15

В конце концов я получил работающее решение Дарина, но сначала сделал несколько ошибок, которые привели к проблеме, аналогичной Дэвиду (в комментариях к решению Дарина), когда результатом было размещение на новой странице.

Поскольку мне пришлось что-то делать с формой после возврата метода, я сохранил ее для дальнейшего использования:

var form = $(this);

Однако эта переменная не имела свойств "action" или "method", которые используются в вызове 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.
    }
});

5
Это потому, что переменная формы вы установили jQueryобъект с формой в качестве селектора. form[0]будет иметь свойства. Хорошей практикой также является добавление префиксов к любым jQueryпеременным, $чтобы легче было их идентифицировать.
Джеймс Саут

6

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

введите описание изображения здесь

Чтобы это исправить, я должен был обернуть Html.BeginForm в div:

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

Я тоже получаю ту же ошибку. Я использую, Partial Viewsчтобы сделать функцию создания ниже страницы индекса. Я могу получить все сообщения проверки в частичном представлении. Но когда Createуспешно, индекс отображается дважды. У меня нет Html.BeginFormв моем представлении индекса.
Вино

Попробуйте использовать UpdateTargetId = "myForm"вместо этого
Кунал

4

Если проверка данных не требуется или содержимое всегда возвращается в новом окне, убедитесь, что эти 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>

Я не нашел их в решении. Я должен был установить их из диспетчера пакетов
Nuget

3

пример

// в модели

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. он вернет вам представление с проверкой, которую вы применили в модели, и добавит содержимое в div "targetId" в Index.cshtml. Таким образом, перехватывая RenderHtml частичного просмотра, вы можете применить проверку.


3

Формы Ajax работают асинхронно с использованием Javascript. Поэтому требуется загрузить файлы сценариев для выполнения. Хотя это небольшой компромисс в производительности, выполнение происходит без обратной передачи.

Нам нужно понять разницу между поведением форм Html и Ajax.

Ajax:

  1. Не будет перенаправлять форму, даже если вы делаете RedirectAction ().

  2. Выполняет операции сохранения, обновления и любых модификаций асинхронно.

Html:

  1. Перенаправит форму.

  2. Выполняет операции как синхронно, так и асинхронно (с некоторым дополнительным кодом и осторожностью).

Продемонстрировал различия с POC в ссылке ниже. Ссылка на сайт


1

До добавления Ajax.BeginForm. Добавьте нижеприведенные скрипты в ваш проект в указанном порядке,

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

Только этих двух достаточно для выполнения операции Ajax.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.