Asp.net Core中的Ajax幫助器標簽

Question

請幫助。 我想單擊按鈕來處理Ajax表單，但我不了解數據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");

        }

    }

但是當我按下按鈕時，又添加了一個菜單Screen1 屏幕2

為什么當我按下“顯示”按鈕時會發生？ 謝謝。

Answer 1

您的表格有一些錯誤。 asp-page-handler屬性是不必要的，因為該表單將/應該發布到由data-ajax-url屬性指定data-ajax-url 。 您data-ajaz-url了（ data-ajaz-url ），它似乎沒有指向您顯示的任何代碼。 您還已將data-ajax-mode為after ，這導致從AJAX調用返回的內容被附加到現有內容上。

看到想要的結果並不容易，所以我將向您介紹一些在Razor Pages中使用不引人注目的AJAX的通用知識： https : //www.learnrazorpages.com/razor-pages/ajax/unobtrusive-ajax