Question

I have a WebGrid on my Razor-based site and now I would like to have a Checkbox and a Textbox inside a Column, and when I click on the Checkbox after entering a Quantity, I would like it to submit the form, so I can add that item to the database (I’m not really keen on AJAX for this right now, unless it’ll be easier and better). But I just don’t know how I should go about this.

Should I wrap each combo of Checkbox and Textbox in its own form, so there will be a form for every column that has a Checkbox? Or should I wrap the whole WebGrid div inside just 1 form and then determine which ones were checked on submission? I’m really not sure where to even start here.

Any help will be much appreciated.

Answer 1

If you aren’t keen on ajax you can wrap that whole grid in a form then using the checked event on the checkbox grab the id of that checkbox so you know specifically which value to look at when the form post. You’ll have to tie each checkbox to it’s associated textbox via an identifier in the id, cause it will post all the values of the grid. Having multiple forms on a page is something you would do if the page were sectioned where each section performs specific functionality. In this case the grid is performing one piece of functionality across the entire grid.

In lieu of that, and ajax style approach is going to be the best bet. Using jquery it would be fairly each to attach a ajax.post to each element in the grid that you want to make a post for. much cleaner than trying to write all the extra code to figure out what checkbox was altered and what the data is that you want to look at from the post.

$.ajax({
            type: "POST",
            url: path,
            data: "id=" + checkboxId + "text=" + textboxdata+ ,
            success: function() {
                // if needed alert user data saved

            }
});