从 json 构建表单

发布于 2024-11-06 19:14:42 字数 263 浏览 0 评论 0原文

我使用 jquery+json 从控制器中获取视图模型数组。然后，我构建一个表单，其中表中的每一行代表一个视图模型。

我的问题是：我应该如何命名每个表单元素，以便我可以将其获取到我的控制器操作，如下所示：

public ActionResult Update(MyViewModel[] models)
{
}

编辑：我正在使用 jquery-tmpl 来生成表单，并且我还试图弄清楚如何获取其中的索引变量（如果表单生成需要）。

原文

I'm fetching an array of viewmodels from my controller using jquery+json. I then build a form where each row in a table represents one viewmodel.

My question is: How should I name each form element so that I can get it to my controller action like this:

public ActionResult Update(MyViewModel[] models)
{
}

Edit: I'm using jquery-tmpl to generate the form, and I'm also trying to figure out how to get an index variable in it (if that's needed for the form generation).

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

执手闯天涯 2024-11-13 19:14:42

我设法让它工作。

我的 jquery 模板：

<script id="wagonTemplate" type="text/x-jquery-tmpl">
    <tr>
        <td>
            <input type="checkbox" value="true" class="wagoncheck" name="wagons[${$item.getIndex()}].IsSelected" />
        </td>
        <td>
            <input type="text" name="wagons[${$item.getIndex()}].WagonId" value="${WagonId}" style="width:120px" />
        </td> 
        <td>
            <input type="text" name="wagons[${$item.getIndex()}].WagonNumber" value="${WagonNumber}" style="width:20px" />
        </td> 
</script>

加载模板的方法：

function loadWagons(trainId, partId) {
    $.getJSON('/train/wagons/' + escape(trainId) + '?partNo=' + partId, function (data) {
        $wagons = $('#wagons tbody');
        $wagons.empty();

        // the function used in the template to get an index.
        var tmplOptions = {
            getIndex: function getIndex() {
                return $.inArray(this.data, data);
            }
        };
        $("#wagonTemplate").tmpl(data, tmplOptions).appendTo($wagons);
    });
}

换句话说：

要在控制器操作中获取 YourModel[] items 参数，您需要将项目命名为 items[0].MyProperty'其中0`应该对应于数组中的索引。

要获取 jquery 模板中的索引，只需使用将选项中的方法传递给模板函数即可。我正在使用找到的答案的稍微修改版本在这里。没有必要按照该答案中完成的方式传递项目，因为 this 指向当前项目。

I managed to get it working.

My jquery template:

<script id="wagonTemplate" type="text/x-jquery-tmpl">
    <tr>
        <td>
            <input type="checkbox" value="true" class="wagoncheck" name="wagons[${$item.getIndex()}].IsSelected" />
        </td>
        <td>
            <input type="text" name="wagons[${$item.getIndex()}].WagonId" value="${WagonId}" style="width:120px" />
        </td> 
        <td>
            <input type="text" name="wagons[${$item.getIndex()}].WagonNumber" value="${WagonNumber}" style="width:20px" />
        </td> 
</script>

Method that loads the template:

function loadWagons(trainId, partId) {
    $.getJSON('/train/wagons/' + escape(trainId) + '?partNo=' + partId, function (data) {
        $wagons = $('#wagons tbody');
        $wagons.empty();

        // the function used in the template to get an index.
        var tmplOptions = {
            getIndex: function getIndex() {
                return $.inArray(this.data, data);
            }
        };
        $("#wagonTemplate").tmpl(data, tmplOptions).appendTo($wagons);
    });
}

In other words:

To get a YourModel[] items argument in your controller action you need to name the items as items[0].MyProperty' where0` should correspond to the index in the array.

To get an index in a jquery template, just use pass a method in the options to the template function. I'm using a slightly modified version of the answer found here. Passing the item as done in that answer is not necessary as this points on the current item.

回复收藏 0 原文

~没有更多了~