里面的代码<script> tag not registering

Question

I'm trying to send an AJAX post request from my View to Controller to add new data into my database. But when I write a script to do so inside my View (Index.cshtml), it wouldn't work. I tried setting a breakpoint inside the function, and it says

The breakpoint will not currently be hit. No executable code of the debugger's target code type is associated with this line. Possible causes include: conditional compilation, compiler optimizations, or the target architecture of this line is not supported by the current debugger code type.

Disclaimer: it is possible that I'm doing this completely wrong, but I think I'm not, and I'm very confused why I'm getting this error. How can I do this properly?

The script I'm trying to run:

<script>
    $("#AddFriend").click(function () {
        mydata = { AddName: $("#AddName").val(), AddLastName: $("AddLastName").val(), AddAge: $("AddAge").val(), AddTag: $("AddTag").val() }
        $.ajax({
            url: "/Home/AddFriend",
            type: 'Post',
            data: mydata,
            success: null
        });
    });
</script>

The section of the code it refers to:

             <div>
                <label>Name:</label><input id="AddName" type="text" /> <br />
                <label>Last name:</label><input id="AddLastName" type="text" /> <br />
                <label>Age:</label><input id="AddAge" type="text" /> <br />
                <label>Tag:</label><input id="AddTag" type="text" /> <br />
                <label id="AddLabel"></label>
                <button id="AddFriend">Submit</button>
            </div>

The function inside the Controller the AJAX code should reach:

    [HttpPost]
    public void AddFriend(string AddName, string AddLastName, string AddAge, string AddTag)
    {
        using (var context = new ContactEntities1())
        {
            Friend fr = new Friend();
            fr.userId = 1;
            fr.Name = AddName;
            fr.LastName = AddLastName;
            fr.Age = Convert.ToInt32(AddAge);
            fr.Tag = AddTag;
            context.Friend.Add(fr);
            context.SaveChanges();
        }
    }

(for the record, I'm setting the breakpoint at the following line:)

mydata = { AddName: $("#AddName").val(), AddLastName: $("AddLastName").val(), AddAge: $("AddAge").val(), AddTag: $("AddTag").val() }

Answer 1

to answer the question

the click is not firing at all, I tried adding a line that changed a value of a label at the start of the click function, and it wouldn't execute either, so I think the click function itself is not executing

I think your just missing a ready() :

 $(document).ready(function() { $("#AddFriend").click(function () { alert('click fired'); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div> <label>Name:</label><input id="AddName" type="text" /> <br /> <label>Last name:</label><input id="AddLastName" type="text" /> <br /> <label>Age:</label><input id="AddAge" type="text" /> <br /> <label>Tag:</label><input id="AddTag" type="text" /> <br /> <label id="AddLabel"></label> <button id="AddFriend">Submit</button> </div>

The .ready() method offers a way to run JavaScript code as soon as the page's Document Object Model (DOM) becomes safe to manipulate.