Ajax.BeginForm'u ASP.NET MVC 3 Razor ile Kullanma

Ajax.BeginFormMütevazi doğrulama ve Ajax'ın bulunduğu Asp.net MVC 3 içinde kullanım için bir öğretici veya kod örneği var mı?

Bu, MVC 3 için zor bir konudur ve formumun düzgün çalışmasını sağlayamıyorum. Bir Ajax gönderimi yapar, ancak doğrulama hatalarını yok sayar.

Misal:

Model:

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

Denetleyici:

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

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

Görünüm:

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

ve işte daha iyi bir bakış açısı:

Görünüm:

@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 form eklentisi ile daha da geliştirilebilir .

Bence tüm cevaplar önemli bir noktayı kaçırdı:

Ajax formunu, kendisini güncelleştirmesi (ve formun dışında başka bir div DEĞİL) olması için kullanırsanız , formun içeren div DIŞINDA koymanız gerekir . Örneğin:

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

Aksi takdirde, sonucun yeni bir sayfada görüntülendiği @David gibi sona ereceksiniz.

Sonunda Darin'in çözümünü aldım ama önce birkaç hata yaptım, bu da sonucun yeni bir sayfaya gönderildiği David'e (Darin'in çözümünün altındaki yorumlarda) benzer bir soruna yol açtı.

Yöntem döndükten sonra formla bir şeyler yapmak zorunda olduğum için, daha sonra kullanmak üzere sakladım:

var form = $(this);

Ancak bu değişken, ajax çağrısında kullanılan "action" veya "method" özelliklerine sahip değildi.

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

Bunun yerine "this" değişkenini kullanmanız gerekir:

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

Darin Dimitrov'un çözümü benim için bir istisna dışında çalıştı. Kısmi görünümü (kasıtlı) doğrulama hatalarıyla gönderdiğimde, iletişim kutusunda yinelenen formların döndürülmesiyle sonuçlandım:

Bu düzeltmek için bir div Html.BeginForm sarmak zorunda kaldı:

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

Form gönderildiğinde, başarı işlevindeki div değerini temizledim ve onaylanmış formu çıktıladım:

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

Hiçbir veri doğrulaması kesilmezse veya içerik her zaman yeni bir pencerede döndürülürse, şu 3 satırın görünümün üstünde olduğundan emin olun:

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

Misal

// Modelde

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

// PartailView'da //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 görünümünde

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

Denetleyicide

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 ve Model'i RenderPartialViewToString yöntemine geçirmeniz gerekir. modelde uyguladığınız doğrulamayı görüntülemenizi döndürür ve içeriği Index.cshtml dosyasındaki "targetId" div öğesine ekler. Bu şekilde kısmi görünüm RenderHtml yakalayarak doğrulama uygulayabilirsiniz.

Ajax formları Javascript kullanılarak eşzamansız olarak çalışır. Bu nedenle, yürütme için komut dosyalarının yüklenmesi gerekir. Küçük bir performans ödün vermesine rağmen, yürütme geri gönderme olmadan gerçekleşir.

Hem Html hem de Ajax formlarının davranışları arasındaki farkı anlamamız gerekir.

ajax:

1. Bir RedirectAction () yapsanız bile formu yeniden yönlendirmezsiniz.

2. Kaydetme, güncelleme ve tüm değişiklik işlemlerini eşzamansız olarak gerçekleştirir.

Html:

1. Formu yeniden yönlendirir.

2. Hem Eşzamanlı hem de Eşzamansız işlemleri gerçekleştirir (Bazı ekstra kod ve dikkatle).

Aşağıdaki linkte bir POC ile farklılıkları gösterildi. bağlantı

Ajax.BeginForm eklemeden önce. Projenize belirtilen sırayla aşağıdaki komut dosyalarını ekleyin,

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

Ajax işlemini gerçekleştirmek için sadece bu ikisi yeterlidir.