How to use jquery in MVC asp.net c#

Question

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

This is my form.

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.

Are you including the jquery script before it? Can you look in your browser's console - is any error displayed? — Rob, Jun 06 '16 at 02:33
Put the script at the bottom, or, wait until the document is ready to do your binding. Your trying to bind a click event to an element that has yet to be created. — matt., Jun 06 '16 at 02:34
@Rob , there in no error displayed, just the script is not working.. — user3643092, Jun 06 '16 at 03:07
@ᴉʞuǝ u mean, instead i put the script before the html.beginform, i should put the script after the html.beginform ? — user3643092, Jun 06 '16 at 03:08
In addition to needing to move the script to immediately before the closing `
` tag, you can greatly simplify you code by wrapping the controls in the LHS side in (say) `
` and the controls in the RHS in `
` and then use `$('#individual input').prop('disabled', true);` etc — , Jun 06 '16 at 03:10
I tried, but it seems that the jquery is not triggered at all .. — user3643092, Jun 06 '16 at 04:06
Have you include `jquery`? And what errors are you getting. But this is a bad design anyway for many reasons. Either have a page with the 2 links that redirect you to a register individual page or a register company page, or if you want it all on the same page, have 2 forms that submit to different POST methods and hide one or the other based on the selected radio button — , Jun 06 '16 at 04:10

score 7 · Accepted Answer · answered Jun 06 '16 at 04:33

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

Its working!!! thank you so much, but I would like to ask , why do we need — user3643092, Jun 06 '16 at 05:03
just for my understand.. is it, the jquery will only work if we put that code? — user3643092, Jun 06 '16 at 05:04
jQuery is a javascript library.To use it you need to add a reference to,that's what that line does.It's the same as adding a DLL library reference to a project in C#.If you never added the reference you cannot use the code in that library — Denys Wessels, Jun 06 '16 at 05:07
Just want to add one more thing here . this jquery reference need always internet connection ,for offline use download jquery file and add the reference as like you added now. — Pankaj Gupta, Jun 06 '16 at 05:28

Robert Moskal · Answer 2 · 2016-06-07T19:14:06.393

As the comment says, the DOM elements you are trying to attach to don't exist when the script is executed.

You either need to put the in-line script from your first at the bottom of the template (after the form elements) so that the DOM elements are loaded, or you need to wrap it in a page ready function, which is probably what jsfiddle does.

In the latter case you can wrap all your script code in something like this:

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

As the accepted answer says, you also need to make sure jquery is loaded on the page.

score 1 · Answer 3 · answered Jun 06 '16 at 05:13

1

JQuery Lib file is missing, just add JQuery Lib File top of you javascript .

answered Jun 06 '16 at 05:13

Karthikeyan Rajakumar

19
5

How to use jquery in MVC asp.net c#

3 Answers3