11

I have this markup in an MVC app.

<div id="ingredientlistdiv">
    <% Recipe recipe = (Recipe)Model; %>
    <% Html.RenderPartial("IngredientsListControl", recipe.Ingredients); %>
</div>

<div id="ingrediententrydiv" align="left">
    <% using (Ajax.BeginForm("Add Ingredient", "Recipes/UpdateStep2", new AjaxOptions { UpdateTargetId = "ingredientlistdiv" }))
       { %>
    <p>
        <label for="Units">Units:</label><br />
        <%= Html.TextBox("Units", 0)%>
        <%= Html.ValidationMessage("Units", "*")%>
    </p>
    <p>
        <label for="Measure">Measure:</label><br />
        <%= Html.TextBox("Measure")%>
        <%= Html.ValidationMessage("Measure", "*")%>
    </p>
    <p>
        <label for="IngredientName">Ingredient Name:</label><br />
        <%= Html.TextBox("IngredientName")%>
        <%= Html.ValidationMessage("IngredientName", "*")%>
    </p>
    <p><a href="javascript:document.forms[0].submit()">Save Ingredient</a></p>
    <%= Html.Hidden("RecipeID", recipe.RecipeID.ToString())%>
    <% } %>
</div>

When this runs the IngredientsListControl.ascx displayas a new page in the browser and does not update the ingredientlistdiv.

This is my controller action

[AcceptVerbs(HttpVerbs.Post)]
        public ActionResult UpdateStep2(FormCollection form)
        {
            var factory = SessionFactoryCreator.Create();

            using (var session = factory.OpenSession())
            {
                Recipe recipe = GetRecipe(session, Convert.ToInt32(form["RecipeID"]));

                Ingredient ingredient = new Ingredient();

                ingredient.UpdateFromForm(form);
                ingredient.Validate(ViewData);

                if (ViewData.ModelState.Count == 0)
                {
                    recipe.Ingredients.Add(ingredient);
                    session.Save(recipe);
                    return PartialView("IngredientsListControl", recipe.Ingredients);
                }


                return Content("Error");
            }
        }

Am I doing the right thing on this line?

return PartialView("IngredientsListControl", recipe.Ingredients);

Is that how I render the control into the div so it does not load new page.???

Malcolm

2
  • We've always used the full, app-relative path for the partial name, e.g. Html.RenderPartial("~/Views/Home/ModuleNewUser.ascx") Commented Apr 18, 2009 at 6:16
  • Is it displaying the partial as a new page? Or some other page? What is the contents of your partial? Commented Apr 18, 2009 at 12:39

3 Answers 3

8

When you use this:

<a href="javascript:document.forms[0].submit()">

...you should be aware that it's not the same as

<input type="submit" />

It doesn't raise the onsubmit event, and MVC's AJAX eventhandler is not called.

To confirm this is the issue, add

<input type="submit" /> 

inside the form and try it out.

Finally, just call onsubmit() from your link

<a href="#" onclick="document.forms[0].onsubmit()">
Sign up to request clarification or add additional context in comments.

1 Comment

However, I strongly suggest you to use the standard submit button (<input type="submit" />, Html.SubmitButton MVC helper). You will run into lots of trouble if you submit forms with <a href...>/JS - it's very hard to make it work in ALL browsers. You can change the appearance of the submit button with css styles, and it works 100% in all scenarios.
2

Might be worth ensuring that you have correctly referenced the ajaxmvc and jquery scripts in your page (master page). If these are incorrect a new page will be displayed instead of the correct output in the target div.

1 Comment

Exactly what i wanted to say. Can't find other reasons just looking at it. :)
-2

RenderPartial takes an action name, not the name of the user control, so replace "IngredientsListControl" with "UpdateStep2", your action name.

1 Comment

Sorry, but I`m quite sure it does not. That is what RenderAction does which is included in MvcFutures.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.