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


264

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

이것은 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
Ajax에 jQUery를 사용하는 것에 동의합니다. Asp.net MVC Ajax 애플리케이션의 대다수는 기본 제공 Ajax 확장보다 jQuery를 사용한다고 생각합니다.
Robert Koritnik

6
다음과 같은 것을 사용하고 있으며 결과는 div 결과를 바꾸는 것이 아니라 자체 페이지로 이동하는 것 같습니다. 왜 그런지 아십니까?
David

3
예, 나는 ajax에 순수한 jQuery를 사용하는 것에 동의합니다 .MVC ajax 확장을 사용하면 결국 jQuery를 사용하기 위해 다른 규칙과 구문을 불필요하게 배울 필요가 있음을 의미합니다. 따라서 더 많은 것을 작성해야하지만 올바른 방식으로하는 것이 좋습니다. 또한 더 많은 제어와 유연성을 얻을 수 있습니다.
Nestor

3
@ darin-dimitrov : 후자의 예제를 시도 할 때 ajax () 호출에 $ ( 'form'). serialize () 데이터를 추가해야합니다. 그렇지 않으면 양식 데이터가 전달되지 않고 서버 측에서 내 모델이 유효하지 않습니다. 내가 간과 한 것이 있는지 궁금하십니까?
Brett

2
@DarinDimitrov BLL에 오류가 있고 강화 된 레이어가 데이터에 대해 더 깊은 유효성 검사를 제공하고 문제를 발견했기 때문에 모델을 View로 다시 보내고 오류 메시지를 표시해야하는 경우 어떻게해야합니까? 클라이언트 측 유효성 검사에만 의존하는 것만으로는 충분하지 않습니다. 당신은 반환 할 수 없습니다 View (model); 이제 전체보기가 결과 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
David의 문제는 거의 항상 ajax 코드가 포함 된 jqueryval 번들을 포함하지 않아 발생합니다. 게시 한이 방법에 매우주의하십시오. 그렇지 않으면 게시 한 게시물을 얻은 다음 방금 교체 한 이후 양식에 호스가 있습니다. 그런 다음 "MyAction"보기에서 양식을 관리하고 모든 ajax 옵션을 다시 지정해야합니다.
Adam Tuliper-MSFT

내 응용 프로그램에서 마스터 페이지와 함께 전체 양식을 보여주는 div를 도와주세요
Nitin ...

나를 위해 나는 UnobtrusiveJavaScriptEnabled어디에도 진실로 설정하지 않았다
Kunal

15

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

5
폼 변수 jQuery가 폼을 선택 자로 객체로 설정했기 때문 입니다. form[0]속성이 있습니다. jQuery변수 $를보다 쉽게 ​​식별 할 수 있도록 접두사를 붙이는 것이 좋습니다 .
James South

6

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

나도 같은 오류가 발생합니다. Partial Views인덱스 페이지 아래에 create 함수를 렌더링하는 데 사용 하고 있습니다. 부분보기에서 모든 유효성 검사 메시지를 얻을 수 있습니다. 그러나 Create성공하면 인덱스가 두 번 표시됩니다. Html.BeginForm색인보기에 없습니다 .
Vini

UpdateTargetId = "myForm"대신 사용해보십시오
Kunal

4

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

<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 패키지 관리자에서 설치해야했습니다
FindOut_Quran

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


3

Ajax 양식은 Javascript를 사용하여 비동기 적으로 작동합니다. 따라서 실행할 스크립트 파일을로드해야합니다. 성능이 약간 저하 되어도 포스트 백없이 실행됩니다.

HTML과 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 작업을 수행하기에 충분합니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.