Question

我有一张桌子，桌子上有一些动态按钮，可以显示信息的模态。在模式中，我想在单击按钮时向表中添加新行。

我从主视图中显示模式，然后调用局部视图以在模式表中显示信息。

在我尝试使用append的部分方法中，但似乎不起作用，我认为jQuery可以添加到表中，而我不必调用任何类型的刷新。

我的问题是：如何从部分内部刷新表？

我相信jQuery正在添加到td中，但只是没有被更新

EditApplication.cshmtl主视图

<form method="POST">
   <div class="modal fade" id="editAppModal" tabindex="-1" role="dialog" aria-labelledby="editAppModal" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title" id="editAppModal">Edit Application</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
          <input type="text" id="appName">
          <input type="text" id="appShortName" style="width:15%">
          <hr>
            <table id="modalServerTB" style="border-collapse: separate; border-spacing: 5px 15px;">

            </table>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary" asp-page-handler="UpdateApplication">Update Application</button>
      </div>

    </div>
  </div>
</div>
</form>

jQuery在主视图中

<script>
    $(document).ready(function(){
        $(".selectRow").click(function(e)
        {
            e.preventDefault();

            var row = $(this).closest("tr"),      
                tds = row.find("td:nth-child(1)").first(); //get row closest to click then grab first column info

            var textval = $.trim(tds.text()); //tons of whitespace around the text, needs to be removed

            $.ajax({
                    url: "EditApplication?handler=GetRowInfo",
                    type: "POST",
                    dataType: "json",
                    data: { textval },
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("XSRF-TOKEN",
                            $('input:hidden[name="__RequestVerificationToken"]').val());
                    },
                    complete: function (result) {
                        $("#appName").val(textval);
                        $("#appShortName").val(result.responseJSON);
                        $('#modalServerTB').load('/EditApplication?handler=ServerPartial');
                        $('#editAppModal').modal('show');

                    }
            })
        });
    });
</script>

partial view

    <tbody id="tableBody">
            @foreach(var s in Model.serverUrl)
            {
                <tr style="border-bottom: 0.3px outset whitesmoke" >

                    <td style="width:40%">
                        <input type="text" value="@s.Key">                
                    </td>

                    <td>
                        @foreach(var u in s.Value)
                        {
                            @Html.DropDownListFor(a=>u.Urlid, Model.urls, new{style = "width:50%", @class = "selectedURL"})
                            <br>                          
                        }
                    </td> 

                    <td class="newURLS" style="border:solid 1px">

                    </td>

                    <button class="AddURLBtn"> + </button>
                    <br>
                </tr>
            }           
    </tbody>

    <div>
        <button type="button" class="btn btn-dark btn-sm" id="AddServerBtn">Add Server </button>
    </div>

    @Html.DropDownList("selectedURL",Model.urls, "Select URL" , new {style = "width:50%; display:none;", @class = "selectedURL", id="urlDDL"})

<script>
$(document).ready(function(){
    $(".AddURLBtn").click(function(e)
        {
            e.preventDefault();

            console.log("inaddurl");
            $(".newURLS").append('sgagfsafsafsf');
        });
});
</script>

截至目前，我只是在测试是否可以将文本仅添加到td中，但似乎不起作用

我也正在将视图模型传递给我的局部模型

Answer 1

原来，您需要一个表格标签才能完成所有工作。仅使用TBody并没有创建div，因此我的jquery函数没有目标

<table>
        <tbody id="tableBody">
            @foreach(var s in Model.serverUrl)
            {
                <tr style="border-bottom: 0.3px outset whitesmoke" >

                    <td style="width:40%">
                        <input type="text" value="@s.Key">                
                    </td>

                    <td class="urlsTD">
                        @foreach(var u in s.Value)
                        {
                            @Html.DropDownListFor(a=>u.Urlid, Model.urls, new{style = "width:50%", @class = "selectedURL"})
                            <br>                          
                        }

                    </td> 



                    <td>
                        <button class="AddURLBtn"> + </button>
                    </td>

                </tr>
            }           
    </tbody>

    <div>
        <button type="button" class="btn btn-dark btn-sm" id="AddServerBtn">Add Server </button>
    </div>
</table>

剃刀在引导模态内部向表中动态添加行

1 个答案: