4

我正在使用 ASP.NET WebGrid 来显示对象集合并允许将新对象添加到集合中。

在使用 Webgrid 的视图中，我有一个添加按钮，使用该按钮我可以根据模板动态添加新行并附加到网格中。

我需要帮助，

1）如何在客户端将新行与WebGrid模型绑定。2) 如何使用模型上定义的 DataAnnotations 验证在 WebGrid 上启用验证。

以下是代码，

public class TestObject
    {
        public virtual int Id
        {
            get;
            set;
        }

        [Required(ErrorMessageResourceName = "Required")]
        [Display( Name = "Codee")]
        public virtual string Code
        {
            get;
            set;
        }

        [Required(ErrorMessageResourceName = "Required")]
        [Display( Name = "Description")]
        public virtual string Description
        {
            get;
            set;
        }       
    }

索引.html

@using (Html.BeginForm("Index", "Test", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.ValidationSummary()

    <div class="body-container">
    <table class="form-grid">
        <tr>
            <td>
                <input type="button"  onclick="AddRow(); return false;">
            </td>
        </tr>
    </table>
    <table class="form-grid">
        <tr>
            <td>
                <div id="partialregion">
                    @Html.Partial("_ListView", Model)
                </div>
            </td>
        </tr>
    </table>
    <table id="newTemplate" style="display: none;">
        <tr class="item">
            <td>
                <input type="hidden" id="cId" /></td>
            <td>
                <input type="text" id="code" />
            </td>
            <td>
                <input type="text" id="description" />
            </td>
        </tr>
    </table>
</div>

_ListView.HTML

@model IEnumerable<TestObject>
<div id="testGrid">
    @{

        var grid = new WebGrid(null, ajaxUpdateContainerId: "testGrid" , canSort: false);
        grid.Bind(Model);

        @MvcHtmlString.Create(
        @grid.GetHtml(
        tableStyle: "grid-table",
          columns: grid.Columns(
                    grid.Column("",header:"",format : @<input id="hiddenId" type="hidden" value="@item.Id" />),
                    grid.Column("Code", header: "Code", format: @<input type="text" id="mCode" value="@item.Code" />),        
                    grid.Column("Description", header: "Description", format: @<input type="text" id="mDesc" value="@item.Description" />)
        )).ToString())
    }
</div>
4

1 回答 1

0

我会尝试回答：

1) How to bind the new rows with the WebGrid Model on the Client side.

我建议您将其保留在服务器端并重新加载您的网格，使用带有 jqueryload方法的 PartialView。

2) How to enable validations on the WebGrid with DataAnnotations validations defined on the Model.

DataAnnotations 验证您的模型，但当它在表单上时，而不是在网格中。要在表单上启用客户端验证，您必须更改 yoru web.config 文件添加这些 appSettings：

<appSettings>
    <!-- others -->

    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />

</appSettings>

还要记住在您的布局（或视图）中包含 jquery 验证和不显眼的 javascript 文件：

<script src='@Url.Content("~/scripts/jquery-1.7.1.js")'></script>
<script src='@Url.Content("~/scripts/jquery.validate.js")'></script>
<script src='@Url.Content("~/scripts/jquery.validate.unobtrusive.js")'></script>
于 2013-07-02T18:04:17.013 回答