Как использовать jquery в MVC asp.net C#

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())
  {   

Это все еще не работает. Есть идеи, где я ошибся. Как использовать этот код jquery в MVC, меня это смущает, потому что когда я делал код в JSFiddle, все в порядке, но не в MVC. Я также установил пакеты Jquery из диспетчера nuget. Действительно нужно некоторое руководство.

Спасибо.

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 .