Best way to do ListView in ASP.NET MVC?

Question

bascially, how should i do it now that using the asp:listview control is out of the question?

i am migrating from webforms to mvc and former implementation was in <asp:ListView...> so how should i do it now in terms of best user experience for the user? ie: i will need to ajax everything.

thanks

Answer 1

You should use the standard list box now. If you need to return the list from your controller you return a SelectList [i think that's it].

To ajax the select list you can use say jQuery to add click and change events which will then call actionresults in your controller.

Edit

Ah right, there are a couple of ways. You could use a jQuery grid which will display the rows and allow you to have edit delet buttons. You then post back to an action, make the changes and come back. All Ajax of course.

The other way might be to write a couple of PartialViews. The first loops through your collection and the second displays the row. The last one would have say the buttons or a check box or whatever.

Then you again post back, via ajax, to an action result, make the changes and come back.

Your action result can return a fully rendered partial view so after you make your changes, return a new partial view of your data rows and replace the old with the new.

edit 2 if you want code, leave a comment and i'll provide

edit 3

There are a bunch of jQuery grids out there, just google it.

As for partial views something like this would work;

HTML Partial View 1 called BenefitList;

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IQueryable<Models.Benefit>>" %>

<% foreach(Benefit benefit in Model){ %>
    <% Html.RenderPartial("Benefit", benefit); %>
<% } %>

HTML Partial View 2;

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Models.Benefit>" %>

<fieldset class="Benefit benefit" id="<%= Model.Id %>">
    <legend><label class="Title"><%= Html.Encode(Model.Title) %></label> <a class="BenefitDescriptionView" href=".">View</a><a class="BenefitDescriptionEdit" href=".">Edit</a></legend>
    <div class="BenefitDescription hidden">
        <%= Html.Encode(Model.Description) %>
    </div>
</fieldset>

Some jQuery for you to do a post to an action result;

 function jQueryDeleteBenefit() {
     $.post("/Home/jQueryDeleteBenefit", { Id: YOURID },
        function(NEWHTML) {
            $('.EditProductContainer').html(NEWHTML);
        });
 }

An action result;

    [AcceptVerbs(HttpVerbs.Post)]
    public void jQueryDeleteBenefit(int id
    {
      //delete item

      return PartialView("BenefitList", AllMyBenefits);
    }