강력하게 입력된 MVC3 뷰에서 모델을 전달하기 위해 AJAX Post 쿼리를 사용하는 적절한 방법

강력하게 입력된 MVC3 뷰에서 모델을 전달하기 위해 AJAX Post 쿼리를 사용하는 적절한 방법

저는 초보 웹 프로그래머라서 제 '전문용어'가 틀리다면 용서해주세요.ASP를 이용한 프로젝트가 있습니다.MVC3 프레임워크를 이용한 NET.

관리자가 장비 목록을 수정하는 관리자 뷰 작업을 하고 있습니다.MVC 컨트롤러에 게시물을 전송한 후 jquery를 사용하여 웹페이지의 항목을 동적으로 편집하는 "업데이트" 버튼도 기능 중 하나입니다.

웹 페이지가 데이터베이스와 동기화되지 않을 우려가 거의 없는 단일 관리 환경에서는 이 방법이 "안전"하다고 생각합니다.

저는 강력하게 타이핑된 뷰를 만들었고 모델 데이터를 AJAX post를 사용하여 MVC 컨트롤로 전달하려고 했습니다.

다음 게시물에서 JQuery Ajax와 ASP라는 제가 보고 있는 것과 유사한 것을 발견했습니다.NET MVC3로 인해 null 매개 변수가 발생

위 게시글의 코드 샘플을 사용하겠습니다.

모델:

public class AddressInfo 
{
    public string Address1 { get; set; }
    public string Address2 { get; set; }
    public string City { get; set; }
    public string State { get; set; }
    public string ZipCode { get; set; }
    public string Country { get; set; }
}

컨트롤러:

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

    [HttpPost]
    public ActionResult Check(AddressInfo addressInfo)
    {
        return Json(new { success = true });
    }
}

View의 스크립트:

<script type="text/javascript">
var ai = {
    Address1: "423 Judy Road",
    Address2: "1001",
    City: "New York",
    State: "NY",
    ZipCode: "10301",
    Country: "USA"
};

$.ajax({
    url: '/home/check',
    type: 'POST',
    data: JSON.stringify(ai),
    contentType: 'application/json; charset=utf-8',
    success: function (data.success) {
        alert(data);
    },
    error: function () {
        alert("error");
    }
});
</script>

저는 아직 위의 내용을 사용할 기회가 없었습니다.모델 데이터를 AJAX를 사용하여 MVC 컨트롤로 다시 전달하는 "최상의" 방법인지 궁금했습니다.

모델 정보를 노출하는 것에 대해 우려해야 합니까?

이를 구현하기 위한 세 가지 방법을 찾았습니다.

C# 클래스:

public class AddressInfo {
    public string Address1 { get; set; }
    public string Address2 { get; set; }
    public string City { get; set; }
    public string State { get; set; }
    public string ZipCode { get; set; }
    public string Country { get; set; }
}

작업:

[HttpPost]
public ActionResult Check(AddressInfo addressInfo)
{
    return Json(new { success = true });
}

자바스크립트는 세가지 방법으로 할 수 있습니다.

1) 쿼리 문자열:

$.ajax({
    url: '/en/Home/Check',
    data: $('#form').serialize(),
    type: 'POST',
});

여기 데이터는 문자열입니다.

"Address1=blah&Address2=blah&City=blah&State=blah&ZipCode=blah&Country=blah"

2) 객체 배열:

$.ajax({
    url: '/en/Home/Check',
    data: $('#form').serializeArray(),
    type: 'POST',
});

데이터는 키/값 쌍의 배열입니다.

=[{name: 'Address1', value: 'blah'}, {name: 'Address2', value: 'blah'}, {name: 'City', value: 'blah'}, {name: 'State', value: 'blah'}, {name: 'ZipCode', value: 'blah'}, {name: 'Country', value: 'blah'}]

3) JSON:

$.ajax({
      url: '/en/Home/Check',
      data: JSON.stringify({ addressInfo:{//missing brackets
          Address1: $('#address1').val(),
          Address2: $('#address2').val(),
          City: $('#City').val(),
          State: $('#State').val(),
          ZipCode: $('#ZipCode').val()}}),
      type: 'POST',
      contentType: 'application/json; charset=utf-8'
});

여기 데이터는 직렬화된 JSON 문자열입니다.이름은 서버의 매개변수 이름과 일치해야 합니다!!

='{"addressInfo":{"Address1":"blah","Address2":"blah","City":"blah","State":"blah", "ZipCode", "blah", "Country", "blah"}}'

var 선언을 건너뛰고 문자열을 지정할 수 있습니다.그렇지 않으면 잘 될 겁니다.

$.ajax({
    url: '/home/check',
    type: 'POST',
    data: {
        Address1: "423 Judy Road",
        Address2: "1001",
        City: "New York",
        State: "NY",
        ZipCode: "10301",
        Country: "USA"
    },
    contentType: 'application/json; charset=utf-8',
    success: function (data) {
        alert(data.success);
    },
    error: function () {
        alert("error");
    }
});

이것이 제게 적용된 방식입니다.

$.post("/Controller/Action", $("#form").serialize(), function(json) {       
        // handle response
}, "json");

[HttpPost]
public ActionResult TV(MyModel id)
{
    return Json(new { success = true });
}

당신이 가지고 있는 것은 괜찮습니다 - 그러나 타이핑을 저장하기 위해 당신은 당신의 데이터를 위해 간단히 사용할 수 있습니다.

데이터: $('#formId').연작으로 삼다

자세한 내용은 http://www.ryancoughlin.com/2009/05/04/how-to-use-jquery-to-serialize-ajax-forms/ 을 참조하십시오. 구문은 매우 기본적입니다.

MVC 5를 사용하는 경우 이 솔루션을 읽어 보십시오!

특히 MVC 3에 대한 질문이 필요하다는 것을 알고 있지만, MVC 5의 이 페이지를 우연히 발견했고 내 상황에 있는 다른 사람을 위한 해결책을 게시하고 싶었습니다.위의 해결책을 시도해 보았지만, 저에게는 효과가 없었고, Action Filter도 도달하지 못했고, 그 이유를 알 수 없었습니다.프로젝트에서 버전 5를 사용하고 있는데 다음과 같은 액션 필터를 사용하게 되었습니다.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Filters;

namespace SydHeller.Filters
{
    public class ValidateJSONAntiForgeryHeader : FilterAttribute, IAuthorizationFilter
    {
        public void OnAuthorization(AuthorizationContext filterContext)
        {
            string clientToken = filterContext.RequestContext.HttpContext.Request.Headers.Get(KEY_NAME);
            if (clientToken == null)
            {
                throw new HttpAntiForgeryException(string.Format("Header does not contain {0}", KEY_NAME));
            }

            string serverToken = filterContext.HttpContext.Request.Cookies.Get(KEY_NAME).Value;
            if (serverToken == null)
            {
                throw new HttpAntiForgeryException(string.Format("Cookies does not contain {0}", KEY_NAME));
            }

            System.Web.Helpers.AntiForgery.Validate(serverToken, clientToken);
        }

        private const string KEY_NAME = "__RequestVerificationToken";
    }
}

-- 기록해 두십시오.using System.Web.Mvc그리고.using System.Web.Mvc.Filters, , http라이브러리(MVC v5와 함께 변경된 것 중 하나라고 생각합니다. --

그럼 필터만 발라주세요.[ValidateJSONAntiForgeryHeader]사용자의 작업(또는 컨트롤러)에 올바르게 호출되어야 합니다.

바로 위의 내 레이아웃 페이지에서</body>있습니다@AntiForgery.GetHtml();

마지막으로 Razor 페이지에서 다음과 같이 ajax call을 수행합니다.

var formForgeryToken = $('input[name="__RequestVerificationToken"]').val();

$.ajax({
  type: "POST",
  url: serviceURL,
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  data: requestData,
  headers: {
     "__RequestVerificationToken": formForgeryToken
  },
     success: crimeDataSuccessFunc,
     error: crimeDataErrorFunc
});

언급URL : https://stackoverflow.com/questions/5980389/proper-way-to-use-ajax-post-in-jquery-to-pass-model-from-strongly-typed-mvc3-vie