CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-2dynamic-content
muek
muek

Reputation: 1080

Add dynamic form content in MVC

I'm trying to add dynamic content to my mvc application.

I'm using Steven Sanderson post Editing a variable length list, ASP.NET MVC 2-style, and thanks to it, I had some dynamic content into it. Due some constraints of my application, I had to make a change into base Gift class.

The problem is that now the application doens't work.

In my Model I have:

public class Gift
{
    //public string Name { get; set; }
    //public double Price { get; set; }

    public List<string> MyList { get; set; }
}

And now, I'm getting null values in gifts parameter

[HttpPost]
public ActionResult Index(IEnumerable<Gift> gifts)
{
    return View("Completed", gifts);
}

Can anyone help me on this?

EDIT: Here is my View code:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Enviro2011.Models.Gift>>" %>

<asp:Content ContentPlaceHolderID="HeadContent" runat="server">
    <link rel="Stylesheet" href="../../Content/styles.css" />
    <script type="text/javascript">
        $(document).ready(function () {

            $("#addItem").click(function () {
                $.ajax({
                    url: this.href,
                    cache: false,
                    success: function (html) { $("#editorRows").append(html); }
                });
                return false;
            });

            $("a.deleteRow").live("click", function () {
                $(this).parents("div.editorRow:first").remove();
                return false;
            });
        });
    </script>
</asp:Content>
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        Gift List</h2>
    What do you want for your birthday?
    <% using (Html.BeginForm())
       { %>
    <div id="editorRows">
        <% foreach (var item in Model)
               Html.RenderPartial("GiftEditorRow", item);
        %>
    </div>
    <%: Html.ActionLink("Add another...", "Add", null, new { id = "addItem" }) %>
    <input type="submit" value="Finished" />
    <% } %>
</asp:Content>

Edit2 I also have found out the post Model Binding To A List from Phil Haack, and works just fine, but I can't implement the feature 'Add Book' !!!

Upvotes: 4

Views: 3262

Answers (2)

Rap
Rap

Reputation: 7282

The problem is that you're looping through the model and not the items in the model.

Here's what you can do:

<% foreach (var item in Model.MyList)  // <-- Add the ".MyList"
       Html.RenderPartial("GiftEditorRow", item);
%>

We'll assume that your partial view receives only a string.

As far as your Ajax call not working, the problem there is that you're trying to submit twice, once using the actionLink and the other using Ajax. Change the ActionLink to an explicit link with no action behind it:

<a id="addItem">Add another ...</a>

Then your jQuery Ajax call will fire.

Upvotes: 4

swapneel
swapneel

Reputation: 3061

Do you have below action into your controllor

public ActionResult Add()
{
return View("GiftEditorRow", new MyList());
}

Upvotes: 0

Related Questions