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

Question

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

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

类描述参数如下所示。

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>

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

出于这个原因，我使用DiscriptionParameters 脚本。看起来像这样。

$('.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 类。当您的 DescriptionParameters 包含多个项目时，您的剃须刀代码将使用此 css 类输入多个字段（只需检查页面的视图源即可看到它）。

jQuery val() 方法返回匹配元素集中第一个元素的值。这意味着，如果您的 DescriptionParameters 属性中有 3 个项目，那么您的剃须刀代码会创建 3 个表，并且您将拥有三个带有 css 类名称 EnterDescriptionInfoField 的输入。 $('.EnterDescriptionInfoField') 将为您提供与 jQuery 选择器匹配的 3 个输入的数组，val() 将返回数组中第一项的值！

您应该使用相对的 jQuery 选择器。您可以使用 jQuery closest 方法获取当前表格行，并使用 find 方法获取特定 css 类的输入。

这应该可行。

$(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
             }
     });

  });

});