web-dev-qa-db-ja.com

Ajaxリクエストを介してMVCコントローラーからViewにJavaScriptを返すことはできますか？

ASP.net MVC2.0アプリケーションでこのようにしようとしています。 number1とnumber2の2つのフィールドを持つフォームがあります。

Ajaxリクエストを使用してこれら2つの数値を2つ追加したいと思います。コントローラで、2つの数値を受け取り、それらを加算して、結果を別の文字列に格納しています。次に、私はこのようにしています：

    [HttpPost]
    public string TestAjax(FormCollection form)
    {
        int strnum1 = Convert.ToInt32(form["txtbox1"].ToString());
        int strnum2 = Convert.ToInt32(form["txtbox2"].ToString());
        string strnum3 = Convert.ToString(strnum1 + strnum2);
        if (strnum3 != null)
        {
            return "<script>alert("some message")</script>";
        }

        return string.Empty;

    }

コントローラのアクションから文字列の形式でJavaスクリプトを返すことは可能ですか？

javascriptasp.net-mvcajaxform
4
Sai Avinash

コントローラのアクションから文字列の形式でJavaスクリプトを返すことは可能ですか？

JavaScriptResult を返すことができます：

[HttpPost]
public ActionResult TestAjax(FormCollection form)
{
    int strnum1 = Convert.ToInt32(form["txtbox1"].ToString());
    int strnum2 = Convert.ToInt32(form["txtbox2"].ToString());
    return JavaScript("<script>alert(\"some message\")</script>");
}

これを機能させるには、javascriptを実行するようにAJAXリクエストを構成する必要があります。たとえば、次のようなjQueryを使用している場合：

$.ajax({
    url: '/someaction',
    type: 'POST',
    data: { txtbox1: '12', txtbox2: '13' },
    dataType: 'script'
});

別の方法として、モデルをJSON文字列にシリアル化する JsonResult を返すこともできます。

[HttpPost]
public ActionResult TestAjax(FormCollection form)
{
    int strnum1 = Convert.ToInt32(form["txtbox1"].ToString());
    int strnum2 = Convert.ToInt32(form["txtbox2"].ToString());
    string strnum3 = Convert.ToString(strnum1 + strnum2);
    return Json(new { sum = strnum3 });
}

その後：

$.ajax({
    url: '/someaction',
    type: 'POST',
    data: { txtbox1: '12', txtbox2: '13' },
    success: function(result) {
        alert(result.sum);
    }
});

ここでわかるように、コントローラーでjavascriptとC＃コードを混在させることはもうありません。 DRY原則を尊重します。javascriptはjavascriptファイルに属します。

このコントローラーアクションのさらなる改善として、ビューモデルを導入し、FormCollectionから解析するというひどい配管コードを取り除くことをお勧めします。これは、デフォルトのモデルバインダーの責任です。

そう：

public class SumViewModel
{
    public int TxtBox1 { get; set; }
    public int TxtBox2 { get; set; }
}

その後：

[HttpPost]
public ActionResult TestAjax(SumViewModel model)
{
    int sum = model.TxtBox1 + model.TxtBox2;
    return Json(new { sum = sum });
}

結論：このコントローラーアクションをダイエットに適用し、JavaScriptをそれが属する場所に移動しました。

8
Darin Dimitrov

これを試して、

[HttpPost]
    public ActionResult TestAjax(FormCollection form)
    {
        int strnum1 = Convert.ToInt32(form["txtbox1"].ToString());
        int strnum2 = Convert.ToInt32(form["txtbox2"].ToString());
        string strnum3 = Convert.ToString(strnum1 + strnum2);
        if (strnum3 != null)
        {
            return "<script>alert("some message")</script>";
        }

           return JavaScript("JSFunction(paramtr);");    
    }

見る：-

function JSFunction(paramtr)
{

}
1
Jeet Bhatt

Ajax成功コールバック関数を使用してみませんか？

[HttpPost]
public string TestAjax(FormCollection form)
{
    int strnum1 = Convert.ToInt32(form["txtbox1"].ToString());
    int strnum2 = Convert.ToInt32(form["txtbox2"].ToString());
    string strnum3 = Convert.ToString(strnum1 + strnum2);
    if (strnum3 != null)
    {
        return strnum3;
    }

    return string.Empty;

}

$.ajax({
    url: "/Controller/TestAjax/",
    type: "POST",
    data: /* form data here */,
    success: SuccessCallback,
    error: FailureCallback
});

function SuccessCallback(data) {
   alert(data);
}
1
Mike H.