web-dev-qa-db-ja.com

JSON結果をAjax.BeginFormに返すにはどうすればよいですか

私はこの単純なフォームを持っています：

@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"}
        };
    }

これらをWeb.Configに追加しました。

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

[送信]ボタンをクリックすると、結果のページに次が表示されます。

{"result":"success"}

OnSuccess="getresult"ハンドラーで結果を処理できると期待していますが、うまくいかないようです。

基本的に、主にクライアント側の検証にAjax.BeginFormを使用しています。

何が悪いのか教えてもらえますか？

更新：HttpMethod = "post"をAjaxOptionsに追加しました。

更新：getresultは、次のようにAjax.BeginFormの上に定義されます。

<script type="text/javascript">
    var getresult = function (data) {
        alert(data.result);
    };
</script>
c#.netajaxasp.net-mvcasp.net-mvc-5
28
Stefan

jquery.unobtrusive-ajax.jsファイルを含める必要があります。

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

JsonResultは、このアクションがビューなどの代わりにJSONを返すことを示す一種のActionResult派生クラスです。

例えば：

 @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
8
Vaibhav Parmar

ページ内

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

javaScriptで

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

HTTPメソッドを指定してみてください。

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

例：

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

私はプロジェクトで同じ問題に直面しました。 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ライブラリを含め始めました。

これで、私のOnSuccess関数は、json応答が表示された空白の画面を見るのではなく、期待どおりにロードされます。

1
Ram Boppana

の代わりに：

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

試してみる

function getresult(data) {
    alert(data.result);
};
0
Rui Jarimba