Model with List - approaches to add new item to the list from a Razor view

Question

I have a model with various properties but the one of interest is a List of another type of Model.

For example:

   public class User
    {
        public string Name { get; set; }
        public string Description { get; set; }

        public IEnumerable<UserInterest> Interests { get; set; }
    }

I then use an Editor Template within my view to render out a view for each item of the model items.

@Html.EditorFor(x => x.Interests)

The EditorFor template looks something like:

@model Interest

<div>
    @Html.HiddenFor(x => x.Id)
    @Html.TextBoxFor(x => x.InterestText)
    @Html.CheckBoxFor(x => x.Delete)
   ....
</div>

Something very similar to the accepted answer here: Model Containing List of Models (MVC-3, Razor)

My question is - how would you from the client-side (jQuery) create a new item within the property without going back to the server. I currently have a rough way of doing it whereby I post the data back to my controller which returns the model back with a new blank item within the Interests property.

This seems to be overkill making a HTTP request and not very elegent. I was thinking of using jQuery .Clone() but not entirely sure on what I'd need to do in terms of naming the elements and clearing existing values.

So does anybody have any suggestions. I'm hoping to get more opinions and different approaches.

Shyju · Answer 1 · 2012-09-17T20:21:59.973

You can simply create the Textbox and checkbox on the fly and add that to the DOM. When saving it, Use jQuery ajax to post that data ( new record data) to an action method and save it there. Return a status back (Succcess /Falied) from your action method to your client side code ( your callback function of jQuery ajax/post) and check it there. If it is success, Show a success message to the user and append the new item to the existing list.

Sample jSFiddle : http://jsfiddle.net/carwB/2/

If you want to return some complex data ( ex : All new records with its id etc..) along with the status, you may return JSON from your action method.

EDIT : To keep your Model binding works with the newly added dynamic elements, you need to follow the naming convention of the elements.

The trick is to keep the id property value of the html element in this format. CollectionName_ItemIndex__PropertyName

and name property value in this format

CollectionName[ItemIndex].PropertyName

I created a sample working program and explained it how it works Here based on your requirements.

The problem with this approach is that the default model binder doesn't pick up the new posted elements? I assume because of the duplicate IDs? — Dave Hogan, Sep 17 '12 at 14:00
if you keep the name property model binder may pick it (not sure) — Shyju, Sep 17 '12 at 14:06
+1 - Thanks @Shyju - I've accepted webdeveloper's answer but yours has also been very helpful — Dave Hogan, Sep 17 '12 at 14:26

score 1 · Accepted Answer · answered Sep 17 '12 at 13:45

1

In such situations I prefer to use client templating. You send data to server with ajax and then receive JsonResult. Look at JsRender this is javascript lib without jQuery dependency.

answered Sep 17 '12 at 13:45

webdeveloper

17,174
3
48
47

Thanks - I've not considered using templating since jquery-tmpl was dropped. – Dave Hogan Sep 17 '12 at 14:01
@DaveHogan There are a large number of other libraries, I think that it is a crime to use PartialView, too much extra traffic used in the preparation of lists. Although, if project is small you can add data manually. – webdeveloper Sep 17 '12 at 14:12

score 1 · Answer 3 · edited Jun 06 '13 at 08:46

1.Create two partial view one is for list item and second one is creation

2.First partail view should be inside the div which has id 'divMdeolList'

3.and Creation view will have the code like that

@using (Ajax.BeginForm("SubmitData", new AjaxOptions { UpdateTargetId = "divMdeolList" }))
{
 @Html.TextBoxFor(x => x.InterestText)
  <p>
            <input type="submit" value="Create" />
  </p>
}

4. And then create a ActionResult type action on controller that will render the partialview

public ActionResult SubmitData(YourModel model)
{  
  //Do : save the record 
  return PartialView("FirstPartailView", model);
}

This will update the View without postback

Model with List - approaches to add new item to the list from a Razor view

3 Answers3

Linked