Question

我在模式弹出窗口中有一个表单，用户可以在文本框中输入文本，然后单击加号按钮，动态地将他们输入的文本添加到div中，这样他们就可以继续添加另一个。

 <div class="form-group">
    <label class="control-label col-sm-4" for="prefix">
       Cast <span style="color:red">*</span>
    </label>
    <div class="col-sm-5">
      <input type="text" class="form-control col-sm-5" id="Cast" />
    </div>
    <div class="col-sm-1">
      <button type="button" id="btnNewCast" class="btn btn-default">+</button>
    </div>
</div>
<div class="form-group">
  <label class="control-label col-sm-4" for="prefix"></label>
   <div class="col-sm-6" id="newCast">

   </div>
</div>

如下所示：

enter image description here

NewCast是我通过jquery显示输入值的地方。

当他们点击btnNewCast时，会调用以下脚本

  $("#btnNewCast").click(function () {
            $("#newCast").append("<span class='label label-success label-as-badge custom-line-height' id='cast[]'><i class='glyphicon glyphicon-tag'></i> "+ $("#Cast").val() + "</span><br/>");

            $("#Cast").val('');
        });

看起来像这样：

enter image description here

HTML如下：

<span id="cast[]" class="label label-success label-as-badge custom-line-height">
<i class="glyphicon glyphicon-tag"></i>
     They Appear Here    
</span>

当他们按下表单上的提交时，我将值传回，如下所示：

 $("#btnAddMovie").click(function() {

                $.ajax({
                    url: '/Movies/Add',
                    //data: $('NewMovie').serialize(),
                    data: { "Title": $("#Title").val(), "Classification": $("#Classification").val(), "Rating": $("#Rating").val(), "ReleaseDate": $("#ReleaseDate").val(), "Cast": $("#Cast").val() },
                    cache: false,
                    type: "POST",
                    success: function (result) {
                        if (result.success) {

                        }
                    },
                    error: function (result) {
                        alert("Error");
                    }
                });
        });

哪个映射到我的模型，并且工作正常。

控制器：

    [HttpPost]
    public ActionResult Add(Movie model)
    {


        return View();
    }

我的模型声明如下：

public int MovieId { get; set; }
public int Rating { get; set; }
public int ReleaseDate { get; set; }
public string Title { get; set; }
public string Classification { get; set; }
public string Genre { get; set; }
public string[] Cast { get; set; }

我遇到的问题是你可以看到Cast是一个字符串数组，用户输入的项目（显示在图片中）我试图将它们全部映射到Cast字符串数组时发布。

我试过了

"Cast": $("#cast[]").val()

但是在发布无法识别的表达式时出现了jquery错误

我无法正确映射..

**更新**完整的帖子方法

$("#btnAddMovie").click(function () {

            var stringArr = $('span[data-id="cast[]"]').map(function() {
                return $(this).text().trim();
            });

            $.ajax({
                url: '/Movies/Add',
                //data: $('NewMovie').serialize(),
                data: { "Title": $("#Title").val(), "Classification": $("#Classification").val(), "Rating": $("#Rating").val(), "ReleaseDate": $("#ReleaseDate").val(), "Cast": stringArr },
                cache: false,
                type: "POST",
                success: function (result) {
                    if (result.success) {

                    }
                },
                error: function (result) {
                    alert("Error");
                }
            });


        });

Answer 1

几个问题：

<span>没有.val() (value)，请使用text()。
错误

无法识别的表达

是因为：[] - 普通#..选择器中不允许使用特殊字符。使用[id=""]
因此请使用map()重复此操作。

var stringArr = $('span[id="cast[]"').map(function(){
    return $(this).text().trim();
});

此外，通过jQuery创建span的方式，ID = cast[]正在重复，重复的ID是无效的标记。使用类属性或data-*属性，例如data-id="cast[]。那么代码就是：

var stringArr = $('span[data-id="cast[]"').map(function(){
    return $(this).text().trim();
});

Demo -

传回动态字符串数组

1 个答案: