使用Jquery表单插件asp.net mvc 3

Question

I have this code in the View:

<script src="../../Scripts/jquery.form.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function () {
    $('#myForm').ajaxSubmit();
});

@using (Html.BeginForm("PostData","Home",FormMethod.Post)) {

 <input type="text" name="name" />
 <input type="submit" value="submit" />
}

Then in the controller I have this method:

 [HttpPost]
    public void PostData(string name)
    {
        //do smoething with name
    }

The problem is that I get redirected the url /home/PostData when submitting the form.

Anyone got any suggestions?

Answer 1

ajaxSubmit() submits the form immediately. You need ajaxForm() in order to AJAXify an existing form:

$(document).ready(function () {
    $('#myForm').ajaxForm();
});

once a form has been AJAXified you could later force its submission with $('#myForm').ajaxSubmit(); or simply leave it to the user to press the submit button.

Also the way you have defined your form it doesn't seem to have an id. So your $('#myForm') selector is unlikely to return anything. You might want to assign an id to your form:

@using (Html.BeginForm("PostData", "Home", FormMethod.Post, new { id = "myForm" })) 
{
    <input type="text" name="name" />
    <input type="submit" value="submit" />
}

or if you don't want to assign unique id to the form you could AJAXify all forms on the current view by adapting your jQuery selector:

$(document).ready(function () {
    $('form').ajaxForm();
});