Question

我试图根据用户在视图中做出的选择来更改模型中的数据。我在下面有一个ajax查询，它可以获取所选的下拉值并将它们传递给控制器。我试图更改模型中的价格值并永久保存，以便我可以向用户显示价格。目前它正确地调用了方法，我插入了一个断点，我可以看到它在值中有当前价格，但是当方法返回时，它根本不显示任何内容。我是MVC的新手，所以我感谢任何帮助。谢谢！

$(document).ready(function () {
$('#urgencyList').change(function () {
        var modelData = {
            documentType: $("#documentTypeList").val(),
            urgency: $("#urgencyList").val(),
            numberOfPages: $("#numberOfPagesList").val()
        };
        $.ajax({
            type: "GET",
            data: modelData,
            url: "/Home/getNewPrice",
            async: true,
            success: function (data) {
                document.getElementById('priceLabel').innerHTML = data.currentPrice;
            }
        });
    });

        <div id="priceLabel">
            <h2>
                @Html.DisplayFor(model => model.Price)
            </h2>
        </div>

这是我的模特：

[Required(ErrorMessage = "Price is Required.")]
    [Range(0.01, 10000.00, ErrorMessage = "Your quote is not complete because you haven't completed all of the steps.")]
    [DataType(DataType.Currency)]
    [DisplayFormat(DataFormatString = "{0:C}")]
    public decimal Price { get; set; }

这是我的控制器代码：

    public decimal currentPrice { get; set; }
    public string defaultCurrency { get; set; }
    public decimal extraFee { get; set; }
    public decimal pricePerPage { get; set; }

    WritingAppModel model = new WritingAppModel();

    public JsonResult getNewPrice(modelData dropdownValues)
    {
        // check for urgency first since that is the base price
        if (dropdownValues.urgency != null)
        {
            currentPrice = Convert.ToDecimal(dropdownValues.urgency);

            if (dropdownValues.documentType != null)
            {
                currentPrice = currentPrice + Convert.ToDecimal(dropdownValues.documentType);

                if (dropdownValues.numberOfPages != null)
                {
                    currentPrice = currentPrice * Convert.ToInt16(dropdownValues.numberOfPages);
                }
            }
        }

        currentPrice = Math.Round(currentPrice, 3, MidpointRounding.AwayFromZero);
        model.Price = currentPrice;
        // do something with value and return a decimal
        return Json(new { currentPrice = model.Price }, JsonRequestBehavior.AllowGet);
    }

Answer 1

以下内容：

@Html.DisplayFor(model => model.Price, new { id = "priceLabel" })

不符合您的想法。 id作为附加视图数据传递给显示模板，但它不会在相应的HTML元素上设置id属性，这是您所需要的。查看浏览器中生成的HTML标记，您将看到此id没有元素。很明显document.getElementById('priceLabel')只会返回null并且您会收到一个javascript错误（如果您在开发工具栏中打开控制台，则会在浏览器中看到错误）。

因此，您可能需要一个具有正确id：

的DOM元素

<div id="priceLabel">
    @Html.DisplayFor(model => model.Price)
</div>

并且在你的success回调中，因为你已经使用了jQuery，你可以尝试替换：

document.getElementById('priceLabel').innerHTML = data.currentPrice;

使用：

$('#priceLabel').html(data.currentPrice);

在控制器方法中更改模型数据

1 个答案: