c# - 如何在MVC asp.net c#中使用jquery

Question

目前我正在使用 MVC asp.net 处理在线申请表。

这是我的表格。

我想要的是，当用户选择单个单选按钮时，应该禁用其他单选按钮文本字段。我设法在这里使用 JSFiddle 实现了这 一点。

我所做的是
1) 将我创建的 JSFiddle 中的编码复制到 MVC 视图中

@model Insurance.ViewModels.RegisterInfoPA
@{
  ViewBag.Title = "Insert";
 }
 <h2>Insert Fire Insurance</h2>

<script>
$(".radioBtn").click(function () {
    $("#reg_title").attr("disabled", true);
    $("#reg_registerNm").attr("disabled", true); //Comp_Name//Name
    $("#reg_identityNo").attr("disabled", true); //Ic_No//army//com_regis
    $("#pinfo_gender").attr("disabled", true);
    $("#busInfo_dateRegisCompany").attr("disabled", true);
    $("#reg_dateCompRegis").attr("disabled", true); //DOB
    $("#pinfo_occupation").attr("disabled", true);
    $("#pinfo_maritalId").attr("disabled", true);
    $("#busInfo_contactNm").attr("disabled", true);
    $("#busInfo_natureBusiness").attr("disabled", true);

    if ($("input[name=reg.identityId]:checked").val() == "1") {
        $("#reg_title").attr("disabled", false);
        $("#reg_identityNo").attr("disabled", false);
        $("#pinfo_gender").attr("disabled", false);
        $("#reg_dateCompRegis").attr("disabled", false);
        $("#pinfo_maritalId").attr("disabled", false);
        $("#pinfo_occupation").attr("disabled", false);
    }
    if ($("input[name=reg.identityId]:checked").val() == "2") {
        $("#reg_registerNm").attr("disabled", false);
        $("#busInfo_dateRegisCompany").attr("disabled", false);
        $("#busInfo_natureBusiness").attr("disabled", false);
        $("#busInfo_contactNm").attr("disabled", false);
    }
});
   </script>
    @using (Html.BeginForm())
   {       
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<link href="~/Content/FlexiPA.css" rel="stylesheet" />
<fieldset>
    <legend>register</legend>
    <div class="flexiPAtitle">
        <h3>
            <b>
                &nbsp;&nbsp;
                @Html.RadioButtonFor(model => model.reg.identityId, 1, new { @class = "radioBtn" })
                Individual Applicant&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                    
                @Html.RadioButtonFor(model => model.reg.identityId, 2, new { @class = "radioBtn" })
                Company Application

                @Html.HiddenFor(model=>model.reg.insuranceTypeId, 3)
            </b>
        </h3>
    </div>

我将代码放在 @Html.BeginForm() 之前。但它不起作用。

2）所以我尝试将代码放入不同的js文件中，然后从视图中调用它

<h2>Insert Fire Insurance</h2>
  <script src="~/Scripts/IndividualCompany.js"></script>
  @using (Html.BeginForm())
  {   

它仍然无法正常工作。任何我做错的想法。如何在 MVC 中使用这个 jquery 代码，这让我很困惑，因为当我在 JSFiddle 中编写代码时一切正常，但在 MVC 中却不行。我还从 nuget 管理器安装了 Jquery 包。真的需要一些指导。

谢谢你。

Answer 1

完全按照下面的方式复制并粘贴下面的代码，它会起作用。我在我这边测试过，它工作得很好。

@model Insurance.ViewModels.RegisterInfoPA

@{
    ViewBag.Title = "Insert";
}

<h2>Insert Fire Insurance</h2>

<script src="//code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {

        alert('jQuery Load.If this message box shows it means jQuery is correctly referenced and can be used on this page');

        $(".radioBtn").click(function () {

            alert('radioBtn click.If this message box shows the radio button click event is working');

            $("#reg_title").attr("disabled", true);
            $("#reg_registerNm").attr("disabled", true); //Comp_Name//Name
            $("#reg_identityNo").attr("disabled", true); //Ic_No//army//com_regis
            $("#pinfo_gender").attr("disabled", true);
            $("#busInfo_dateRegisCompany").attr("disabled", true);
            $("#reg_dateCompRegis").attr("disabled", true); //DOB
            $("#pinfo_occupation").attr("disabled", true);
            $("#pinfo_maritalId").attr("disabled", true);
            $("#busInfo_contactNm").attr("disabled", true);
            $("#busInfo_natureBusiness").attr("disabled", true);

            if ($("input[name=reg.identityId]:checked").val() == "1") {
                $("#reg_title").attr("disabled", false);
                $("#reg_identityNo").attr("disabled", false);
                $("#pinfo_gender").attr("disabled", false);
                $("#reg_dateCompRegis").attr("disabled", false);
                $("#pinfo_maritalId").attr("disabled", false);
                $("#pinfo_occupation").attr("disabled", false);
            }
            if ($("input[name=reg.identityId]:checked").val() == "2") {
                $("#reg_registerNm").attr("disabled", false);
                $("#busInfo_dateRegisCompany").attr("disabled", false);
                $("#busInfo_natureBusiness").attr("disabled", false);
                $("#busInfo_contactNm").attr("disabled", false);
            }
        });
    });
</script>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    <link href="~/Content/FlexiPA.css" rel="stylesheet" />
    <fieldset>
        <legend>register</legend>
        <div class="flexiPAtitle">
            <h3>
                <b>
                    &nbsp;&nbsp;
                    @Html.RadioButtonFor(model => model.reg.identityId, 1, new { @class = "radioBtn" })
                    Individual Applicant&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    @Html.RadioButtonFor(model => model.reg.identityId, 2, new { @class = "radioBtn" })
                    Company Application

                    @Html.HiddenFor(model => model.reg.insuranceTypeId, 3)
                </b>
                <input id="reg_title" type="text" />
            </h3>
        </div>
    </fieldset>
}

Answer 2

正如评论所说，执行脚本时，您尝试附加的 DOM 元素不存在。

您要么需要将第一个内联脚本放在模板底部（在表单元素之后）以便加载 DOM 元素，要么需要将其包装在页面就绪函数中，这可能是 jsfiddle做。

在后一种情况下，您可以将所有脚本代码包装成这样：

$(document).ready(function(){
    $(".radioBtn").click(function (){...
});

正如接受的答案所说，您还需要确保页面上加载了 jquery。

Answer 3

缺少 JQuery Lib 文件，只需在 javascript 顶部添加 JQuery Lib 文件即可。