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

        }

    }

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

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

Answer 1

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

要获得想要的结果并不容易，因此，我将向您介绍一些在Razor Pages中使用通俗的AJAX的一般知识：https://www.learnrazorpages.com/razor-pages/ajax/unobtrusive-ajax

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

1 个答案: