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

【问题标题】：How to use jquery in MVC asp.net c#如何在MVC asp.net c#中使用jquery
【发布时间】：2016-06-08 03:14:06
【问题描述】：

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

这是我的表格。

我想要的是，当用户选择单个单选按钮时，应该禁用其他单选按钮文本字段。我设法使用 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 包。真的需要一些指导。

谢谢。

【问题讨论】：

你之前是否包含了 jquery 脚本？您可以查看浏览器的控制台 - 是否显示任何错误？
将脚本放在底部，或者等到文档准备好进行装订。您尝试将点击事件绑定到尚未创建的元素。
@Rob ，没有显示错误，只是脚本不起作用..
除了需要将脚本移动到关闭 </body> 标记之前，您可以通过将 LHS 端的控件包装在（例如）<div id="individual"> 和控件中来大大简化代码在 <div id="company"> 的 RHS 中，然后使用 $('#individual input').prop('disabled', true); 等
您是否包含jquery？你得到了什么错误。但这无论如何都是一个糟糕的设计，原因有很多。要么有一个带有 2 个链接的页面，这些链接将您重定向到注册个人页面或注册公司页面，或者如果您希望所有这些都在同一页面上，则有 2 个表单提交到不同的 POST 方法并隐藏一个或另一个基于选中的单选按钮

标签： c# jquery asp.net-mvc radiobuttonfor

【解决方案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>
}

【讨论】：

它的工作！非常感谢，但我想问一下，为什么我们需要
只是为了我的理解.. 是不是，jquery 只有在我们输入该代码时才能工作？
jQuery 是一个 javascript 库。要使用它，您需要添加一个引用，这就是该行的作用。这与在 C# 中向项目添加 DLL 库引用相同。如果您从未添加您不能使用该库中的代码的参考
现在我明白了，非常感谢您的帮助:)
只是想在这里再添加一件事。此 jquery 参考需要始终连接互联网，离线使用下载 jquery 文件并添加参考，就像您现在添加的一样。

【解决方案2】：

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

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

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

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

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

【讨论】：

【解决方案3】：

JQuery Lib 文件丢失，只需在你的 javascript 顶部添加 JQuery Lib 文件。

【讨论】：