form submissions plus user friendly url - Umbraco Forms

Renee Haas 18 posts 109 karma points

Jan 27, 2017 @ 15:18

Form Submissions + User Friendly URL

Umbraco Forms

Umbraco 7

I have a recipe page that uses url rewrites to create user friendly urls. On the recipe page I am using a partial view to implement a recipe review form. The issue I am seeing is that the form action does not pick up the rewritten url.

Here is my Partial View

@inherits UmbracoViewPage<Perdue.Models.ReviewModel>

@{ var ajaxOptions = new AjaxOptions { HttpMethod = "POST", OnSuccess = "feedback" }; } 
@using (Ajax.BeginForm("SubmitReview", "Review", ajaxOptions))
{

    @Html.AntiForgeryToken();
    <div id="review-form-all">
        <span class="star-rating-title2 hide-mobile">What Do You Think?</span>
        <span class="star-rating-title">Your Rating:</span>
        <span class="starRating">
            @foreach (var Rating in Model.RatingList)
            {
                if (Rating.Value == "5")
                {
                    @Html.RadioButtonFor(model => model.Rating, Rating.Value, new { id = Rating.ID, @class = "rating-input", Checked = "checked" })
                    @Html.Label(Rating.ID, Rating.Value, new { @class = "rating-star" })
                }
                else
                {
                    @Html.RadioButtonFor(model => model.Rating, Rating.Value, new { id = Rating.ID, @class = "rating-input" })
                    @Html.Label(Rating.ID, Rating.Value, new { @class = "rating-star" })
                }
            }
        </span>
        <div id="review-form">
            @Html.EditorFor(m => m.Name, new { htmlAttributes = new { placeholder = "Jane Doe" } })
            @Html.ValidationMessageFor(m => m.Name)
            @Html.EditorFor(m => m.Email, new { htmlAttributes = new { placeholder = "Email" } })
            @Html.ValidationMessageFor(m => m.Email)
            @Html.EditorFor(m => m.Comment, new { htmlAttributes = new { placeholder = "Comment" } })
            @Html.ValidationMessageFor(m => m.Comment)
            <br />
            <div>
                <span class="in-block"><button type="submit" class="yellow-button">ADD YOUR COMMENT</button></span>
                <span class="in-block reviews-label required-field">All fields are required.</span>
            </div>
        </div>
    </div>
    <div id="reviewTY">
        <p class="review-thank-you">Thank you for sharing your thoughts.</p>
    </div>
}
<script>
function feedback(result) {

    if (result.success) {
        console.log('ok');
    } else {
        var error = "Error";

        if (result.error) {
            error = result.error;
        }

        console.log(error);
    }
}
</script>

And my abbreviated Controller code:

[HttpPost]
        [ValidateAntiForgeryToken]
        //public ActionResult SubmitReview(ReviewModel review)
        public JsonResult SubmitReview(ReviewModel review)
        {
            if (ModelState.IsValid)
            {
                //Save review data

                return Json(new { success = true });
            }
            else
            {
                return Json(new { success = false });
            }
        }

What I was seeing before I changed the form to ajax was the action being something like /recipes/title=soup?id=10 instead of /recipes/soup/10/

It would post to the controller but then redirect to the wrong url.

After changing to an Ajax form the action is now /recipes/umbraco/Surface/Review/SubmitReview which throws an 404 error.

Any idea on what the action needs to be here to submit correctly and how to modify the action to do so?

Copy Link

Cristhian Amaya 52 posts 423 karma points

Jan 27, 2017 @ 19:39

Hi Renee,

I think you've got two different problems here, one of them being the ajax form which is the only one I'm going to address.

Your problem is the route which should be something like /umbraco/surface/review/submitreview, but I'll go a little bit further and recommend you not to use the Ajax.BeginForm and instead use your own code to submit the form using Ajax because you'd have more control (I've never been a fan of magical methods).

I created a quick and dirty example similar to yours and it looks like this:

The form:

@using (Html.BeginUmbracoForm<ReviewController>("SubmitReview", null, new { id = "submit-review-form" }, FormMethod.Post))
{
    @Html.AntiForgeryToken()
    <input type="text" name="name" id="name" />
    <input type="text" name="email" id="email" />
    <textarea id="comment" name="comment"></textarea>
    <button type="submit">Submit</button>
}

The controller:"

public class ReviewController : SurfaceController
{
    [HttpPost]
    [ValidateAntiForgeryToken]
    public JsonResult SubmitReview(AddReviewViewModel model)
    {
        if (ModelState.IsValid)
        {
            return Json(new { success = true });
        }
        else
        {
            return Json(new { success = false });
        }
    }
}

The Ajax submit:

 <script type="text/javascript">
        $('#submit-review-form').on('submit', function (e) {
            e.preventDefault();
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    console.log(result);
                }
            });
        });
    </script>

This is all you need for the form.

Now, for your friendly URLs, can you explain a little better what you're trying to do?

Cheers,

Cristhian.

Copy Link

Renee Haas 18 posts 109 karma points

Jan 27, 2017 @ 20:54

1,000 thank you's! With the modifications you suggested it is now working correctly.

Copy Link

is working on a reply...

Flag this post as spam?

Form Submissions + User Friendly URL