Question

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

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

我需要帮助，

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;
        }       
    }

的index.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>

Answer 1

我会尝试回答：

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

我建议您在服务器端保留它并使用带有jquery load方法的PartialView重新加载网格。

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

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

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

如何使用客户端模型将新行绑定到ASP.NET MVC 4 WebGrid并在客户端启用WebGrid的Validations（DataAnnotations）

1 个答案: