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!

DavidAndroidDev · Accepted Answer · 2011-02-04T14:45:13.520

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/

score 1 · Answer 2 · answered Feb 03 '11 at 21:09

Since you are returning only a partial view, that is all that gets processed. This functionality is more strictly adhered to in MVC3 because of the way that Razor views are processed.

Simply change your controller action to the following:

[HttpPost]
        public ActionResult 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 = View("ForgotPasswordAnswerAjax", model);
            }
            else
            {
                retVal = PartialView("_ForgotPasswordUserNameAjax", model);
            }

            return retVal;

        }

While this netted me more formatting, I'm completely missing everything from the parent view of the partial view. Granted, it's not much, but if there are other pages with more content, I'm forced to put it in the partial view?? What use is the partial view then? — DavidAndroidDev, Feb 03 '11 at 21:28

score 0 · Answer 3 · answered Feb 03 '11 at 16:28

0

I think the "main" view is also called ForgotPassword, just as the partial views.

Since the controller returns only a PartialViewResult, no layout is used.

Create a different action for the parent view and the ajax calls.

answered Feb 03 '11 at 16:28

GvS

52,015
16
101
139

Well, I'm converting this project from an MVC2 application to MVC3 in addition to changing the views over to Razor. These worked perfectly fine before switching to MVC3. I was expecting to not have to change the controller code (except for the new naming of the views with underscores). :( – DavidAndroidDev Feb 03 '11 at 16:35

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

3 Answers3

Linked