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

Question

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

这是我的表格。

我想要的是当用户选择Individual radiobutton时，应该禁用另一个radionbutton文本字段。 我成功地实现了这一点使用的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文件，只需添加JQuery Lib File顶部javascript即可。