web-dev-qa-db-ja.com

モデルからJavaScript MVC 4にデータを取得する方法は？

それは私の機能です：

 <script> function Calculate()
     {
         var ItemPrice = document.getElementById("price");
         var weight = document.getElementById("weight");
         var SelWeight = weight.options[weight.selectedIndex].value;
         alert(SelWeight);
         var Category = document.getElementById("SelectedCategory");
         var SelCategory = Category.options[Category.selectedIndex].value;
         alert(SelCategory);

     }
    </script>

私は手に入れたい SelCategories.TaxおよびSelCategories.Dutyを重量値と合計価格に追加して、ラベルに合計を表示します。ASP.NET MVC 4を使用しています。これは、使用したい私のモデルです

public class CategoriesModel
    {
        public int CategoryID { get; set; }
        public string CategoryName { get; set; }
        public decimal Duty { get; set; }
        public decimal Tax { get; set; }
        public IEnumerable<SelectListItem> CategoriesList { get; set; }
    }
javascriptasp.netasp.net-mvcasp.net-mvc-4
12
YaraHanaa

ここでの最善のアプローチは、Jsonと Vue.js 、 Knockout.js などのようなものを使用することだと思います（ただし、これらのライブラリがなくても、ケースは簡単です）。

最初に、PM console：のコマンドでJsonサポートをインストールする必要があります。

PM> install-package NewtonSoft.Json

次に、ビューで次のようにモデルをjavascriptオブジェクトに変換できます。

@model ...
@using Newtonsoft.Json

...

<script type="text/javascript">

    var data = @Html.Raw(JsonConvert.SerializeObject(this.Model));

</script>

その後、プレーンJavaScriptでモデルのすべてのプロパティにアクセスできます。

var id = data.CategoryID;

それでおしまい！ロジックが複雑で、ビューをより強力にしたい場合は、ノックアウトを使用します（2018年更新：これは廃止されました。ノックアウトを使用する理由はありません）。初心者には少し混乱するかもしれませんが、それを手に入れると、非常に強力な知識が得られ、ビューコードを大幅に簡素化できるようになります。

27
Roman Pushkin

JsonResultを返すアクション（コントローラーのメソッド）を作成する必要があります。

クライアント側からサーバーにajax呼び出しを行い、そのデータを回復して使用します。これを行う最も簡単な方法は、jQuery ajaxメソッドを使用することです。

   public JsonResult GetData(int id)
    {
        // This returned data is a sample. You should get it using some logic
        // This can be an object or an anonymous object like this:
        var returnedData = new
        {
            id,
            age = 23,
            name = "John Smith"
        };
        return Json(returnedData, JsonRequestBehavior.AllowGet);
    }

JQuery getを使用して/ ControllerName/GetData/idを取得すると、成功コールバックでJavaScriptオブジェクトが取得され、ブラウザーで使用できます。このJavaScriptオブジェクトには、サーバー側で定義したプロパティとまったく同じプロパティがあります。

例えば：

function getAjaxData(id) {
    var data = { id: id };
    $.get('/Extras/GetData/1', // url
        data, // parameters for action
        function (response) { // success callback
            // response has the same properties as the server returnedObject
            alert(JSON.stringify(response)); 
        },
        'json' // dataType
    );
}

もちろん、成功コールバックでは、アラートを作成する代わりに、応答オブジェクトを使用するだけです。たとえば、

if (response.age < 18) { ... };

サーバーで定義されたageプロパティはJavaScriptレスポンスで使用できることに注意してください。

2
JotaBe

クラスを好む場合は、jsmodelを試してください。 mvcビューモデルをjavascriptに変換した後、DOM更新を取得する利点が追加されます。

var jsmodel = new JSModel(@Html.Raw(Json.Encode(Model)));

次に、DOMの最新の状態を取得したいときはいつでも、これを実行して変数を更新します。

var model = jsmodel.refresh();

ウェブサイト： http://chadkuehn.com/jquery-viewmodel-object-with-current-values/

Nugetもあります： https://www.nuget.org/packages/jsmodel/

1
Chad Kuehn
var errors = '@Html.Raw(Json.Encode(ViewData.ModelState.Values.SelectMany(v => v.Errors).Select(e => e.ErrorMessage)))';
var errorMessage=JSON.parse(errors);
0
Mohamed.Abdo