양식없이 문자열 배열을 ASP.NET MVC 컨트롤러에 게시하려면 어떻게해야합니까?


185

ASP.NET MVC 및 JQuery를 가르치는 작은 응용 프로그램을 만들고 있으며 페이지 중 하나는 일부를 선택할 수있는 항목 목록입니다. 그런 다음 버튼을 누르고 JQuery의 Post 기능을 사용하여 선택한 항목의 ID가 포함 된 List (또는 이와 동등한 것)를 컨트롤러에 보냅니다.

선택한 요소의 ID가있는 배열을 얻을 수 있었고 이제 게시하고 싶습니다. 내가 할 수있는 한 가지 방법은 내 페이지에 숨겨진 값으로 더미 양식을 가지고 선택한 항목으로 숨겨진 값을 설정하고 해당 양식을 게시하는 것입니다. 그러나 이것은 무모 해 보입니다.

어레이를 컨트롤러로 직접 보내서 이것을 달성하는 더 깨끗한 방법이 있습니까? 몇 가지 다른 시도를했지만 컨트롤러가 수신하는 데이터를 매핑 할 수없는 것처럼 보입니다. 지금까지 코드는 다음과 같습니다.

function generateList(selectedValues) {
   var s = {
      values: selectedValues //selectedValues is an array of string
   };
   $.post("/Home/GenerateList", $.toJSON(s), function() { alert("back") }, "json");
}

그리고 내 컨트롤러는 다음과 같습니다

public ActionResult GenerateList(List<string> values)
{
    //do something
}

내가 얻는 것은 컨트롤러 매개 변수에서 "널"입니다 ...

팁이 있습니까?


, 당신은 사용하여 동일한 데이터에 액세스 할 수 있지만Request["values[]"]
Tocco의

답변:


247

내가 한 테스트 앱의 코드를 포함하도록 응답을 수정했습니다.

업데이트 : '전통적인'설정을 true로 설정하여 jQuery를 업데이트하여 다시 작동합니다 (@DustinDavis '에 따라).

먼저 자바 스크립트 :

function test()
{
    var stringArray = new Array();
    stringArray[0] = "item1";
    stringArray[1] = "item2";
    stringArray[2] = "item3";
    var postData = { values: stringArray };

    $.ajax({
        type: "POST",
        url: "/Home/SaveList",
        data: postData,
        success: function(data){
            alert(data.Result);
        },
        dataType: "json",
        traditional: true
    });
}

그리고 내 컨트롤러 클래스의 코드는 다음과 같습니다.

public JsonResult SaveList(List<String> values)
{
    return Json(new { Result = String.Format("Fist item in list: '{0}'", values[0]) });
}

해당 자바 스크립트 함수를 호출하면 "목록의 첫 번째 항목 : 'item1'"이라는 경고가 표시됩니다. 도움이 되었기를 바랍니다!


3
이 답변을 찾은 것이 좋았습니다. 이제 Guid의 배열을 보낼 수 있으며 Action은 List <Guid>에 수신합니다. 감사합니다
Tx3

43
여기서 주목해야 할 두 가지 중요한 사항이 있습니다. 1) dataType : "json"2.) traditional : true. 문자열 배열이
없으면

1
참고 dataType: 'JSON'원인 JQuery와 JSON으로 응답을 구문 분석을 시도하고,이 유효 JSON이 아닌 경우 오류가됩니다.
sennett

8
@Thanigainathan은 dataType: 'json'반환 유형이며 배열을 Action으로 보낼 필요는 없습니다. contentType: "application/json; charset=utf-8"는 하나이지만 이와 같은 경우에는 필요하지 않습니다.
Ruchan

1
@emzero 사용var postData = { id: 45, [{myClassProp1: 1, myClassProp2: 2}, {}...], anotherParam: "some string" };
Nick M

108

참고 : JQuery는 게시물 데이터를 직렬화하는 방식을 변경했습니다.

http://forum.jquery.com/topic/nested-param-serialization

'전통'설정을 true로 설정해야합니다.

{ Values : ["1", "2", "3"] }

로 나올 것입니다

Values[]=1&Values[]=2&Values[]=3

대신에

Values=1&Values=2&Values=3

8
이것은 잠시 동안 내 머리를 숙이고있는 것입니다. 설정 $.ajax({ ..., traditional: true});은 기존 직렬화로 되 돌리는 데 도움이됩니다.
juhan_h

ASP.NET MVC 경로가 문자열 값의 간단한 js 배열을 올바르게 사용하기 위해 이것이 필요했습니다.
BrandonG

당신의 대답은 정말 도움이됩니다. 나는 같은 상황을 가지고 있지만 함께 ints있습니다. 을 사용할 때 traditional: true작동하며 귀하의 답변과 링크가 그 이유 를 설명 합니다. 또한 사용 type: "POST"하지 않고 사용할 때도 작동합니다 traditional: true. 왜 그런 겁니까? 좀 더 자세히 설명해 주시겠습니까? 참고로 Asp.Net Mvc를 사용하고 있습니다.
barnes

ASP.NET에서 인덱스없이 이와 같은 익명 배열을 구문 분석하는 방법이 있습니까? Values ​​[] = 1 & Values ​​[] = 2 & Values ​​[] = 3
Charles Owen

24

답변 주셔서 감사합니다. 또 다른 빠른 해결책은 JSON 객체를 문자열로 변환하기 위해 전통적인 매개 변수가 true 로 설정된 jQuery.param 메소드 를 사용하는 것입니다 .

$.post("/your/url", $.param(yourJsonObject,true));

$ .ajax () 대신 $ .post ()를 사용함에 따라 잘 작동합니다. 감사합니다 !
AF


6

에서 .NET4.5,MVC 5

자바 스크립트 :

JS의 객체 : 여기에 이미지 설명을 입력하십시오

게시하는 메커니즘.

    $('.button-green-large').click(function() {
        $.ajax({
            url: 'Quote',
            type: "POST",
            dataType: "json",
            data: JSON.stringify(document.selectedProduct),
            contentType: 'application/json; charset=utf-8',
        });
    });

씨#

사물:

public class WillsQuoteViewModel
{
    public string Product { get; set; }

    public List<ClaimedFee> ClaimedFees { get; set; }
}

public partial class ClaimedFee //Generated by EF6
{
    public long Id { get; set; }
    public long JourneyId { get; set; }
    public string Title { get; set; }
    public decimal Net { get; set; }
    public decimal Vat { get; set; }
    public string Type { get; set; }

    public virtual Journey Journey { get; set; }
}

제어 장치:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Quote(WillsQuoteViewModel data)
{
....
}

받은 물건 :

여기에 이미지 설명을 입력하십시오

이것이 시간을 절약하기를 바랍니다.


4

문자열뿐만 아니라 객체 목록과 함께 작동하는 또 다른 구현 :

JS :

var postData = {};
postData[values] = selectedValues ;

$.ajax({
    url: "/Home/SaveList",
    type: "POST",
    data: JSON.stringify(postData),
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function(data){
        alert(data.Result);
    }
});

'selectedValues'가 객체의 배열이라고 가정합니다.

컨트롤러에서 매개 변수는 해당 ViewModel의 목록입니다.

public JsonResult SaveList(List<ViewModel> values)
{    
    return Json(new { 
          Result = String.Format("Fist item in list: '{0}'", values[0].Name) 
    });
}

1

내가 여기서 논의했듯이 ,

사용자 정의 JSON 객체를 MVC 작업에 전달하려면이 솔루션을 사용할 수 있습니다. 매력처럼 작동합니다.

public string GetData() {
  // InputStream contains the JSON object you've sent
  String jsonString = new StreamReader(this.Request.InputStream).ReadToEnd();

  // Deserialize it to a dictionary
  var dic =
    Newtonsoft.Json.JsonConvert.DeserializeObject < Dictionary < String,
    dynamic >> (jsonString);

  string result = "";

  result += dic["firstname"] + dic["lastname"];

  // You can even cast your object to their original type because of 'dynamic' keyword
  result += ", Age: " + (int) dic["age"];

  if ((bool) dic["married"])
    result += ", Married";

  return result;
}

이 솔루션의 실제 이점은 각 인수 조합에 대해 새 클래스를 정의 할 필요가 없으며 그 외에 객체를 원래 유형으로 쉽게 캐스트 할 수 있다는 것입니다.

다음과 같은 도우미 방법을 사용하여 작업을 용이하게 할 수 있습니다.

public static Dictionary < string, dynamic > GetDic(HttpRequestBase request) {
  String jsonString = new StreamReader(request.InputStream).ReadToEnd();
  return Newtonsoft.Json.JsonConvert.DeserializeObject < Dictionary < string, dynamic >> (jsonString);
}

0

당신은 글로벌 매개 변수를 설정할 수 있습니다

jQuery.ajaxSettings.traditional = true;

-1

대답은 내 상황에서 많은 도움이되었으므로 감사합니다. 그러나 향후 참조를 위해 사람들은 모델에 바인딩 한 다음 유효성을 검사해야합니다. Phil Haack의이 게시물은 MVC 2에 대해 설명합니다. .

이것이 누군가를 돕기를 바랍니다.

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