C＃ASP.Net MVCを使って電卓を作成する

-3

私はmvcを学び、簡単な電卓を作成しようとしています。私は仕事のほとんどを行っているが、私はjavaScriptを使用して計算部分を動作させるように思えない。ブラウザに表示される結果はほぼ完全で、5 + 2 = 0です。C＃ASP.Net MVCを使って電卓を作成する

これは、計算結果がブラウザに表示されるビューです。一部は（私が間違っている場合は、私をcurrect）する必要があります。

@model CalculatorWebPage.Models.Calc 

@{ 
    Layout = null; 
} 

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>CalculateResult</title> 
     <script> 
     if (@Model.Operator == '+') 
     { 
      @Model.Result = @Model.FirstNumber + @Model.SecondNumber; 
     } 
     else if (@Model.Operator == '-') 
     { 
      @Model.Result = @Model.FirstNumber - @Model.SecondNumber; 
     } 
     else if (@Model.Operator == '*') 
     { 
      @Model.Result = @Model.FirstNumber * @Model.SecondNumber; 
     } 
     else if (@Model.Operator == '/') 
     { 
      @Model.Result = @Model.FirstNumber/@Model.SecondNumber; 
     } 
     return @Model.Result; 

    </script> 
</head> 
<body> 
    <div> 
     @Model.FirstNumber @Model.Operator @Model.SecondNumber = @Model.Result 
    </div> 
</body> 
</html>

が、これは場所と計算するjaveScriptコードを配置する方法ですか？

出典

2017-06-24 Dolev

は、あなたがコードをコントローラ共有できますか？そして働いていないということはどういう意味ですか？それはあなたに何かエラーを与えるか？予期せぬ出力を出すのですか、どの出力が表示されますか？期待される結果は何ですか？ –

なぜあなたはあなたの見解を計算していますか？これはMVCの意味ではありません。 – jAC

@JanesAbouChleih私はMVCを初め、それをどのように使いこなすかを学んでいます。私の見解で計算しようとすると申し訳ありません。私は計算しなければならない部分に行って、ちょっとした助けのためにここに来たとは思わないと思う。 – Dolev

を試してみて、私はViewに何かを計算しません。単純なMVC電卓は次のようになります。
あなたが情報格納あなたのCalculationModel、持っている：私はすべての可能な計算方法を表すために、ここでEnumを使用

public class CalculationModel 
{ 
    public decimal FirstNumber { get; set; } 
    public decimal SecondNumber { get; set; } 
    public decimal Result { get; set; } 
    public CalculationMethod calculationMethod { get; set; } 
}

を：

public enum CalculationMethod 
{ 
    Addition = '+', 
    Subtraction = '-', 
    Multiplication = '*', 
    Division = '/' 
}

あなたのビューは、あなただけのモデルが提供する情報を使用する必要がありますがそして、など、Labels、Textboxesでそれを示して

@model WebApplication1.Models.CalculationModel 

@using (Html.BeginForm("Index", "Calculation", FormMethod.Post, new { enctype = "multipart/form-data" })) 
{ 
    @Html.LabelFor(m => m.FirstNumber) @Html.TextBoxFor(x => x.FirstNumber)<br /> 
    @Html.LabelFor(m => m.SecondNumber) @Html.TextBoxFor(x => x.SecondNumber)<br /> 
    @Html.LabelFor(m => m.Result) @Html.TextBoxFor(x => x.Result)<br /> 
    @Html.DropDownListFor(m => m.calculationMethod, new SelectList(Enum.GetValues(typeof(CalculationMethod)))) 
    <input type="submit" /> 
}

最後にすべての操作を処理するControllerがあります。

は、あなたの設定に応じて、単純に示してあなたの要求（HttpPost or HttpGet）と1つを処理するメソッドを持っているあなたの空View：

public IActionResult Index() 
{ 
    return View(); 
} 

[HttpPost] 
public async Task<IActionResult> Index(CalculationModel model) 
{ 
    ModelState.Clear(); 
    switch (model.calculationMethod) 
    { 
     case CalculationMethod.Addition: 
      model.Result = model.FirstNumber + model.SecondNumber; 
      break; 
     case CalculationMethod.Subtraction: 
      model.Result = model.FirstNumber - model.SecondNumber; 
      break; 
     case CalculationMethod.Multiplication: 
      model.Result = model.FirstNumber * model.SecondNumber; 
      break; 
     case CalculationMethod.Division: 
      model.Result = model.FirstNumber/model.SecondNumber; 
      break; 
    } 
    return View(model); 
}

のEt出来上がり、MVCパターンが満たさ;）

ModelState.Clear();でControllerはデータが格納されているTextboxesをすべて「リフレッシュ」します。そうでなければResultは表示されません。

小編集：

あなたはValue（例えばAddition）を表示するようにDropDownListをしませんが、DisplayNameを表示したい場合は、MVC5と、以下の（ASP.NETコア2に試験を行うことができ。0 preview1）：

がenumは今、次のプロパティが定義されている

<select asp-for="calculationMethod" asp-items="Html.GetEnumSelectList(typeof (CalculationMethod))"></select>

または

@Html.DropDownListFor(m => m.calculationMethod, (Html.GetEnumSelectList(typeof(CalculationMethod))))

で@Html.DropDownListFor(m => m.calculationMethod, ...)を置き換えます

public enum CalculationMethod 
{ 
    [Display(Name = "+")] 
    Addition, 
    [Display(Name = "-")] 
    Subtraction, 
    [Display(Name = "*")] 
    Multiplication, 
    [Display(Name = "/")] 
    Division 
}

出典

2017-06-24 09:19:38 jAC

モデル値は更新されていません。その唯一の目的は、表示またはあなたのModelに保存されたデータを表示することがあるので、すでにコメントで述べたこの

if (@Model.Operator == '+') 
    { 
     document.getElementById('Result').value = @Model.FirstNumber + @Model.SecondNumber; 
    }

出典

2017-06-24 08:38:57

C＃ASP.Net MVCを使って電卓を作成する

答えて

関連する問題