Twitter Bootstrap Question posted in

The partial view 'SubmitForm' was not found or no view engine supports the searched locations. The following locations were searched:-Twitter bootstrap

I’m new to Umbraco and am trying to get my contact form up and running. The error I’m getting is very weird and I’m not able to make head or tail of it. The yellow screen says –

The partial view ‘SubmitForm’ was not found or no view engine supports
the searched locations. The following locations were searched:

Why would it be looking for a partial named "SubmitForm" and any suggestions on how I can fix it?

I’m working on Umbraco V8. My code is as follows:

ContactViewMode.cs:

using System.ComponentModel.DataAnnotations;

namespace Dhi_Quest.ViewModels
{
    public class ContactViewModel
    {
        [Required(ErrorMessage = "Please enter your name")]
        public string Name { get; set; }
        [Required(ErrorMessage ="Please enter your email address")]
        [EmailAddress(ErrorMessage ="You must enter a valid email address")]
        public string Email { get; set; }
        [Required(ErrorMessage ="Please enter your message")]
        [MaxLength(500, ErrorMessage ="Your message must be no longer than 500 characters")]
        public string Message { get; set; }


        public int ContactFormId { get; set; }
    }
}

ContactSurfaceController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Umbraco.Web.Mvc;
using Dhi_Quest.ViewModels;
using Umbraco.Web;
using System.Net.Mail;
using Umbraco.Core.Logging;

namespace Dhi_Quest.Controllers
{
    public class ContactSurfaceController : SurfaceController
    {
        private readonly ILogger _logger;
        public ContactSurfaceController(ILogger logger)
        {
            _logger = Logger;
        }

        [HttpGet]
        public ActionResult RenderForm()
        {
            ContactViewModel model = new ContactViewModel() { ContactFormId = CurrentPage.Id };
            return PartialView("~/Views/Partials/Contact/_ContactForm.cshtml", model);
        }

        [HttpPost]
        public ActionResult RenderForm(ContactViewModel model)
        {
            return PartialView("~/Views/Partials/Contact/_ContactForm.cshtml", model);
        }

        public ActionResult SubmitForm(ContactViewModel model)
        {
            bool success = false;

            if (ModelState.IsValid)
            {
                success = SendEmail(model);
            }

            var contactPage = UmbracoContext.Content.GetById(false, model.ContactFormId);

            var successMessage = contactPage.Value<IHtmlString>("successMessage");
            var errorMessage = contactPage.Value<IHtmlString>("errorMessage");

            return PartialView(("~/Views/Partials/Contact/_Result.cshtml", success ? successMessage : errorMessage));
        }

        public bool SendEmail( ContactViewModel model)
        {
            try
            {
                MailMessage message = new MailMessage();
                SmtpClient client = new SmtpClient();

                string toAddress = "[email protected]";
                string fromAddress = "[email protected]";
                message.Subject = $"Web Enquiry from: {model.Name} - {model.Email}";
                message.Body = model.Message;
                message.To.Add(new MailAddress(toAddress, toAddress));
                message.From= new MailAddress(fromAddress, fromAddress);
                client.Send(message);
                return true;
            }
            catch (Exception ex)
            {
                _logger.Error(typeof(ContactSurfaceController), ex, "Error sending contact form.");
                return false;
            }
        }
    }
}

_Result.cshtml partial

@model   IHtmlString

@Modell

_ContactForm.cshtml partial

@inherits UmbracoViewPage<ContactViewModel>

@using Dhi_Quest.ViewModels;
@using Dhi_Quest.Controllers;

@using ClientDependency.Core.Mvc

@{

    Html.EnableClientValidation();
    Html.EnableUnobtrusiveJavaScript();

    Html.RequiresJs("https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js");
    Html.RequiresJs("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js");
    Html.RequiresJs("~/Scripts/jquery.validate.min.js");
    Html.RequiresJs("~/Scripts/jquery.validate.unobtrusive.js");
    Html.RequiresJs("~/Scripts/jquery.unobtrusive-ajax.min.js");
    Html.RequiresJs("~/Scripts/contactForm.js");
}



<div id="form-outer">

    @using (Ajax.BeginForm("SubmitForm", "ContactSurface", new AjaxOptions()
    {
        UpdateTargetId = "form-result",
        HttpMethod = "POST",
        InsertionMode = InsertionMode.Replace,
        OnSuccess = "contactForm.showResult",
        OnFailure = "contactForm.showResult"
    }, new { id = "contact-form" }))
    {

        <div class="fields">
            <div class="field half">
                <label for="name">Name</label>
                @Html.TextBoxFor(m => m.Name, new { @id = "name", type = "text", name = "name", placeholder = "Enter your name" })
                @Html.ValidationMessageFor(m => m.Name)
                @*<input type="text" name="name" id="name" />*@
            </div>
            <div class="field half">
                <label for="email">Email</label>
                @Html.TextBoxFor(m => m.Email, new { @id = "email", type = "text", name = "email", placeholder = "Enter your email" })
                @Html.ValidationMessageFor(m => m.Email)
                @*<input type="text" name="email" id="email" />*@
            </div>
            <div class="field">
                <label for="message">Message</label>
                @Html.TextAreaFor(m => m.Message, new { @id = "message", name = "message", rows = "6", placeholder = "Type your message in 500 characters or less" })
                @Html.ValidationMessageFor(m => m.Message)
                @*<textarea name="message" id="message" rows="6"></textarea>*@
            </div>

            @Html.HiddenFor(m => m.ContactFormId)
        </div>
        <ul class="actions">
            <li><input type="submit" value="Send Message" class="primary contact-submit" /></li>
            <li><input type="reset" value="Clear" /></li>
        </ul>


    }

</div>

<div id="form-result">

</div>

My contactForm.js JavaScript

var contactForm = contactForm ||
{
    init: function () {
        this.listners();
    },

    listners: function () {
        $(document).on('click', '.contact-submit', function () {
            e.preventDefault();
            var form = $("#contact-form");
            form.submit();
        })
    },

    showResult: function () {

        $('#form-outer').hide('slow');
        $('#form-result').show('slow'); 
    }

}

Finally Rendering it at Contact_Us.cshtml

@inherits Umbraco.Web.Mvc.UmbracoViewPage
@{
    Layout = "master.cshtml";
}

@using ClientDependency.Core.Mvc

@{

    Html.EnableClientValidation();
    Html.EnableUnobtrusiveJavaScript();

    Html.RequiresJs("https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js");
    Html.RequiresJs("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js");
    Html.RequiresJs("~/Scripts/jquery.validate.min.js");
    Html.RequiresJs("~/Scripts/jquery.validate.unobtrusive.js");
    Html.RequiresJs("~/Scripts/jquery.unobtrusive-ajax.min.js");
    Html.RequiresJs("~/Scripts/contactForm.js");
}

<!--Contact-->
<br />
<section id="contact">
    <div class="inner">
        <section>
            @{ Html.RenderAction("RenderForm", "ContactSurface");}
        </section>
        <section class="split">
            <section>
                <div class="contact-method">
                    <span class="icon solid alt fa-envelope"></span>
                    <h3>Email</h3>
                    <a href="#">[email protected]</a>
                </div>
            </section>
            <section>
                <div class="contact-method">
                    <span class="icon solid alt fa-phone"></span>
                    <h3>Phone</h3>
                    <span>1234567890</span>
                </div>
            </section>
            <section>
                <div class="contact-method">
                    <span class="icon solid alt fa-home"></span>
                    <h3>Address</h3>
                    <span>
                        Address line 1
                        Address line 2
                    </span>
                </div>
            </section>
        </section>
    </div>
</section>
Tags:

2

Answers


  1. 0

    Where is your ‘SubmitForm’ partial? Do you have a view called SubmitForm.cshtml within the view folder? This is what the error is asking for

    I guess the error is on your submit form action, do you need to decorate it with either that [httppost] of [httpget] attribute?

    It should be calling _Result.cshtml but I’m assuming it’s no hitting that action.

    Login or Signup to reply.
  2. 0

    You can’t use a normal MVC BeginForm helper with Umbraco. To create a form that submits to a SurfaceController you need to use:

    @using(Html.BeginUmbracoForm("SubmitForm", "ContactSurface"))
{
    // your form here
}

    If you want to do an Ajax submission you have to create your own JS script. and you can’t use the Ajax MVC helper.

    Take a look at the docs: https://our.umbraco.com/documentation/reference/templating/mvc/forms

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search