Using javascript/AJAX in MVC Razor View?

Question

I am supposed to convert a form submission from MVC Razor submission to an Ajax submission but I am having trouble even using simple javascript functions in the view of the form (Add.cshtml).

For starters, I try to link the JS file that i want to use in the following way:

@section JavaScript
{
   <script type="text/javascript" src="@Url.Content("/Scripts/ajax_submit.js")"></script>
}

The javascript file looks like this:

function dosubmit() {
    $("#add_address").ajaxForm({ url: '~/Home/Add', type: 'post' })
    alert("IT WORKS");
    return false;// if it's a link to prevent post
}

and I have my form built in the following way:

@model MvcApplicationTest.Models.PersonModel
@section JavaScript
{
   <script type="text/javascript" src="@Url.Content("/Scripts/ajax_submit.js")"></script>
}

@{
    ViewBag.Title = "Hinzufügen";
}



<h2>Hinzufügen</h2>


<form id="add_address">

    <div class="fieldrow">
        @Html.LabelFor(x => x.Nachname)
        @Html.TextBoxFor(x => x.Nachname)
        @Html.ValidationMessageFor(x => x.Nachname)
    </div>
    <div class="fieldrow">
        @Html.LabelFor(x => x.Vorname)
        @Html.TextBoxFor(x => x.Vorname)
        @Html.ValidationMessageFor(x => x.Vorname)
    </div>
    <div class="fieldrow">
        @Html.LabelFor(x => x.Strasse)
        @Html.TextBoxFor(x => x.Strasse)
        @Html.ValidationMessageFor(x => x.Strasse)
    </div>
    <div class="fieldrow">
        @Html.LabelFor(x => x.Hausnummer)
        @Html.TextBoxFor(x => x.Hausnummer)
        @Html.ValidationMessageFor(x => x.Hausnummer)
    </div>
    <div class="fieldrow">
        @Html.LabelFor(x => x.Plz)
        @Html.TextBoxFor(x => x.Plz)
        @Html.ValidationMessageFor(x => x.Plz)
    </div>
    <div class="fieldrow">
        @Html.LabelFor(x => x.Ort)
        @Html.TextBoxFor(x => x.Ort)
        @Html.ValidationMessageFor(x => x.Ort)
    </div>
    <!--Martin-->
    <div class="fieldrow">
        @Html.LabelFor(x => x.Email) 
        @Html.TextBoxFor(x => x.Email)
        @Html.ValidationMessageFor(x => x.Email)
    </div>

    <input type="button" onclick="dosubmit()" value="Speichern"  />
</form>

However, when I click the button nothing happens (it should pop up a window with the desired text).

I have tried to include the JS file into the _Layout.cshtml, but it still doesn't work.

Thanks for your help :)

Are there any Javascript errors occurring?

Ant P
– Ant P

2013-05-28 13:44:57 +00:00
Commented May 28, 2013 at 13:44 — Ant P
– Ant P, Commented May 28, 2013 at 13:44

Andrew Whitaker · Accepted Answer · 2013-05-28 13:45:31Z

1

You should just need to call .ajaxForm on the form itself when the document is ready. .ajaxForm by itself just prepares the form for ajax submission, so by the time the submit button has been pressed, it's already too late.

I'd remove the submit handler from the submit button (I'd also use an input of type submit here):

<input type="submit" value="Speichern"  />

and add the following:

$(function () {
    $("#add_address").ajaxForm({ 
        url: '~/Home/Add', 
        beforeSubmit: function () {
            alert('about to submit');
        },
        type: 'post' 
    });
});

Alternatively you could use .ajaxSubmit instead of .ajaxForm:

function dosubmit() {
    $("#add_address").ajaxSubmit({ url: '~/Home/Add', type: 'post' });
    alert("IT WORKS");
    return false;// if it's a link to prevent post
}

answered May 28, 2013 at 13:45

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

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

4 Comments

user1477388 Over a year ago

I think url: should be url: '@Url.Action("Add", "Home")',.

Andrew Whitaker Over a year ago

That's a question for the OP. I'm not sure what the URL should be, just grabbed it from his original code.

Martin K Over a year ago

The problem still persists when I include the <script></script> with the .ajaxForm you have written. When I press the button still nothing happens (it still has the dosubmit() handler as onclick).

Martin K Over a year ago

None, but now I changed the button to type submit, and changed the URL and user1477388 suggested (it seems more logical to me that it's done this way) '@Url.Action("Add", "Home")' and the result is that it actually updates the StringQuery, but it does not executed the ActionResult from the Controller. @AndrewWhitaker

Collectives™ on Stack Overflow

Using javascript/AJAX in MVC Razor View?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related