CODEWITHSUNDEEP
asp.net-mvc-3
bobek
bobek

Reputation: 8022

asp.net mvc 3 return a message from controller action ajax

I have a question about Ajax form submit. Here is the code:

Controller

[HttpPost, ValidateAntiForgeryToken, ValidateInput(true)]
public ActionResult Contact(ContactForm model)
{
    if (!ModelState.IsValid)
    {                    
        return new EmptyResult();                    
    }
    else
    {
        string message = model.Name + " " + model.Telephone + " " + model.Email + " " + model.Address + " " + model.City + " " + model.ZipCode;

        //send it    

        return new EmptyResult();
     }
}

View

<script type="text/javascript">

    function PostSuccess() {
        $('.success-message').html("Thank you for your interested");
    }

    function PostFailure() {
        $('.success-message').html("Something went wrong... Make sure the required fields are filled out and in correct format");
    }
</script>
<div class="contact-form">
@using (@Ajax.BeginForm("Contact", "Info", new AjaxOptions { HttpMethod = "Post", OnFailure = "PostFailure", OnSuccess = "PostSuccess" }))
{ 
    <p>
    @Html.LabelFor(x => x.Name, "Your name") 
    @Html.TextBoxFor(x => x.Name, new { @class = "required" })<span class="required">*</span>
    </p>

    <p>
    @Html.LabelFor(x => x.Email, "Your email")
    @Html.TextBoxFor(x => x.Email)<span class="required">*</span>
    </p>

    <p>
    @Html.LabelFor(x => x.Telephone, "Your phone")
    @Html.TextBoxFor(x => x.Telephone)<span class="required">*</span>
    </p>

    <p>
    @Html.LabelFor(x => x.Address, "Your address")
    @Html.TextBoxFor(x => x.Address)
    </p>

    <p>
    @Html.LabelFor(x => x.ZipCode, "Your zipcode")
    @Html.TextBoxFor(x => x.ZipCode)
    </p>

    <p>
    @Html.LabelFor(x => x.City, "Your city")
    @Html.TextBoxFor(x => x.City)
    </p>
    @Html.AntiForgeryToken()
    <button type="submit" id="bContact">Send Message</button>
}

<div class="required">* Required Fields</div>
<div class="success-message">Output</div>

All I want is a appropriate message in "success-message" class, but the POST is always successful so I always get "Thank you for your interest."

Thank you.

Upvotes: 1

Views: 3252

Answers (3)

Nguyễn Quốc Kh&#225;nh
Nguyễn Quốc Kh&#225;nh

Reputation: 89

To get a appropriate message in "success-message" class, you must change code in your action. Such as :

[HttpPost, ValidateAntiForgeryToken, ValidateInput(true)]
        public ActionResult Contact(ContactForm model)
        {
            if (!ModelState.IsValid)
            {

                return Json("", JsonRequestBehavior.AllowGet);

            }
            else
            {
                string message = model.Name + " " + model.Telephone + " " + model.Email + " " + model.Address + " " + model.City + " " + model.ZipCode;
                return Json(message, JsonRequestBehavior.AllowGet);
            }
        }

and in success function, you put parameter in there .

function PostSuccess(data) {

        $('.success-message').html(data);
    }

Upvotes: 2

Drew Gaynor
Drew Gaynor

Reputation: 8472

If I understand you correctly, you'd like for your form to be validated. That is, you'd like for the message in PostFailure to be displayed if the user made some invalid inputs, and to force the user to make corrections before running the code in the else statement of your controller. You haven't posted your model so I don't know if you are doing this, but for the form to validate you should use Data Annotations.

For example, your model should contain:

[Required(ErrorMessage = "Name is required!")]
public string Name { get; set; }

for the name field. You can change the message to be whatever you'd like, which allows for a message specific to Name rather than the generic one that you have, if you'd like.

Then in the view, you should include:

@Html.ValidationMessageFor(x => x.Name)

And be sure to include:

<appSettings>
    <add key="ClientValidationEnabled" value="true"/> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
</appSettings>

in your web.config file to enable client-side validation (assuming that you've included the jQuery validation libraries, but they're included by default in ASP.NET MVC3 projects).

Upvotes: 2

Lester
Lester

Reputation: 4413

OnSuccess and OnFailure refers to if the AJAX call was made successfully or failed. From MSDN for OnFailure:

This function is called if the response status is not in the 200 range.

You can do the following to get OnFailure to run:

throw new HttpException(404, "Not Found");

But I would recommend that it would be better to change the success event to call a javascript function that would parse the results of the call.

Upvotes: 0

Related Questions