从Knockout向ASP.NET MVC提交表单不会带来所有值

时间:2014-10-17 10:02:51

标签: asp.net-mvc knockout.js

以下是我在ASP.NET MVC 5中的观点

@model Entities.Coupon

@using (Html.BeginForm("coupon", "marketing", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div class="scsm-18 scmd-16 sclg-14">
        <div class="form-group">
            <label>Codes</label>
            @Html.TextBoxFor(p => p.Code, new { @class = "form-control", @data_bind = "value: Code", @autofocus = true, @maxlength = "50" })
        </div>
        <input type="radio" name="IsPerCentOrDollar" value="1" data-bind="checked: IsPerCentOrDollar" />
        <span>PercentageAmount</span>
        <input type="radio" name="IsPerCentOrDollar" value="2" data-bind="checked: IsPerCentOrDollar" />
        <span>DollarAmount</span>
        <input type="radio" name="IsPerCentOrDollar" value="3" data-bind="checked: IsPerCentOrDollar" />
        <span>FreeShipping</span>
    </div>

    <div class="panel-footer text-right">
    <input type="submit" name="commandType" id="btnSave" class="btn btn-primary" data-bind="click:submit" value="Save" />
    </div>
}

在剧本中:

$(document).ready(function () {
    var viewModel = new CouponViewModel(couponModel);
    ko.applyBindings(viewModel);

    function CouponViewModel(data) {
    self.Code = ko.observable(data.Code);
    self.IsPerCentOrDollar = ko.observable("1");
    self.DiscountLevel = ko.computed(function () {
        return self.IsPerCentOrDollar();
        });
    };
}

MVC中的代码:

[HttpPost, ActionName("coupon")]
public ActionResult coupon(Coupon coupon)
        {
            try
            {
                // some logic not yet in
            }
            catch (Exception ex)
            {

            }
            return View();
        }

我现在所拥有的一切。

在浏览器内的开发者工具中,我可以看到self.DiscountLevel的值在选择单选按钮时发生变化。

在提交时,在MVC前端,Code的值进入,但DiscountLevel的值不是。

非常感谢任何帮助。

问候。

1 个答案:

答案 0 :(得分:3)

让我展开@ StephenMuecke的评论(我认为这有其中的要点)。

ASP.NET MVC的默认模型绑定将使用请求中找到的值填充参数(Coupon)。只有表单元素与请求一起发送。您似乎期望发送DiscountLevel,但它只是用户浏览器中存在的JavaScript函数。

添加这样的东西可以解决您的直接问题:

<input type="hidden" name="DiscountLevel" data-bind="value: DiscountLevel" />

要注意相关问题:您遇到问题的属性是计算可观察对象。但是,您可能想要发送它,因为它完全取决于IsPerCentOrDollar。只需让服务器端Coupon类从该属性中获取折扣级别。这也可以防止用户侵入隐藏的输入并发送恶意值。