sourcecode

JSON 결과를 Ajax에 반환하려면 어떻게 해야 합니까?시작 양식

copyscript 2023. 3. 10. 22:41
반응형

JSON 결과를 Ajax에 반환하려면 어떻게 해야 합니까?시작 양식

다음과 같은 간단한 양식이 있습니다.

@using (Ajax.BeginForm("CreateProductFromAjaxForm","Product" , 
                  null, 
                  new AjaxOptions() {  HttpMethod = "post", OnSuccess = "getresult" },
                  null))
{
    @Html.EditorFor(m => m)
    <hr />
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-info" value="Next" />
        </div>
    </div>
}  

또한 테스트를 위해 다음과 같은 간단한 컨트롤러:

    [HttpPost]
    public JsonResult CreateProductFromAjaxForm(CreateProductModel model)
    {
        if (!ModelState.IsValid)
        {
            return new JsonResult()
            {
                JsonRequestBehavior = JsonRequestBehavior.AllowGet,
                Data = new { result = "error" }
            };
        }

       //add to database

        return new JsonResult()
        {
            JsonRequestBehavior = JsonRequestBehavior.AllowGet,
            Data = new { result = "success"}
        };
    }  

저는 이것들을 웹에 추가했습니다.설정:

 <add key="ClientValidationEnabled" value="true" />
 <add key="UnobtrusiveJavaScriptEnabled" value="true" />

스크립트 번들에 다음과 같이 입력합니다.

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js",
                    "~/Scripts/jquery.validate.js",
                    "~/Scripts/jquery.validate.unobtrusive.js"
                    ));

"Submit(제출)" 버튼을 클릭하면 다음과 같이 표시됩니다.

{"result":"success"}

그 결과를 제가 처리할 수 있을 거라고 생각합니다.OnSuccess="getresult"핸들러인데 작동이 안 되는 것 같아요.

기본적으로는Ajax.BeginForm주로 클라이언트측 검증에 사용됩니다.

뭐가 문제인지 말씀해 주시겠어요?

업데이트: 추가했습니다.HttpMethod = "post"Ajax Options로 이동합니다.

업데이트:getresult의 상부에 정의되어 있습니다.Ajax.BeginForm다음과 같습니다.

<script type="text/javascript">
    var getresult = function (data) {
        alert(data.result);
    };
</script> 

포함시킬 필요가 있습니다.jquery.unobtrusive-ajax.js파일.

<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

JsonResult는 ActionResult 파생 클래스의 일종으로, 이 동작에 의해 뷰나 다른 것이 아닌 JSON이 반환되는 것을 나타냅니다.

예를 들어 다음과 같습니다.

 @using (Ajax.BeginForm("CreateProductFromAjaxForm","Product" , null, 
              new AjaxOptions() {  OnSuccess = "getresult" }, null))

그러면 액션에 전송될 때 AJAX 요청을 보내는 요소가 생성됩니다.이 작업을 수행하려면 페이지에 다음 스크립트를 포함해야 합니다.

이제 이 onSuccess javascript 함수를 작성하고 서버에서 반환된 JSON 결과를 처리하는 일만 남았습니다.

<script type="text/javascript">
var onSuccess = function(data) {
    alert(data.result);
};
</script

페이지에

new AjaxOptions() {  
    OnSuccess = "getresult", 
}

자바스크립트로

function getresult(data){
   alert(data.x);
}

c#에서

[HttpPost]
public ActionResult CreateProductFromAjaxForm(CreateProductModel model)
{
    if (!ModelState.IsValid)
    {
        return Json("error", JsonRequestBehavior.AllowGet);
    }

   //add to database

    return Json(model, JsonRequestBehavior.AllowGet);
} 

HTTP 메서드를 지정해 보십시오.

new AjaxOptions() {  
    OnSuccess = "getresult", 
    HttpMethod = "post" 
}

예:

@using (Ajax.BeginForm("CreateProductFromAjaxForm", "Product" , null, new AjaxOptions() {  OnSuccess = "getresult", HttpMethod = "post" }, null))
{
    ....
}

나는 내 프로젝트에서 같은 문제에 직면했다.Ajax 라이브러리가 로드되지 않는 것이 문제입니다.확인해보니bundleconfig그리고 내 레이아웃 파일에는 포함이 들어있었지만, 나는 Ajax 라이브러리의 절대적인 이름을 포함하고 있다.

bundles.Add(new ScriptBundle("~/bundles/jqueryajax").Include(
"~/Scripts/jquery.unobtrusive-ajax.min.js"));

내 친구가 대신 와일드카드를 사용하라고 했어.의외로bundles.Add(new ScriptBundle("~/bundles/jqueryajax").Include("~/Scripts/jquery.unobtrusive-ajax*"));Ajax 라이브러리를 포함하기 시작했습니다.

이제 나의OnSuccessjson response가 표시된 빈 화면을 보는 것이 아니라 예상대로 함수가 로드됩니다.

대신:

var getresult = function (data) {
    alert(data.result);
};

해라

function getresult(data) {
    alert(data.result);
};

언급URL : https://stackoverflow.com/questions/20746784/how-can-i-return-a-json-result-to-a-ajax-beginform

반응형