WebTrainingRoom Online Courses
Online Training for Asp.net MVC Web Designing Development, MS SQL, Digital Marketing

Ajax.BeginForm submit in Asp.net MVC

Here we learn Ajax Form submit 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

Ajax form example in Asp.net MVC

Step 1: Let’s design a simple form with just one textbox
<div id="commentFormContainer">
@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" />
}
</div>

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>

Now we need to write code in controller, this can be done either of following way

Step 3: Write a ActionResult and 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);
}

Step 4: Write a JsonResult and return Json(_message)

[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
 
Ajaxform in Asp.net MVC

Consulting