Asp.net Core中的Ajax帮助器标签

Question

Pleas help. I want to click on the button to process the Ajax form, I don't understand how working data-ajax.

Here is my HTML code

<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> 

and div which i want to update

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

and my c# code

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");

        }

    }

But when i press button one more menu is added Screen1 , Screen2

why when i press the button "Show" it's happens? Thanks.

Answer 1

You have a few mistakes in your form. The asp-page-handler attribute is unnecessary because the form will/should be posted to the URL specified by the data-ajax-url attribute. You have mis-spelled that ( data-ajaz-url ) and it doesn't appear to point to any code that you showed. You have also set the data-ajax-mode to after , which results in the content returned from the AJAX call being appended to existing content.

It's not that easy to see what result you want, so I shall point you to some generic stuff on using unobtrusive AJAX in Razor Pages instead: https://www.learnrazorpages.com/razor-pages/ajax/unobtrusive-ajax