@Html.EditorFor 向控制器发送了错误的值

Question

我为 ICollection 创建了 @Html.EditorFor 列表，如下所示。

 public virtual ICollection<DescriptionParameters> DescriptionParameters { get; set; }

Class说明参数如下所示。

public partial class DescriptionParameters
    {
        public int Id { get; set; }
        [Required (ErrorMessage = "Please enter description")]
        public string Description { get; set; }
        [Required(ErrorMessage = "Please enter description parameter")]
        public string DescriptionParameter { get; set; }
        public int Product_Id { get; set; }

        public virtual Product ProductSet { get; set; }
    }

我在 Html 表单中创建了 @Html.EditorFor(x => x.DescriptionParameters,new {Id="DescriptEditor" })。对于这个编辑器，我创建了 EditorForTemplate。

@model OnlineShop.Models.DescriptionParameters
<script src="~/Scripts/DiscriptionParameters.js" type="text/javascript"></script>
<table>
    <tr>  
        <td>
            @Html.TextBoxFor(x => x.Description, new { Id="DescriptionField",Class = "EnterDescriptionInfoField" })

        </td>
        <td>
            @Html.TextBoxFor(x => x.DescriptionParameter, new { Id = "DescriptionParamField", Class = "EnterDescriptionParameterInfoField" })

        </td>
        <td>
            <input class="AddDescription" type="button" value="+" 
                   style="width:20px;height:20px" />
        </td>
        <td>
            <input class="RemoveDescription" type="button" value="-"
                    style="width:20px;height:20px;text-align:center" />
        </td>
    </tr>

</table>
<table>
    <tr>
        <td>
            @Html.ValidationMessageFor(x => x.Description)
        </td>
        <td style="padding-left:10px">
            @Html.ValidationMessageFor(x => x.DescriptionParameter)
        </td>
    </tr>
</table>

我想为我的应用程序做下一个行为（见截图）：当按下第二个“-”按钮时，它应该删除列表中的第二个元素，而不是，它总是删除 [=17 中的第一个元素=] 列出尽管我的选择。

因此我使用 DiscriptionParameters script.Which 看起来像这样。

$('.RemoveDescription').click(function () {

    $.ajax({
        url: '/AddProductsDialog/RemoveDescriptionParameter',
        context: this,
        type: 'GET',
        data: $('#AddProdForm').serialize() + "&description="
            + $('.EnterDescriptionInfoField').val() + "&descriptionParametr="
            + $('.EnterDescriptionParameterInfoField').val(),
        success: function (product) {
            $('#ProgressShow').empty()
            $('#AddProdForm').replaceWith(product)
        }
    })
})

将数据发送到 RemoveDescriptionParameter 操作方法。

        [HttpGet]
        public ActionResult RemoveDescriptionParameter(Product product,string description,
            string descriptionParameter)
        {
            if(description=="")
            {
                description = null;
            }
            if (descriptionParametr == "")
            {
                description = null;
            }
            if (product.DescriptionParameters.Count > 1)
            {
                product.DescriptionParameters.Remove(
                    product.DescriptionParameters.FirstOrDefault(x=>x.Description==description 
                    && x.DescriptionParameter==descriptionParametr));
            }
            GoodsContainer1 goods = new GoodsContainer1();
            ViewData["Categories"] = goods.CategorySet;
            ViewData["SubCategories"] = goods.SubCategorySet;
            return PartialView("~/Views/AddProductsDialog/AddProducts.cshtml", product);
        }

在 description 的 RemoveDescriptionParameter 方法中和 descriptionParameter 参数，我获取列表中第一个元素的值，而不是选择的列表元素。

Answer 1

查看代码中的这一行。

"&description=" + $('.EnterDescriptionInfoField').val()

您的 jQuery 选择器是 css class。当你的DescriptionParameters 包含不止一项。

jQuery val() 方法 return 为您提供 匹配元素集合中第一个元素的值 。这意味着，如果您的 DescriptionParameters 属性中有 3 个项目，您的剃须刀代码会创建 3 table 并且您将有三个输入 css class name EnterDescriptionInfoField。 $('.EnterDescriptionInfoField') 将为您提供与 jQuery 选择器匹配的 3 个输入的数组，而 val() 将 return 数组中第一项的值！

您应该使用相对 jQuery 选择器。您可以使用 jQuery closest 方法获取当前 table 行并使用 find 方法获取具有特定 css class.[=19 的输入=]

这应该有效。

$(function(){

  $('.RemoveDescription').click(function() {

     $.ajax({
             url: '/AddProductsDialog/RemoveDescriptionParameter',
             context: this,
             type: 'GET',
             data: $('#AddProdForm').serialize() +
             "&description=" +
                            $(this).closest("tr").find('.EnterDescriptionInfoField').val() +
             "&descriptionParametr=" +
                    $(this).closest("tr").find('.EnterDescriptionParameterInfoField').val(),
             success: function(product) {
                //do something with the response
             }
     });

  });

});

@Html.EditorFor 向控制器发送了错误的值

@Html.EditorFor sends wrong value to the controller

c#

ajax

asp.net-mvc

jquery

editorformodel