用于在 MVC 中绑定数据的控件

本文关键字：数据 控件 绑定 MVC 用于 | 更新日期: 2023-09-27 18:33:41

我对MVC Asp.net 很陌生。我有在Webforms上工作的经验，我广泛使用中继器和网格视图进行数据绑定，内联编辑，排序和分页。

但是，现在 MVC 它都不同了 ，我们不应该使用 ASP.net 服务器控件。因此，我开始在MVC中寻找网格视图的替代方案。但是，我面临着选择一个的困难。

一个选项是 Jqgrid ，但我对 JSON 知之甚少。另一个是 MVC 中的 Web 网格助手。

我

在这里的疑问是我是否能够在 Web 网格帮助程序中填充控件并能够进行内联编辑？

我非常担心 MVC 的这一部分，与网络相比，我收费 MVC 使生活变得更加困难，但我仍然想使用 MVC 因为其他事情，如干净的 html 输出和漂亮的 URL。

因此，请给出您的评估建议，说明哪些控制可以推荐上述要求。

用于在 MVC 中绑定数据的控件

在 MVC 中，您可以使用控制器将（视图）模型绑定到您的视图。在视图模型中，您可以定义显示视图所需的一切。我给你看一个小例子。

视图模型：

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

控制器中用于创建视图模型的操作。我使用 db.Customers 作为数据源：

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

包含表的视图，这是数据绑定部分。在 WebForms 中，您可以使用 Eval() 和 Bind() 等方法，在 MVC 中，您可以创建强类型视图。

@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>

现在，您可以使用大量jQuery GridViews插件之一来创建具有内联编辑等功能的网格。有关某些选项，请参阅此问题。

我相信

你以错误的方式思考MVC（从网络表单移动时很常见）

对于您的 GridView 示例，我们可以将其与 html 表进行比较。为了在MVC中创建html表，我们需要以下内容：

@* 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>

我们有点从网络表单切换到 mvc，我更喜欢这就是我们做网格的方式。会看起来像这样 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>
相关文章：