0

Steven Sanderson のブログの助けを借りて、動的な数のテキスト ボックスと DropDownList が生成されるビューを実装しました。すべて正常に動作します。しかし、各ドロップダウンリストに値が入るまでフォームを送信できず、ドロップダウンリストがない場合はすべての動的コンテンツが削除され、フォームを送信してはなりません。

メイン ビュー コード:

<div id="Part2">
 <h3><u>Services:</u></h3><br />
 <div id="EditorRows">
  <%Html.RenderPartial("_InsertServices", Model);%>
 </div>
 <div id="DontAppend">
  <%= Html.ActionLink("+ Add Another Service", "Add", null, new { id = "addItem" }) %>
  <input type="button" id="btnEdit" value="Edit" hidden="hidden"/>
  <input type="button" id="btnDone" value="Done" />
 </div>
</div>

PartialView コード:

<div class="EditorRow">
 <% using (Html.BeginCollectionItem("services")){ %>
 <table id="table1">
  <tr>
   <td>NOS:</td>
   <td><%:Html.DropDownListFor(model=>model.Id,(SelectList)ViewData["crmServiceType"] as SelectList,"---")%></td>
   <td>Comment:</td>
   <td><%=Html.TextBoxFor(model => model.Comment, new { size = "20" })%></td>
   <td><a href="#" class="deleteRow">delete</a></td>
  </tr>
 </table>
<% } %>
</div>

JavaScript:

$("#addItem").click(function () {
  $.ajax({
  url: this.href,
  cache: false,
  success: function (html) { $("#EditorRows").append(html); }
  });
  return false;
});
$("a.deleteRow").live("click", function () {
  $(this).parents("div.EditorRow:first").remove();
  return false;
});

これが生成された HTML ソースです。

4

2 に答える 2

1

私があなたを正しく理解していて、あなたのマークアップが次のように見える場合

<div class="EditorRow">
    <input type="hidden" value="6c2fa95a-cc3e-44d9-b460-b561276196c1" autocomplete="off" name="services.index">
    <table id="table1">
    <select>
        <option value="">Select</option>
        <option value="1">Value1</option>
        <option value="2">Value2</option>
    </select>
</div>

あなたはこのようにすることができます

$(function(){
    $("#btnDone").click(function(){
        if ($("div.EditorRow").length) {
            $("div.EditorRow select").each(function(){
                if (!$(this).val()) {
                    alert("You need to choose a value before submit");
                    return false;
                }
                //do your submit
            });
        } else {
            alert("You need to add at least one service before submit.")
        }
    });
});
于 2013-03-07T05:46:51.080 に答える
1

.live()は廃止されnow removed in jQuery version 1.9+たため、.on()代わりにハンドラを使用してください。
を追加した理由がわかり:firstません。複数の div があると推測しているEditorRow場合は、これを試してください。

 $("#EditorRows").on("click", "a.deleteRow", function () {
    var selID = $(this).closest("div.EditorRow").find('select').attr('id'); //<--give you the select list id
    $(this).closest("div.EditorRow").andSelf().remove();
    return false;
 });

これがどこにあるのかわかりませんが、この方法で達成できます：

$("#EditorRows").find('select').attr('id');
于 2013-03-07T05:11:15.377 に答える