Question

我正在编写一个小型mvc.net Web应用程序，它从用户那里获取一些输入，当用户单击该按钮时，输入数据将被计算并显示在两个输入字段中。但是，单击该按钮时（请参阅文件Index.cshtml），两个输入字段中不会显示任何内容。非常感谢帮助找出可能出错的地方。 :)

An image of the web application.

以下是我的代码......

SelectPurchaseModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace TheMakingOfAWebApplication.Models
{
    public class SelectPurchaseModel
    {
        public string Name { get; set; }
        public IEnumerable<Article> Articles { get; set; }

        public int Quantity { get; set; }
        public double Price { get; set; }

        public double AmountExVat { get; set; }
        public double AmountInVat { get; set; }
    }
}

Article.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace TheMakingOfAWebApplication.Models
{
    public class Article
    {
        public string Name { get; set; }
    }
}

HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TheMakingOfAWebApplication.Models;

namespace TheMakingOfAWebApplication.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            //List<Article> articles;

            SelectPurchaseModel model = new SelectPurchaseModel();
            model.Name = "";
            model.Articles = new List<Article>{
                new Article { Name = "Bananas"},
                new Article { Name = "Apples"},
                new Article { Name = "Oranges"},
                new Article { Name = "Melons"},
                new Article { Name = "Grapes"},
                new Article { Name = "Sallad"},
                new Article { Name = "Potatoes"},
                new Article { Name = "Cucumber"},
                new Article { Name = "Beans"},
                new Article { Name = "Tomatoes"}
            };

            model.Quantity = 0;
            model.Price = 0.0;

            model.AmountExVat = 0.0;
            model.AmountInVat = 0.0;

            return View(model);
        }

        // POST: Home
        [HttpPost]
        public ActionResult Index(SelectPurchaseModel purchase)
        {
            purchase.Articles = new List<Article>{
                new Article { Name = "Bananas"},
                new Article { Name = "Apples"},
                new Article { Name = "Oranges"},
                new Article { Name = "Melons"},
                new Article { Name = "Grapes"},
                new Article { Name = "Sallad"},
                new Article { Name = "Potatoes"},
                new Article { Name = "Cucumber"},
                new Article { Name = "Beans"},
                new Article { Name = "Tomatoes"}
            };

            purchase.AmountExVat = purchase.Quantity * (purchase.Price - (purchase.Price * 0.10));
            purchase.AmountInVat = purchase.Quantity * (purchase.Price * 1.10);

            return View(purchase); 
        }
    }
}

Index.cshtml

@model TheMakingOfAWebApplication.Models.SelectPurchaseModel

@{
    ViewBag.Title = "Index";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".btn btn-default").click(function () {
            debugger;
            var quantity = $("#Quantity").attr('value');
            var price = $("#Price").attr('value');
            var AmountExVat = quantity * (price - (price * 0.10));
            var AmountInVat = quantity * (price * 1.10);

            $("#AmountExVat").val(AmountExVat);
            $("#AmountInVat").val(AmountInVat);
        });
    });


</script>



<h2>Index</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Article</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <fieldset>
            <p>
                @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
                @Html.DropDownListFor(m => m.Name, new SelectList(Model.Articles, "Name", "Name"))
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </p>
            <p>
                @Html.LabelFor(model => model.Quantity, htmlAttributes: new { @class = "control-label col-md-2" })
                @Html.TextBoxFor(m => m.Quantity)
                @Html.ValidationMessageFor(model => model.Quantity, "", new { @class = "text-danger" })
            </p>
            <p>
                @Html.LabelFor(model => model.Price, htmlAttributes: new { @class = "control-label col-md-2" })
                @Html.TextBoxFor(m => m.Price)
                @Html.ValidationMessageFor(model => model.Price, "", new { @class = "text-danger" })
            </p>
            <p>
                <input type="submit" value="Save" class="btn btn-default" />
            </p>
            <p>
                @Html.LabelFor(model => model.AmountExVat, htmlAttributes: new { @class = "control-label col-md-2" })
                @Html.TextBoxFor(m => m.AmountExVat)
                @Html.ValidationMessageFor(model => model.AmountExVat, "", new { @class = "text-danger" })
            </p>
            <p>
                @Html.LabelFor(model => model.AmountInVat, htmlAttributes: new { @class = "control-label col-md-2" })
                @Html.TextBoxFor(m => m.AmountInVat)
                @Html.ValidationMessageFor(model => model.AmountInVat, "", new { @class = "text-danger" })
            </p>

        </fieldset>
        </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

Answer 1

1st：使用$(".btn.btn-default")代替$(".btn btn-default")

第二次使用.val()代替attr('value');

第3天，您可能需要使用parseInt()或pareseFloat();

<script type="text/javascript">
    $(document).ready(function () {
        $(".btn.btn-default").click(function () {
            debugger;
            var quantity = $("#Quantity").val();
            var price = $("#Price").val();
            var AmountExVat = quantity * (price - (price * 0.10));
            var AmountInVat = quantity * (price * 1.10);

            $("#AmountExVat").val(AmountExVat);
            $("#AmountInVat").val(AmountInVat);
        });
    });


</script>

关于使用parseInt()和parseFloat()

var quantity = parseInt($("#Quantity").val() , 10);
var price = parseFloat($("#Price").val());

附加：如果所有这些都不起作用..你可以尝试

$(".btn.btn-default").on('click',function () {

或

$("body").on('click',".btn.btn-default",function () {

Answer 2

您的选择器不是绑定属性，如下所述已修复，您应该使用val（）而不是attr（'value'）

$(".btn.btn-default").click(function () {
                var quantity = $("#Quantity").val();
                var price = $("#Price").val();
                var amountExVat = quantity * (price - (price * 0.10));
                var amountInVat = quantity * (price * 1.10);

                $("#AmountExVat").val(amountExVat);
                $("#AmountInVat").val(amountInVat);
            });

单击按钮不起作用时更新输入字段

2 个答案: