user3643092 user3643092 - 6 months ago 22
jQuery Question

How to use jquery in MVC asp.net c#

Currently I am working on online application form using MVC asp.net .

This is my form.

enter image description here

What I want is that when user choose Individual radiobutton, the other radionbutton textfield should be disabled. I managed to achieved this using JSFiddle here .

What I did was

1) Copied the coding from JSFiddle that I have created into the MVC view

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


I placed the code before @Html.BeginForm() . But it is not working.

2) So I tried to place the code into different js file then call it from view


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


It is still not working. Any ideas where I did wrong. How to use this jquery code in MVC, it confuses me, because when I did the code in JSFiddle everything is ok, but not in MVC. I have also install Jquery packages from the nuget manager. Really need some guidance.

Thank you.

Answer

Copy and paste the code below exactly as it is below and it will work.I tested on my side and it works just fine.

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