ใช้ 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 ด้านนอกที่มีรูปแบบ ตัวอย่างเช่น:

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

มิฉะนั้นคุณจะสิ้นสุดเช่น @David ซึ่งผลลัพธ์จะปรากฏในหน้าใหม่

ในที่สุดฉันก็ได้วิธีการแก้ปัญหาของดารินในที่สุด แต่ก็ทำผิดพลาดเล็กน้อยก่อนซึ่งทำให้เกิดปัญหาคล้ายกับเดวิด

เพราะฉันต้องทำอะไรบางอย่างกับแบบฟอร์มหลังจากที่วิธีการส่งกลับฉันเก็บไว้เพื่อใช้ในภายหลัง:

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

โซลูชันของดารินดิมิทรอฟทำงานให้ฉันด้วยข้อยกเว้นหนึ่งข้อ เมื่อฉันส่งมุมมองที่มีข้อผิดพลาดในการตรวจสอบ (โดยเจตนา) ฉันลงเอยด้วยการส่งคืนฟอร์มที่ซ้ำกันในกล่องโต้ตอบ:

ในการแก้ไขปัญหานี้ฉันต้องห่อ 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;
    });
});

หากไม่มีการตรวจสอบความถูกต้องของข้อมูลหรือมีการส่งคืนเนื้อหาในหน้าต่างใหม่เสมอตรวจสอบให้แน่ใจว่า 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 มันจะกลับมาคุณดูด้วยการตรวจสอบซึ่งคุณใช้ในรูปแบบและผนวกเนื้อหาใน div "targetId" ใน Index.cshtml ฉันด้วยวิธีนี้โดยจับ RenderHtml ของมุมมองบางส่วนที่คุณสามารถใช้การตรวจสอบ

Ajax ฟอร์มทำงานแบบอะซิงโครนัสโดยใช้ Javascript ดังนั้นจึงจำเป็นต้องโหลดไฟล์สคริปต์เพื่อดำเนินการ แม้ว่ามันจะมีประสิทธิภาพลดลงเล็กน้อย แต่การประมวลผลก็เกิดขึ้นโดยไม่มี postback

เราจำเป็นต้องเข้าใจความแตกต่างระหว่างพฤติกรรมของทั้ง Html และ Ajax form

อาแจ็กซ์:

1. จะไม่เปลี่ยนเส้นทางแบบฟอร์มแม้ว่าคุณจะทำ RedirectAction ()

2. จะทำการบันทึกอัปเดตและการดำเนินการแก้ไขใด ๆ แบบอะซิงโครนัส

Html:

1. จะเปลี่ยนเส้นทางแบบฟอร์ม

2. จะทำการดำเนินการทั้งแบบซิงโครนัสและแบบอะซิงโครนัส (ด้วยรหัสพิเศษและการดูแล)

แสดงให้เห็นถึงความแตกต่างกับ POC ในลิงค์ด้านล่าง ลิงค์

ก่อนที่จะเพิ่ม Ajax.BeginForm เพิ่มสคริปต์ด้านล่างลงในโครงการของคุณตามลำดับที่กล่าวถึง

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

มีเพียงสองรายการนี้เท่านั้นที่เพียงพอสำหรับการดำเนินการ Ajax