0

在 MVC4 视图中，我正在显示带有单选按钮的项目列表，如下所示：

<input type="button" value="Select this address" onclick="setLocation('@Url.RouteUrl("SelectCustomerAddress", new {addressId = item.Id})')" />

在视图的下方，我有一个复选框，用户必须在其中接受服务条款，如下所示：

@Html.CheckBoxFor(model => model.TermsAccepted)

我想更改“onclick”，以便在用户继续之前接受 ToS。我是否需要使用 javascript，如果需要，如何使用？

那么错误应该如何显示呢？使用验证摘要？

编辑：

使用下面的 javascript，onclick 更改为：

<input type="button" value="Select this address" onclick="selectAddress(@item.Id)" />

和以下内容的javascript：

           <script>
                $(function () {


                    function selectAddress(selectedId) {
                        if ($('#TermsAccepted').is(':checked')) {
                            setLocation('@Url.RouteUrl("SelectCustomerAddress", new { addressId = selectedId})')
                        }
                        else {
                            $('#checkErrorMsg').toggle();
                        }  
                    }
                })
            </script>
4

1 回答 1

0

如果您使用 chrome Inspect 元素，您可以查看 的 ID CheckBoxFor(model => model.TermsAccepted)，然后您可以在setLocation导航用户离开之前在函数中检查它。

这将在 javascript 中完成。我使用 Jquery。所以在剃须刀页面上我这样做：

<script>
   $(function () {
       // any javascript in here
   })
</script>
@Html.CheckBoxFor(model => model.TermsAccepted)

这将在文档加载时自动加载可供使用的 javascript。然后使用类似这样的简单测试：

if($('#TermsAccepted_Id').is(':checked'))

#TermsAccepted_Id是您的复选框，正如代码所示，您只是在查看它是否已被选中。如果没有，只需显示一个错误。您可能会显示如下错误：

<script>
       $(function () {
           // any javascript in here
           var setLocationFunction = setLocation('@Url.RouteUrl("SelectCustomerAddress", new {addressId = item.Id})');

           function checkTsAndCs() {
              if($('#TermsAccepted_Id').is(':checked'))
              {
                 //Everything okay, proceed
                 setLocationFunction(); // this is where you want to call the function from above, it'd be better to make it a variable for use later, i'm not 100% sure on how to call a function, that would be a quick look up for you ;)
              }
               else
              {
                 $('#checkErrorMsg').toggle();
              }  
           }
       })
</script>
@Html.CheckBoxFor(model => model.TermsAccepted)
<div id="checkErrorMsg" style="display:none">Please accept these before you go on.</div>

在你看来，这样说：

<input type="button" value="Select this address" onclick="checkTsAndCs()" />

我不确定你是否必须把onclick 函数放在javascript:前面checkTsAndCs，但同样，你可以找到它;)，我通常一时冲动写下我所有的 jquery javascript，然后立即忘记一切，我知道很有趣，但我的大脑认为它不需要记住它。

于 2013-06-11T08:58:29.333 回答