JavaScript not working in ASP.NET MVC with EF

Question

I am trying to wire up a button with some web app using the click method but it's not working. The JS on the rest of my web site is working fine but this does not seem to like me.

I am new to ASP.NET and I am working using a tutorial so if anything is done in a certain way it's because that's how it's done in tutorial. Here is my code of the page that is creating the problem, I will implement the function javascript how calculate montantbrut = courn + courm + cours

Create razor view :

<h2>Create</h2>
<div class="form-horizontal">
    <h4>Coordonnee</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.EnseignantId, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.EnseignantId, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.EnseignantId, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Nom, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Nom, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Nom, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Specialite, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.Specialite, new SelectList(ViewBag.list), "إختر إختصاص ",htmlAttributes:new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Specialite, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Rang, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.Rang, new SelectList(ViewBag.list), "إختر رتبة ", htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Rang, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Courn, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Courn, new { htmlAttributes = new { @class = "form-control" },,@id="courn" })
            @Html.ValidationMessageFor(model => model.Courn, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Tdn, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Tdn, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Tdn, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Tpn, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Tpn, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Tpn, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Courm, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Courm, new { htmlAttributes = new { @class = "form-control" },@id="courm" })
            @Html.ValidationMessageFor(model => model.Courm, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Tdm, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Tdm, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Tdm, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Tpm, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Tpm, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Tpm, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Cours, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Cours, new { htmlAttributes = new { @class = "form-control" } ,,@id="cours"})
            @Html.ValidationMessageFor(model => model.Cours, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Tds, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Tds, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Tds, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Tps, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Tps, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Tps, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Montantbrut, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Montantbrut, new { htmlAttributes = new { @class = "form-control" },@id="montanbrut" })
            @Html.ValidationMessageFor(model => model.Montantbrut, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Tva, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Tva, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Tva, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Montantnet, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Montantnet, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Montantnet, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-primary" onClick="savebtn" />
        </div>
    </div>
</div>

And Javascript code :

@section scripts {

<script type="text/javascript">

$(document).ready(function(){

    $('courn').change(function () {

        $('montantbrut').val = $('courn').val + $('courm').val+ $('cours').val;
        alert("test de click");
    });
});
</script>

hi sh.Imran this is code javascripte : @section scripts { <script type="text/javascript"> $(document).ready(function(){ $('msd').change(function () { $('mg').val = $('msu').val + $('msd').val; alert("test de click"); }); }); </script> — mohamed
– mohamed, Commented Aug 16, 2020 at 13:42
I edit it , if you have another solution with c# in razor page youn can help me and thnx you — mohamed
– mohamed, Commented Aug 16, 2020 at 13:57

Sh.Imran · Accepted Answer · 2020-08-16 14:06:10Z

1

Here you should use # with courn and other id's as selector in javascript.

$('#courn').change(function () { 

        var calc = $('#courn').val() + $('#courm').val() + $('#cours').val();
        $('#montantbrut').val(calc);
        alert("test de click");

    });

edited Aug 16, 2020 at 14:06

answered Aug 16, 2020 at 13:59

Sh.Imran

1,0297 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mohamed Over a year ago

the button does not work and I add it attribute on click in champ btn but the same result

z-eh · Accepted Answer · 2020-08-16 15:49:38Z

0

You don't use the # sign in jquery selector, and jquery don't find the element. In query selectors you need to use # for id and . for class attributes.

The right code is:

@section scripts {

<script type="text/javascript">

$(document).ready(function(){

    $('#courn').change(function () {

        $('#montantbrut').val($('#courn').val() + $('#courm').val() + $('#cours').val());
        alert("test de click");

    });

});

</script>

edited Aug 16, 2020 at 15:49

answered Aug 16, 2020 at 14:05

z-eh

262 bronze badges

4 Comments

z-eh Over a year ago

Maybe the @RenderSection("scripts") is in a bad position in between the <head></head> tags. Try to move it before the </body> tag.

mohamed Over a year ago

@section Scripts { @Scripts.Render("~/bundles/jqueryval") <script type="text/javascript"> $(document).ready(function () { $('#courn').change(function () { $('#montantbrut').val($('#courn').val() + $('#courm').val() + $('#cours').val()); alert("test de click"); }); }); </script> }

mohamed Over a year ago

I I tested but does not work if you give your facebook account I send it the complete code and thank you

mohamed Over a year ago

It's possible to calculate with c# item in razor view or no

Collectives™ on Stack Overflow

JavaScript not working in ASP.NET MVC with EF

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related