ASP.net MVC3 - Razor Views and PartialViews with Ajax Postbacks

Question

I have been very unsuccessful in getting this to work!

In a view...

@model Project.Models.Account.ForgotPasswordModel

@{
    ViewBag.Title = "Forgot Password";
}

<h2>ForgotPassword</h2>

<span id='@ViewBag.ReplaceID'>
    @Html.Partial("_ForgotPasswordUserNameAjax", ViewData.Model)
</span>

I render this partialView...

@model Project.Models.Account.ForgotPasswordModel

@{
    this.Layout = null;
}

@using (Ajax.BeginForm("ForgotPassword", new AjaxOptions() { UpdateTargetId = ViewBag.ReplaceID, InsertionMode = InsertionMode.InsertAfter }))
{
    @Html.ValidationSummary(true, "Forgot Password was unsuccessful. Please correct the errors and try again.")
    <div id="login" class="box">
            <fieldset>
            <h2>Account Information</h2>
            <div class="inside">
                <div class="editor-label">
                    @Html.LabelFor(m => m.Username)
                </div>
                <div class="editor-field">
                    @Html.TextBoxFor(m => m.Username)
                    <br />
                    @Html.ValidationMessageFor(m => m.Username)
                    <br />
                </div>

                <p>
                    <input type="submit" value='Submit' />
                </p>
            </div>
        </fieldset>
    </div>   
}

And this controller action...

[HttpPost]
        public PartialViewResult ForgotPassword(ForgotPasswordModel model)
        {

            if (String.IsNullOrEmpty(model.Username))
            {
                ModelState.AddModelError("Username", ForgotPasswordStrings.USER_NAME_REQUIRED);
            }
            else
            {
                bool isGood = false;
                model.Question = this._security.ValidateUserNameGetSecurityQuestion(model.Username, out isGood);

                if (!isGood)
                {
                    ModelState.AddModelError("Username", ForgotPasswordStrings.USER_NAME_INVALID);
                }

            }
            PartialViewResult retVal = null;
            if (ModelState.IsValid)
            {

                retVal = PartialView("ForgotPasswordAnswerAjax", model);
            }
            else
            {
                retVal = PartialView("_ForgotPasswordUserNameAjax", model);
            }

            return retVal;

        }

Yet, every single time, the view only returns the PartialView, not contained in the layout.(So just my PartialView is on the screen. Nothing else.) I've tried a few things I've found online... http://www.compiledthoughts.com/2011/01/aspnet-mvc-razor-partial-views-with.html http://stackoverflow.com/questions/4655365/mvc3-submit-ajax-form

But nothing has fixed this issue. I've changed the InsertionMode to all values with no change. I've changed the @Html.Partial to a code block like @{ Html.RenderPartial("_ForgotPasswordUserNameAjax", ViewData.Model); }.

That doesn't work...

I'm running out of ideas (and patience)!

Please help!

Answer 1

EDIT PEBKAC.

I forgot when I upgraded the project, I added the new jquery.unobtrusive-ajax.js files, but never included them on the _Layout.cshtml page. Added that library in fixed the issue. Sorry guys!

Original Post I beginning to think this is a bug. Taking the unconverted project again (MVC2) and converting it to MVC3. I left all the original pages in the aspx/ascx format and ran the project. I tried the page. Same issue still occurs. Going back to MVC2, and it works fine. Tried MVC3 one more time, and the issue happens again.

I converted the project using a page very similar to this...

http://mattsieker.com/index.php/2010/11/21/converting-asp-net-mvc2-project-to-mvc3/