Question

我需要能够单击由foreach生成的按钮（如果需要，可以单击for循环）。

当生成按钮时，它应具有模型ID，以便在调用Ajax时，它将id发送到控制器调用。

我遇到了一个问题，当调用Ajax时，它只会具有列表中最后一个模型的值，因此会发生某种类型的覆盖。

控制器Ajax [这还没有完成，我打算做一个回调，但是现在我只是试图让方法工作的帖子]

public void AjaxTest(TestStepDisplayModel testStepDisplayModel)
{

}

部分视图

@model AsyncDemo.Models.TestStepDisplayModels


<h3>Main Test Steps</h3>
<table class="table">
    <tr>
        <th width="20" class="gray">
            Step #
        </th>
        <th width="180" class="gray">
            Test Step
        </th>
        <th width="50" class="gray">
            Timeout
        </th>
        <th width="50" class="gray">
            Actions
        </th>
    </tr>

        @foreach (var testStep in Model.TestStepDisplayModelContainer)
        {
            @Html.EditorFor(m => testStep)
        }
</table>

EditorTemplate

@model AsyncDemo.Models.TestStepDisplayModel


<tr>
    <td>
        <b>@Model.StepSequenceNumber</b>
    </td>
    <td>
        <b>@Model.TestStepName</b>
    </td>
    <td>
        <b>@Model.TimeOut</b>
    </td>
    <td>
        <div align="left">
            <button class="EditSuiteName" id="ajaxGet">Edit Test Suite Name</button>
        </div>
    </td>
</tr>

<script type="text/javascript">
    $(function () {
        $(document).off('click', '#ajaxGet').on('click', '#ajaxGet', function () {
            event.stopImmediatePropagation();

            var model = {
                TestStepId: '@Model.TestStepId'
            }

            $.ajax({
                type: 'POST',
                url: '/Home/AjaxTest',
                data: JSON.stringify(model),
                contentType: 'application/json; charset=utf-8',
                dataType: "json"
            });
        });
    });

</script>

TestStepDisplayModel

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace AsyncDemo.Models
{
    public class TestStepDisplayModel
    {
        public int TestStepId { get; set; }
        public string TestStepName { get; set; }
        public int StepSequenceNumber { get; set; }
        public TimeSpan? TimeOut { get; set; }

    }
}

TestStepDisplayModels（只是一个包含模型列表的模型）

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace AsyncDemo.Models
{
    public class TestStepDisplayModels
    {

        public List<TestStepDisplayModel> TestStepDisplayModelContainer { get; set; }
    }
}

我想要做的是让Ajax可以简单地检索在创建过程中可以存储在按钮内的数据（如同创建按钮一样，循环中显示的模型ID存储在按钮）这样当单击时，Ajax可以检索控制器的id。

我也觉得实际的脚本不在代码的正确部分，我觉得把它放在EditorTemplate中是完全错误的，但我是Ajax的新手，所以我不太确定。

Answer 1

首先，您不应将硬编码的静态Id值保留在循环中。 Id的元素应该是唯一的。

而不是Id，在连接click事件时使用css类进行jQuery选择。您也可以将项目ID保存在html 5数据attrbute

中

 <button class="EditSuiteName ajaxLink" data-id="@Model.Id" >Edit Test Suite</button>

现在您不需要在编辑器模板中放置用于按钮单击事件处理的jQuery代码。由于您将它放在编辑器模板中，因此该代码将被执行多次（与集合中的项目一样多次。这就是您必须调用off方法的原因！此外，您的代码正在获取最后一项的ID！

将此代码放在主视图中。所以这些事件只会连线一次！

$(function () {
    $(document).('click', '.ajaxLink', function (e) {
        e.preventDefault();
        var model = {
            TestStepId: $(this).data("id");
        }

        $.ajax({
            type: 'POST',
            url: '/Home/AjaxTest',
            data: JSON.stringify(model),
            contentType: 'application/json; charset=utf-8',
            dataType: "json"
        }).done(function(result){
           alert("ajax code success");
           // do something with result  
        }).fail(function() {
               alert( "error" );
        });
    });
});

Ajax：从foreach循环迭代的列表中将模型ID发送到控制器

1 个答案: