locked
MVC GridView RRS feed

  • Question

  • User-1321637067 posted
    Is it possible to have an editable and "pageable" GridView using the MVCToolkit? I have thought about this and I'm not sure how to achieve paging and entering in edit mode. I have methods in the model that return a specific page but I'm not sure how to properly bind the data to the GridView, as the GridView normally has a datasource (like SqlDataSource) that can position the current index somewhere in the result set. But with MVC, I'm not sure how I can do this without writing my own code to display the page links. As for the editing part, how can I send the new data to the controller? So if anyone could help me with this I would really appreciate it.
    Thursday, February 7, 2008 3:25 PM

Answers

  • User-1469150719 posted
     Partial rendering is pretty easy...
    <form action="/cart/add" method="post" onsubmit="hijack(this); return false">
    <%= product.Name %>
    <input type="hidden" name="id" value='<%= product.Id %>' />
    <input type="submit" value="add to cart" />
    </form>

    <script type="text/javascript">

    function hijack(form)
    {
    var url = form.action + "/?partial";
    $ajax(url, {
    method: form.method,
    values: $(form).serialize(),
    dataType: "html",
    success: update_cart,
    failure: function(err) { alert(err); }
    });
    }

    function update_cart(new_html)
    {
    $("#cart").html(new_html);
    }

    </script>
     
    Then in your action, check for ?partial and render a user control directly, rather than the whole page.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, February 8, 2008 3:51 PM

All replies

  • User961349301 posted

    Take a look at the following posts about using Server Control with the MVC Framework: http://forums.asp.net/t/1216834.aspx

    Thursday, February 7, 2008 3:50 PM
  • User-1321637067 posted

    Take a look at the following posts about using Server Control with the MVC Framework: http://forums.asp.net/t/1216834.aspx

    So from what I understood controls that require postbacks do not work in MVC. So I'm guessing I should rethink my UI to use some helper controls or something like a repeater and simulate the editing (open up a form) and paging (have some next/previous buttons that allow retrieval of the next/previous batch).
    Thursday, February 7, 2008 4:11 PM
  • User-1469150719 posted

    Paging is easy, and I generally do querystring paging...

     /customers/list/?page=5&perPage=20

    The GridView (except for basic rendering) will not work with ASP.NET MVC because of their dependence on ViewState & PostBack.

    Editable grids are possible, but you have to do it manually.  This is arguably the same size of code as you would write with templated GridViews anyway, but I tend to not like editable grids.  I generally place an edit link on the row and utilize a redirect/popup/or ajax-style floating panel to allow me to edit the record in question.


     

    Thursday, February 7, 2008 4:21 PM
  • User-1321637067 posted

    Paging is easy, and I generally do querystring paging...

     /customers/list/?page=5&perPage=20

    The GridView (except for basic rendering) will not work with ASP.NET MVC because of their dependence on ViewState & PostBack.

    Editable grids are possible, but you have to do it manually.  This is arguably the same size of code as you would write with templated GridViews anyway, but I tend to not like editable grids.  I generally place an edit link on the row and utilize a redirect/popup/or ajax-style floating panel to allow me to edit the record in question.


     

    I have actually done the paging stuff on another page so that won't be a problem.

    Thanks for the idea with the floating panel though. I think that's a good solution for me because I wanted to have a nice rich UI and the ModalPopup AJAX control from the control toolkit should do the the job.

    Thursday, February 7, 2008 4:41 PM
  • User-1469150719 posted

     If you're talking about ASP.NET Ajax Control Toolkit, then I'm afraid you can't use it.  The client script library works, but the controls rely on ScriptManager, which requires a global form runat="server" tag.

     I've used a prototype/scriptaculous dialog and it works quite well.  It's here: http://snippets.dzone.com/posts/show/3411

     

     

    Thursday, February 7, 2008 4:57 PM
  • User-1321637067 posted

     If you're talking about ASP.NET Ajax Control Toolkit, then I'm afraid you can't use it.  The client script library works, but the controls rely on ScriptManager, which requires a global form runat="server" tag.

     I've used a prototype/scriptaculous dialog and it works quite well.  It's here: http://snippets.dzone.com/posts/show/3411

     

     

    One question about that dialog: how can you actually tell it what to do when you click OK?

    Friday, February 8, 2008 2:22 AM
  • User-1469150719 posted

    Since the dialog itself exists on the page (as a hidden div or user control, whatever)..  then you can call any javascript function that exists on the page.

    In the page that I used this dialog on, when the user clicks the okay button it calls a function and passes some values from the dialog.  The page handles the rest. 

    Friday, February 8, 2008 9:45 AM
  • User-1321637067 posted

    Since the dialog itself exists on the page (as a hidden div or user control, whatever)..  then you can call any javascript function that exists on the page.

    In the page that I used this dialog on, when the user clicks the okay button it calls a function and passes some values from the dialog.  The page handles the rest. 

    Thanks, I got it to work eventually. The bad news is I'll have to handle all the AJAX an UpdatePanel would do. But oh well, I guess you can't have it all :P
    Friday, February 8, 2008 3:23 PM
  • User-1469150719 posted
     Partial rendering is pretty easy...
    <form action="/cart/add" method="post" onsubmit="hijack(this); return false">
    <%= product.Name %>
    <input type="hidden" name="id" value='<%= product.Id %>' />
    <input type="submit" value="add to cart" />
    </form>

    <script type="text/javascript">

    function hijack(form)
    {
    var url = form.action + "/?partial";
    $ajax(url, {
    method: form.method,
    values: $(form).serialize(),
    dataType: "html",
    success: update_cart,
    failure: function(err) { alert(err); }
    });
    }

    function update_cart(new_html)
    {
    $("#cart").html(new_html);
    }

    </script>
     
    Then in your action, check for ?partial and render a user control directly, rather than the whole page.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, February 8, 2008 3:51 PM
  • User-1321637067 posted
    That's a great idea. Works like a charm! Thanks for helping me.
    Friday, February 8, 2008 5:35 PM