Question

我正在使用ASP.NET MVC开发一个项目并尝试使用jQuery UI Autocomplete小部件，以便用户可以从Exercise名称列表中进行选择，jQuery代码将根据练习自动设置ExerciseId值地选择。

我一直在使用this article中的方法，自动完成允许从练习名称列表中进行选择，但我似乎无法设置ExerciseId的值。

我视图中的HTML / Razor代码如下所示：

<tbody id="tablebody">
@for (int i = 0; i < Model.ExerciseRecords.Count; i++ )
{
    <tr>
        <td>
            @Html.TextBoxFor(m => m.ExerciseRecords[i].Exercise.ExerciseName, new { @class = "autocomplete form-control", id = "", data_url = @Url.Action("AutoComplete") })                
        </td>
        @Html.HiddenFor(m => m.ExerciseRecords[i].Exercise.ExerciseId, new { id = "ExerciseId_" + i, name = "ExerciseId", @class = "ExerciseId"})
        <td>
            @Html.TextBoxFor(m => m.ExerciseRecords[i].Reps, new { id = "", @class = "form-control", name = "Reps", value = 0 })
            <input type="hidden" name="ExerciseRecord.Index" value=@i />
        </td>
        <td>
            @Html.TextBoxFor(m => m.ExerciseRecords[i].Sets, new { id = "", @class = "form-control", name = "Sets", value = 0 })
        </td>
        <td>
            @Html.TextBoxFor(m => m.ExerciseRecords[i].Weight, new { id = "", @class = "form-control", name = "Weight", value = 0 })
        </td>
    </tr>

}

这将呈现以下HTML代码：

<tbody id="tablebody">
<tr>
    <td>
        <input class="autocomplete form-control" data-url="/Workout/AutoComplete" name="ExerciseRecords[0].Exercise.ExerciseName" type="text" value="" />
    </td>
    <input class="ExerciseId" data-val="true" data-val-number="The field ExerciseId must be a number." data-val-required="The ExerciseId field is required." id="ExerciseId_0" name="ExerciseRecords[0].Exercise.ExerciseId" type="hidden" value="" />
    <td>
        <input class="form-control" data-val="true" data-val-number="The field Reps must be a number." data-val-required="The Reps field is required." name="ExerciseRecords[0].Reps" type="text" value="0" />
        <input type="hidden" name="ExerciseRecord.Index" value=0 />
    </td>
    <td>
        <input class="form-control" data-val="true" data-val-number="The field Sets must be a number." data-val-required="The Sets field is required." name="ExerciseRecords[0].Sets" type="text" value="0" />
    </td>
    <td>
        <input class="form-control" data-val="true" data-val-number="The field Weight must be a number." data-val-required="The Weight field is required." name="ExerciseRecords[0].Weight" type="text" value="0" />
    </td>
</tr>

我看起来像jQuery代码：

var autoCompVals = {
    minLength: 0,
    source: function (request, response) {
        var url = $(this.element).data('url');

        $.getJSON(url, { term: request.term }, function (data) {
            response(data)
        })
    },


    select: function (event, ui) {            
        $(event.target).next().val(ui.item.id);   
    },
    change: function(event, ui) {
        if (!ui.item) {
            $(event.target).val('').next().val('');
        }
    }
};

$(".autocomplete").autocomplete(autoCompVals);

练习的JSON数据如下所示：

[{"id":1,"value":"Bench Press","label":"Bench Press"},{"id":2,"value":"Deadlift","label":"Deadlift"},{"id":3,"value":"Chin-up","label":"Chin-up"},{"id":4,"value":"Squat","label":"Squat"},{"id":5,"value":"Overhead Press","label":"Overhead Press"},{"id":7,"value":"Dumbbell Curl","label":"Dumbbell Curl"}]

我尝试过使用next（），next（'input [type = hidden]'），nextAll（'input [type = hidden'）但是它们似乎都没有改变ExerciseId的输入值。 / p>

当我尝试保存时，ModelState无效，并且每个值都是在我的表单上输入的值，但练习值为“”的ExerciseId除外。

任何人都可以提出任何关于我正在做错的建议吗？

Answer 1

我原来的回答：

.next()

这是因为var autoCompVals = { minLength: 0, source: function (request, response) { var url = $(this.element).data('url'); /* Simulate call */ response([{"id":1,"value":"Bench Press","label":"Bench Press"},{"id":2,"value":"Deadlift","label":"Deadlift"},{"id":3,"value":"Chin-up","label":"Chin-up"},{"id":4,"value":"Squat","label":"Squat"},{"id":5,"value":"Overhead Press","label":"Overhead Press"},{"id":7,"value":"Dumbbell Curl","label":"Dumbbell Curl"}]); return; $.getJSON(url, { term: request.term }, function (data) { response(data) }) }, select: function (event, ui) { $(event.target).next().val(ui.item.id); }, change: function(event, ui) { if (!ui.item) { $(event.target).val('').next().val(''); } } }; $(".autocomplete").autocomplete(autoCompVals);不会超越当前的嵌套级别。你必须回到td，然后得到下一个孩子（td＆＃39; s的父母，这是tr）。然而...

更好的答案：不要将输入元素直接放在tr元素中。它无效。这是一个示例，我使用自动完成功能将td中的隐藏元素移动到其中并将其更改为键入文本（将其更改为隐藏以隐藏它）：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<table>
<tbody id="tablebody">
<tr>
    <td>
        <input class="autocomplete form-control" data-url="/Workout/AutoComplete" name="ExerciseRecords[0].Exercise.ExerciseName" type="text" value="" />
        <input class="ExerciseId" data-val="true" data-val-number="The field ExerciseId must be a number." data-val-required="The ExerciseId field is required." id="ExerciseId_0" name="ExerciseRecords[0].Exercise.ExerciseId" type="text" value="" />      
    </td>

    <td>
        <input class="form-control" data-val="true" data-val-number="The field Reps must be a number." data-val-required="The Reps field is required." name="ExerciseRecords[0].Reps" type="text" value="0" />
        <input type="hidden" name="ExerciseRecord.Index" value=0 />
    </td>
    <td>
        <input class="form-control" data-val="true" data-val-number="The field Sets must be a number." data-val-required="The Sets field is required." name="ExerciseRecords[0].Sets" type="text" value="0" />
    </td>
    <td>
        <input class="form-control" data-val="true" data-val-number="The field Weight must be a number." data-val-required="The Weight field is required." name="ExerciseRecords[0].Weight" type="text" value="0" />
    </td>
</tr>
  </table>

＆＃13;

<tbody id="tablebody">
@for (int i = 0; i < Model.ExerciseRecords.Count; i++ )
{
    <tr>
        <td>
            @Html.Hidden("ExerciseRecord.Index",i)
            @Html.TextBoxFor(m => m.ExerciseRecords[i].Exercise.ExerciseName, new { @class = "autocomplete form-control", id = "", data_url = @Url.Action("AutoComplete") })  
            @Html.HiddenFor(m=>m.ExerciseRecords[i].Exercise.ExerciseId, new { id="ExerciseId_"+i, name="ExerciseId", @class="ExerciseId"})              
        </td>

        <td>
            @Html.TextBoxFor(m => m.ExerciseRecords[i].Reps, new { id = "", @class = "form-control", name = "Reps", value = 0 })
        </td>
        <td>
            @Html.TextBoxFor(m => m.ExerciseRecords[i].Sets, new { id = "", @class = "form-control", name = "Sets", value = 0 })
        </td>
        <td>
            @Html.TextBoxFor(m => m.ExerciseRecords[i].Weight, new { id = "", @class = "form-control", name = "Weight", value = 0 })
        </td>
    </tr>

}

＆＃13;

更正后的剃须刀视图：

/usr/lib/pcsc/drivers/ifd-acsccid.bundle/Contents/

我还将索引移到顶部，我相信它需要，并将其更改为Html.Hidden表单而不是原始html只是保持一致，因为您正在使用Html Helpers用于其他所有内容。

使用jQuery UI自动完成更改下一个输入元素值

1 个答案: