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

Question

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

这是我的表格。

我想要的是当用户选择 Individual radiobutton 时，应该禁用另一个 radionbutton 文本字段。我设法使用 JSFiddle here .

实现了这一点

我做的是
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

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

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

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

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

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

Answer 2

完全复制并粘贴下面的代码，它会在我这边work.I测试并且工作正常。

@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 3

JQuery缺少lib文件，只需添加JQuery你上面的lib文件javascript.

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

How to use jquery in MVC asp.net c#

c#

asp.net-mvc

jquery

radiobuttonfor