在对话框上显示数据而不重新加载页面

Posted 2023-05-08

【中文标题】在对话框上显示数据而不重新加载页面

【英文标题】：Display Data on Dialogbox without reloading page

【发布时间】：2020-09-04 18:49:09

【问题描述】：

我正在尝试显示带有 ID + 名称 + 价格 的引导对话框。

然后如果用户在对话框中选择YES，它必须点击有删除功能的Action方法并刷新页面上的数据才能看到更改而不重新加载页面。

我也不希望在它点击删除用户操作方法后，它一定不能显示它的视图。

我尝试使用以下代码中的 ViewBag，但它没有在 Bootstrap 对话框中显示 ID + Name + Price，并且没有t 重定向到删除操作方法，并且不刷新页面

@model IEnumerable<School.Models.ApplicationUser>

<hr>

    <table class="table table-responsive table-hover">

        <tbody>
            @foreach (var item in Model.OrderBy(x => x.DateTime))
            
                <tr>
                    <td>
                        @html.DisplayFor(modelItem => item.ID)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Price)
                    </td>

                    <td>

                        <span style="color: #ff0000;">
                            <a class="btn btn-warning btn-sm disclaimer-dialog">
                                    <i class="fa fa-unlock">&nbsp;</i>Delete  
                                    ViewBag.MyId = @item.Id;                              
                                </a>

                        </span>
                         &nbsp;

                    </td>
                    @ViewBag.MyId
                </tr>
            
        </tbody>
    </table>


@section Scripts 
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/Scripts/Views/SchoolAccounts/Delete.js")



<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="disclaimerModalDialog" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="exampleModalScrollableTitle">Confirmation Deletion</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p><strong>Are you sure you want to reset password for user ? @ViewBag.MyId </strong></p>

                @using (Html.BeginForm("DeleteProduct", "SchoolAccounts",

                    FormMethod.Post, new
                    
                        @id = "delete-form",
                        role = "form"
                    ))
                
                    @*@Html.HiddenFor(m => m.Id)
                        @Html.AntiForgeryToken()*@
                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        onclick="$('#delete-form').submit();">
                    Yes
                </button>
                <button type="button" class="btn btn-primary"
                        data-dismiss="modal">
                    No
                </button>
            </div>
        </div>
    </div>
</div>

Delete.js 的内容

$(function () 

    $('.disclaimer-dialog').click(function () 
        $('#disclaimerModalDialog').modal('show');
    );

);

【问题讨论】：

请附上Scripts/Views/SchoolAccounts/Delete.js的代码

@JerdineSabio 我包含了它。

等一下，我正在创建一个答案。为了澄清，模态正确打开对吗？只是显示ID不行？

请在您的循环中包含名称和价格列，谢谢。

@JerdineSabio 事实上，除了我想在 ViewBag 的模式上显示的 ID + 名称 + 价格之外，一切都正确显示，包括模式。

【参考方案1】：

ViewBag 不能这样使用。一旦 ViewBag 在页面上呈现，您就不能更新它的值。页面加载完成后，所有 razor 变量都是静态的。

我们需要做的是在 html 属性上分配这些值。

修改循环中的链接以具有数据属性。我用过data-id，data-name，data-price；

@foreach (var item in Model.OrderBy(x => x.DateTime))

   <tr>
      @*just modify the link in the last column*@

      <td>
         <span style="color: #ff0000;">
            <a data-id="@item.Id" data-name="@item.Name" data-price="@item.Price" class="btn btn-warning btn-sm disclaimer-dialog">
               <i class="fa fa-unlock">&nbsp;</i>
               Delete                           
            </a>
         </span>
      </td>
   </tr>

修改您的 Delete.js 以访问这些属性并替换模式的内容。

$(function () 

    $('.disclaimer-dialog').click(function () 

        // get attributes from the button
        var id = $(this).data("id");
        var name = $(this).data("name");
        var price = $(this).data("price");

        // Assign value to delete-id
        $(".delete-id").val(id);

        // update the first paragraph in modal-body
        $('#disclaimerModalDialog').find(".modal-body p").eq(0).html("Are you sure you want to delete "+id+"-"+name+"-"+price+"?");

        $('#disclaimerModalDialog').modal('show');
    );

);

在您的模态正文中，将其用于输入字段。我们需要添加一个类，以便我们可以轻松访问它；

@Html.HiddenFor(m => m.Id, new  @class="delete-id" );

将此函数添加到您的 Delete.js 中

$(function()
   $("#delete-form").submit(function(e)
      // this will stop the page from refreshing or redirecting
      e.PreventDefault();

      var deleteId = $(".delete-id").val();
      var passData =  id:deleteId ;

      // ajax call here
      $.ajax(
        type: "POST",
        url: "/ControllerName/DeleteAjax",
        data: JSON.stringify(passData),
        contentType: "application/json; charset=utf-8",
        dataType: "html",
        success: function(result)
           alert(result);

           // find the link with data-id == deleteid
           // .parent() = span
           // .parent().parent() = td
           // .parent().parent().parent() = tr
           // .remove() = remove that row

           $("table a[data-id='"+deleteId+"']").parent().parent().parent().remove();
        ,
        error: function(err)
           alert(err);
        
      );
   );
);

在您的控制器中，添加此功能。 DeleteAjax;

[HttpPost]
public ActionResult DeleteAjax(string id)

   var product = context.Products.FirstOrDefault(p=>p.Id == id);

   if(product == null)
      return Content("error, cant find Id")
   else
      context.Products.Remove(product);
      context.SaveChanges();
      return Content("successfully deleted");
   

【讨论】：

评论不用于扩展讨论；这个对话是moved to chat。