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.

PartialView と jqueryloadメソッドを使用して、サーバー側で保持し、グリッドをリロードすることをお勧めします。

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

DataAnnotations はモデルを検証しますが、それがグリッドではなくフォーム上にある場合。フォームでクライアント側の検証を有効にするには、次の appSettings を追加して 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>
于 2013-07-02T18:04:17.013 に答える