ASP.NET MVC 3 Razor와 함께 Ajax.BeginForm 사용

사용에 대한 튜토리얼 또는 코드 예제가 있습니까? Ajax.BeginForm눈에 거슬리지 않는 유효성 검사 및 Ajax가있는 Asp.net MVC 3 내 가 있습니까?

이것은 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와 같이 끝납니다.

Darin의 솔루션이 결국 작동했지만 몇 가지 실수가 있었으므로 David와 비슷한 문제가 발생하여 Darin의 솔루션 아래 주석에서 결과가 새 페이지에 게시되었습니다.

메서드가 반환 된 후 폼으로 무언가를해야했기 때문에 나중에 사용하기 위해 저장했습니다.

var form = $(this);

그러나이 변수에는 ajax 호출에 사용되는 "action"또는 "method"특성이 없습니다.

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

Darin Dimitrov의 솔루션은 한 가지 예외로 저에게 효과적이었습니다. (의도적) 유효성 검사 오류가있는 부분보기를 제출하면 대화 상자에 중복 양식이 반환됩니다.

이 문제를 해결하려면 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;
    });
});

데이터 유효성 검사가 수행되지 않거나 내용이 항상 새 창에 반환되면 다음 세 줄이보기 맨 위에 있는지 확인하십시오.

<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 메서드에 전달해야합니다. 모델에 적용한 유효성 검사와 함께보기를 반환하고 Index.cshtml의 "targetId"div에 내용을 추가합니다. 부분 뷰의 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

이 두 가지만 Ajax 작업을 수행하기에 충분합니다.