CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-3
itsmatt
itsmatt

Reputation: 31416

Adding to or deleting from a displayed list and redisplaying list in a particular div

For my first ASP.NET MVC 3 application I have a div on a partial view that displays a list of proposed names for a particular ice cream. I'm using, as my first crack at this, something like this to display the proposed names:

@model ViewModels.IceCream.{ProposedNamesViewModel
<table>
  <tr>
    <th></th>
    <th>Proposed Names</th>
  </tr>
  @foreach (var item in Model.ProposedNames)
  {
    <tr>
      <td>
         @Html.ActionLink("Delete", "Delete", new { id=item.Id })
      </td>
      <td>
         @item.ProposedName
      </td>
    </tr>
  }
</table>

and this works fine enough for displaying those names. These proposed names are but but one of a number of pieces of information about the selected ice cream and what I'd like to accomplish is to allow the user to add or delete a name and then have as a result of one of those actions have the updated viewmodel's data re-displayed in that div (i.e., leaving everything else as it is on the page and just replacing that div's contents with the new contents.

I can write the controller's delete action just fine and it will update the underlying DB but then I'm not sure how to return this PartialView back to the particular div with my updated viewmodel. I hope that makes sense.

This (likely web developer 101) concept is one that I haven't grokked yet and I'm hoping someone can show me how to do this.

Update

I'm looking at using jquery to solve this. Stephan Prodan (I believe that's his name) has an example here where he updates a list of notes using jquery.

Upvotes: 1

Views: 80

Answers (2)

yoozer8
yoozer8

Reputation: 7489

JQuery is definitely a good direction to go with this. The only modification I would suggest to your table for a jQuery solution would be to add an index to each < tr > tag (unique for each row, preferably one based off the item displayed in the row). Then the rest is javascript. Bind a click event to the delete option, and on the delete, one jQuery line will do your job:

$("#" + rowID).remove()

As far as adding new rows, simply generate a string representing it:

var newrow = "<tr id='newrowID'><td>Delete</td><td>proposedname</td></tr>

And (now I realize you might want to add an id to your < table > as well if you have more than one on your page) then add it to the table with

$("#" + tableID).append(newrow)

or

$('table').first().append(newrow)

if it's your first table on your page and you don't want to give it an id.

Lastly, you would need an AJAX call to get the information for the new item (or to send it to the backend if you create it on the page).

EDIT:
Suggested AJAX call:

//disable input here
$.ajax({
    url: "myurl/delete/" + idemID,
    success: function(response){
                       if(successful){ //determine this based on response
                                $("#" + rowID).remove()
                                //re-enable input
                        }
    error: function(err){ alert("Something went wrong"); /*re-enable input*/}
})

The disabling of the input prevents the user from providing multiple sucessive calls to the db that might conflict with each other or otherwise cause problems.

Upvotes: 1

David Fox
David Fox

Reputation: 10753

You could use MVC's Ajax helpers, but I feel they're a bit clunky at times. It also seems like they're designed for forms versus your table implementation. If you can use something javascripty like jQuery, you can give yourself a lot more flexibility albeit a bit more code. I'll show you what I consider the Microsoft way below. Maybe I'll try to modify it to use jQuery to illustrate the differences.

Ajax helpers

If you're using MVC 3, be sure to have jQuery and jquery.unobtrusive-ajax referenced for the following example, as that's most likely configured in web.config

Here is the primary view

<div id="myTableContainer">
@{Html.RenderPartial("GetTable", new List<string>() { "1", "2", "3" });}
</div>

And my strongly typed (List<string>) partial view. Yours would be typed to your view model

<table>
    @foreach (var item in Model) { 
        <tr>
        <td>@item</td>
        <td>@Ajax.ActionLink("Delete", "GetTable", new { id = item }, 
                new AjaxOptions { UpdateTargetId = "myTableContainer" })</td>
        </tr>
    }
</table>

And, finally, the controller action that returns the partial view

public ActionResult GetTable(string id)
{
    // you would obviously create your list of your ice cream objects here
    // get them from a service/repository and build a view model
    List<string> list = new List<string>() { "1", "2", "3" };

    if (!string.IsNullOrEmpty(id))
        list.Remove(id);

    return View("GetTable", list);
}

This is a crude demonstration, but it should give an idea of how the Ajax helpers work to re-render views.

Upvotes: 1

Related Questions