Question

在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，如果是，那该怎么办？

然后应该如何显示错误？使用ValidationSummary？

编辑：

使用下面的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>

Answer 1

如果您使用chrome Inspect元素，则可以查看CheckBoxFor(model => model.TermsAccepted)的ID，然后您可以在导航用户之前在函数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()" />

我不确定你是否必须在javascript:的onclick函数前面放checkTsAndCs，但是再一次，你可以找到它;），我通常写我所有的jquery javascript in这一刻的刺激，然后立刻忘记了事后的一切，我知道这很有趣，但我的大脑认为它不需要记住它。

C＃MVC4从razor到javascript？

1 个答案: