Asp.net Core 中的 Ajax 助手标签

Question

请帮忙。我想点击按钮来处理Ajax表单， 我不明白 data-ajax 是如何工作的。

这是我的 HTML 代码

<form asp-page-handler="UpdateTable" data-ajax="true" 
              data-ajax-method="post"
              data-ajax-update="#Tables"
              data-ajax-mode="after"
              data-ajaz-url="Secon">
            <ul class="widget-list">``
                <li> <input type="checkbox" name="name1" value="true" /> <span>sdfsdfsfsdfsf</span></li>
                <li> <input type="checkbox" name="name2" value="true" /> <span>ssdfsdf</span></li>
                <li> <input type="checkbox" name="name3" value="true" /> <span>sdfdsfsdewe</span></li>
                <li> <input type="checkbox" name="name4" value="true" /> <span>sdfsdfsfsdfsf</span></li>
                <li> <input type="checkbox" name="name5" value="true" /> <span>ssdfsdf</span></li>
                <li> <input type="checkbox" name="name6" value="true" /> <span>sdfdsfsdewe</span></li>
            </ul>` `
            <p style="">Дата: <input type="text" style="width:180px; border-radius:5px;" name="Days" required class="datepicker-here" data-range="true" data-multiple-dates-separator=" - " data-position='top right' /></p>
            <p style="margin-left:19px;">
                С: <input type="text" style="width:60px; border-radius:5px;" name="TimeFrom" required class="only-time" data-position='top right' />
                До: <input type="text" style="width:60px; border-radius:5px;" name="TimeTo" required class="only-time" data-position='top right' />
            </p>
            <input type="submit" value="Показать" class="button-style" style="margin-left:60px;" />
        </form> 

和我要更新的 div

<div class="div-table" id="Tables">
            <div class="BodyTwo" style="width:auto;">
                <h3 >@Model.Name</h3>
                @{
                    DataSet DS = Model.Data;
                    // = Model.Data;
                }
            </div>
           </div>

和我的 C# 代码

public class AboutModel : PageModel
    {
        public string Name  { get; set; }
        public DataSet Data { get; set; }
        public string Date { get; set; }
        public string View { get; set; }

        public DataTable dataTable { get; set; }
       public string Razdel { get; set; }

        IRepositor repositor;
        public AboutModel (IRepositor repositor)
        {
            this.repositor = repositor;
        }
        public IActionResult OnGet()
        {
            Name = " mnnjhjbbhvbhvh";
            Data = new DataSet();
            string StrocRezdel = Request.Query.FirstOrDefault(p => p.Key == "Razdel").Value;
            View = Request.Query.FirstOrDefault(p => p.Key == "View").Value;
            if (StrocRezdel != null)
            {
                Data = repositor.DataSetTwo(Name);
            }
            Razdel = StrocRezdel;
            return Page();
        }
        public void OnPostUpdateTable(bool name1, bool name2, bool name3, bool name4, bool name5, bool name6)
        {
            Name = "";
            Name += name1 == true ? "dsdfsdf " : "";
            Name += name2 == true ? "svwer " : "";
            Name += name3 == true ? "sghjkker " : "";
            Name += name4 == true ? "mjhj " : "";
            Name += name5 == true ? "rffvbn " : "";
            Name += name6 == true ? "ooluhj " : "";
            Console.WriteLine("UEEEEEEEEEE");

        }

    }

但是当我按下按钮时，又添加了一个菜单 屏幕1 , 屏幕2

为什么当我按下“显示”按钮时会发生这种情况？ 谢谢。

Answer 1

您的表单中有一些错误。 asp-page-handler 属性是不必要的，因为表单将/应该发布到data-ajax-url 属性指定的 URL。您拼错了 (data-ajaz-url)，它似乎没有指向您显示的任何代码。您还将data-ajax-mode 设置为after，这会导致AJAX 调用返回的内容被附加到现有内容中。

要看到你想要的结果并不容易，所以我将向你指出一些关于在 Razor 页面中使用不显眼的 AJAX 的通用内容：https://www.learnrazorpages.com/razor-pages/ajax/unobtrusive-ajax