Free Web Development Online Tutorials, Learn to Code
Asp.net Ajax form submit using jquery, Ajax begin form asp.net mvc, Ajax form submit in Asp.net MVC

Ajax form submit in asp.net MVC

Here we learn how to submit Ajax Form using Jquery in Asp.net MVC, to keep the content more focused on Ajax Form, I have removed the validation details, so that the content does not looks long and remain focused on Ajax

Submit form using jquery Ajax

Step 1: Let’s design a simple Ajax form with just one textbox and AjaxOptions, we will see how ajax submit works!

Ajax.BeginForm Example

@using (Ajax.BeginForm("ajaxPostActionName", "controllerName", FormMethod.Post,
    new AjaxOptions
    {
        OnSuccess = "OnCommentpostSuccess",
        OnFailure = "OnCommentpostFailure",
        OnComplete = "OnCommentpostComplete",
        UpdateTargetId = "commentFormContainer"
    }))
{
Name :  @Html.TextBox("txtCName")
<input type="submit" value="Post Ajax" />
}
 

JavaScript to handle Ajax call

Step 2: Add reference of required Jquery files and write Javascript function

<script src="~/scripts/jquery-1.7.1.js"></script>
<script src="~/scripts/jquery.unobtrusive-ajax.min.js"></script>
                
<script>
    function OnCommentpostSuccess() {
        $("#commentFormContainer").innerHTML = "Posted successfullly";
    }

    function OnCommentpostFailure() {
        alert("Posting error occured");
        $get("#commentFormContainer").innerHTML = "Posting Fail";
    }

    function OnCommentpostComplete() {
        $("#commentFormContainer").innerHTML = "Done! Thankyou!";
    }
</script>

ActionResult to handle Ajax Post

Now we need to write code in controller to capture ajax post form data, this can be done either in ActionResult or JsonResult. In first example we write an ActionResult to capture form data. parameter FormCollection contain form data.

Step 3: Let's look at the code of ActionResult and see how to return Content(_message)

[HttpPost]
public ActionResult ajaxPostActionName(FormCollection model)
{
    string _message = null;
    StringBuilder _str = new StringBuilder();
    _str.Append("<div style='padding:10px;font-size:15px;'>");
    _str.Append(string.Format("Name: {0}", model["txtCName"]));
    _str.Append(string.Format("Date Time: {0}", DateTime.Now));
    _str.Append("</div>");
                
    _message = string.Format("Thanks {0}, Comment posted successfully on {1}", model["txtCName"],DateTime.Now);

    return Content(_message);
}

JsonResult to handle Ajax Post

Step 4: Write a JsonResult and return Json(_message)
. When you want to return JSON from your controller you need a JsonResult instead of ActionResult. Take a look at JSON result example from Asp.net mvc ajax form

[HttpPost]
public JsonResult ajaxPostActionName(FormCollection model)
{
string _message = null;
StringBuilder _str = new StringBuilder();
_str.Append("<div style='padding:10px;font-size:15px;'>");
_str.Append(string.Format("Name: {0}", model["txtCName"]));
_str.Append("</div>");
                
// Send email
// update /insert database                

_message = string.Format("Thanks {0}, Comment posted successfully on {1}", model["txtCName"],DateTime.Now);                
return Json(_message);
}

The difference between above two method is ActionResult returns plain string, and JsonResult return Json object, so if you have a custom object to return to GUI, JsonResult would be preferable

Remember to use UpdateTargetId property in your Ajax function to update the GUI with message from controller.

Comment
Name
Email
Website
Subscribe