Model with List - approaches to add new item to th

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.

Answer 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.

Answer 2

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.

Answer 3

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