Which Control to use for binding data in MVC?

Question

I am very new to Asp.net MVC . I have experience working on Webforms where i extensively use repeaters and grid views for my data bindings , inline editings ,sorting and paging.

But, now with MVC its all different , we are not supposed to use ASP.net server controls.So, i started looking for alternatives for grid view in MVC. But, i was facing difficulty in choosing one.

The one option is Jqgrid , but i dont have much knowledge on JSON.The other is Web grid helper in MVC.

my doubt here is will i able to populate controls in web grid helper and able to do inline editing?

I am very much worried about this part of MVC and i fee MVC is making life more difficult compared to web froms but still i want to go with MVC beacause of other things like Clean html output and beautiful URL's.

So please give your Valuble sugesstions on which controls can be preferrable for the above said requirements.

score 2 · Answer 1 · answered Oct 03 '13 at 14:36

I believe you are thinking about MVC in the wrong way (it's common when moving from webforms)

For your GridView example we can compare that to a html table. In order to create an html table in MVC we would need the following:

@* This tells the page what object you are supplying as the data for the page *@
@model IEnumerable<MyWebsite.TableDataViewModel>

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
        </tr>
    </thead>
    <tbody>
        @* Here we are looping through each item in the 
           Model (defined above) and putting each property 
           in a cell of the table *@
        @foreach(var row in Model)
        {
        <tr>
            <td>@item.Property1</td>
            <td>@item.Property2</td>
            <td>@item.Property3</td>
            <td>@item.Property4</td>
        </tr>
        }
    </tbody>
</table>

score 2 · Accepted Answer · edited May 23 '17 at 12:24

In MVC you use the Controller to bind a (View)Model to your View. In the ViewModel you define everything you need to display the View. I'll show you a small example.

The ViewModel:

public class CustomerModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string EmailAddress { get; set; }
}

The action in the controller which creates the ViewModel. I used db.Customers as the source of the data:

public ActionResult List()
{
    var customerModel = db.Customers.Select(c => new CustomerModel
                                                     {
                                                        Id = c.Id,
                                                        Name = c.Name,
                                                        EmailAddress = c.EmailAddress
                                                     }).ToList();
    return View(customerModel);
}

The View containing the table, this is the data-binding part. In WebForms you use methods like Eval() and Bind() here, in MVC you create strongly-typed view.

@model IEnumerable<CustomerModel>

<table>
    <tr>
        <th>@Html.DisplayNameFor(m => m.Id)</th>
        <th>@Html.DisplayNameFor(m => m.Name)</th>
        <th>@Html.DisplayNameFor(m => m.EmailAddress)</th>
    </tr>
    @foreach (CustomerModel customer in Model)
    {
        <tr>
            <td>@Html.DisplayFor(m => m.Id)</td>
            <td>@Html.DisplayFor(m => m.Name)</td>
            <td>@Html.DisplayFor(m => m.EmailAddress)</td>
        </tr>
    }
</table>

Now you can use one of the plenty jQuery GridViews plugins available to create a grid with in-line editing etc. See this question for some options.

score 1 · Answer 3 · answered Oct 03 '13 at 14:29

1

We kind of switch back from webforms to mvc which i like better this is how we do a grid.Will look like this https://datatables.net

<script type="text/javascript" charset="utf-8">
            $(document).ready(function () {
                $('#example').dataTable();
            });
</script>

    <table id="example" border="1">
     <thead>
            <tr>
                <th>Bill Number</th>
                <th>LR Number</th>          
                <th>Previous Year</th>
                  <th>Committee Rec</th>
                <th>Committee</th>
                <th>Save</th>
            </tr>
        </thead>
        <tbody>
    @for (int i = 0; i < Model.billVersion.Count; i++)
    {<tr>
        <td>@Html.DisplayFor(model => model.billVersion[i].billNumber)</td>
        <td>@Html.DisplayFor(model => model.billVersion[i].lrNumber)</td>
        <td>@Html.DisplayFor(model => model.billVersion[i].previousYear)</td>
        <td>@Html.DisplayFor(model => model.billVersion[i].committeeRec)</td>
        <td>@Html.CheckBoxFor(model => model.billVersion[i].save_Remove)</td>
    </tr>                
    }
    </tbody>

answered Oct 03 '13 at 14:29

Ryan Schlueter

2,223
2
13
19

Did you see the link? Sorting it does really well, Not positive what paging is. if you go to the datatable page https://datatables.net/examples/ i was using it talks about inline edit and a bunch of different things you might want to do. – Ryan Schlueter Oct 03 '13 at 14:42
But, is it a open source plugin? – Sai Avinash Oct 03 '13 at 14:46
That's literally _one_ click away: _"Q. DataTables is great! How much is it? - A. DataTables is free, open source software that you can download and use for whatever purpose you wish, on any and as many sites you want"_. – CodeCaster Oct 03 '13 at 14:47
Yea and the good thing about mvc is you know once you have the setup from one of the answers. You can look through multiple libraries to find the best one for your needs instead of having to make the asp.net gridview do things it was not ment for. – Ryan Schlueter Oct 03 '13 at 14:57

Which Control to use for binding data in MVC?

3 Answers3