jquery - 如何从表行检索值并在 MVC 应用程序中的模式弹出提交单击中使用该值？

Question

我有索引 View ，在其中显示表中的数据列表。在每行第二列 Name 单击时，我显示了一个模式，我在其中创建了 TextAreaFor 来插入一些输入，然后单击 submit 按钮，数据应存储在数据库表中的相应行中。我陷入了如何在数据库表中的相应行中插入模式输入值的困境。

请帮助我。非常感谢您的帮助。

 public class MyClass
    {
      public int Id {get;set;}
      public string Name { get; set; }
      public string AddNote { get; set; }
    }

家庭 Controller

[ChildActionOnly]
        public PartialViewResult _pNote()
        {
         MyClass model = new MyClass();
         return PartialView("_pNote", model);
        }

      [ChildActionOnly]
        [HttpPost]
        public PartialViewResult _pNote(int Id)
        {
            MyClass model = new MyClass();
             model=submitrecord(Id);
            return PartialView("_pNote", model);
        }

索引 View

               @model List<Proj.xx.MyClass>
                       <table>
                        <tr >
                            <th>
                                @Html.DisplayName("Id")
                            </th>
                            <th>
                                @Html.DisplayName("Name")
                            </th>                           

                        </tr>
                        @foreach (var item in Model)
                       {
                        <tr>
                               <td>
                                  @Html.DisplayFor(modelItem => item.Id)                                
                                </td>                           

                                <td>
                           <a data-toggle="modal" data-target="#AddNote">                                      
                                  @Html.DisplayFor(modelItem => item.Name)
                                </a>

                   </td>     

                        </tr>
                   }

                    </table>
@{ Html.RenderAction("_pNote"); }

_p注释部分

@model Proj.xx.MyClass

@using (Html.BeginForm("_pNote", "Home", FormMethod.Post, new { @Id = "form" }))
{
    <div class="modal fade" id="AddNote" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">  

                    @Html.HiddenFor(m => m.Id)
                    @Html.TextAreaFor(m=>m.AddNote)
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="reset" data-dismiss="modal">Close</button>

                    <button type="button" data-assigned="@Model.Id" id="Submit" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </div>
}

JQuery

$('#Submit').click(function () {
             debugger;
           var id=  $('#Id').val($(this).text());                
             var path = '@Url.Action("_pNote", "Home")?id=' + id;
             path= encodeURI(path);
         });

Answer 1

您需要使用Ajax调用。并为所有链接指定一个“link”类，并为每个链接添加一个数据属性来存储 Id :

<td>
    <a class="link" data-id="@Model.Id">                                      
        @Html.DisplayFor(modelItem => item.Name)
    </a>
</td>

然后你获取 id 并向你的操作发送 ajax 调用，并将结果 (html) 放入容器中:

$('.link').click(function(){
   var id = $(this).data('id');

        $.ajax({
            url: '@Url.GetActionUrl("_pNote", "Home")',
            type: 'POST',
            data: {Id: id},
            success: function (res) {
                $("#modalContainer").html(res)
            }
        });
});

在 View 中:

@model List<Proj.xx.MyClass>
                       <table>
                        <tr >
                            <th>
                                @Html.DisplayName("Id")
                            </th>
                            <th>
                                @Html.DisplayName("Name")
                            </th>                           

                        </tr>
                        @foreach (var item in Model)
                       {
                        <tr>
                               <td>
                                  @Html.DisplayFor(modelItem => item.Id)                                
                                </td>                           

                                <td>
                           <a data-toggle="modal" data-target="#AddNote">                                      
                                  @Html.DisplayFor(modelItem => item.Name)
                                </a>

                   </td>     

                        </tr>
                   }

                    </table>
<div id="modalContainer"></div>