それは私の機能です:
<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; }
}
ここでの最善のアプローチは、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年更新:これは廃止されました。ノックアウトを使用する理由はありません)。初心者には少し混乱するかもしれませんが、それを手に入れると、非常に強力な知識が得られ、ビューコードを大幅に簡素化できるようになります。
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レスポンスで使用できることに注意してください。
クラスを好む場合は、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/
var errors = '@Html.Raw(Json.Encode(ViewData.ModelState.Values.SelectMany(v => v.Errors).Select(e => e.ErrorMessage)))';
var errorMessage=JSON.parse(errors);