how to get data from database using ajax asp.net core-CodePudding

According to the following codes i have created the Get Handler in Index Model

public IActionResult OnGetCustomer(CustomerSearchModel searchModel)
        {
            
            CustomerCombine combine = new CustomerCombine
            {
                MyViewModels = _customerApplication.GetAll(searchModel)
            };

            return Partial("./Customer", combine);
        }

and this is my Razor View:

@model CustomerCombine
 <form asp-page="./Index" asp-page-handler="Customer"
                   
                      method="get"
                      data-ajax="true"
                      data-callback=""
                      data-action="Refresh"
                     >
                    <div >
                        <input asp-for="@Model.MySearchModel.FullName"  placeholder="search..." />
                    </div>
                    <button  type="submit">جستجو</button>
                </form>
<table>
 @foreach (var item in @Model.MyViewModels)
                {
                    <tr>
                        <td>@item.Id</td>
                        <td>@item.FullName</td>
                        <td>@item.Mobile</td>
                        <td>@item.Email</td>
                        <td>@item.Address</td>
                        <td>@item.Image</td>
                    </tr>
                }
</table>

My modal is displayed successfully,and i can see my database's data, but when i fill search field and click on search button , nothing happens can any one help me plz?:)

and this is my jquey codes: i dont anything about Jquery and these codes were ready and now i dont knoe how i should use from it

    $(document).on("submit",
        'form[data-ajax="true"]',
        function (e) {
            e.preventDefault();
            var form = $(this);
            const method = form.attr("method").toLocaleLowerCase();
            const url = form.attr("action");
            var action = form.attr("data-action");

            if (method === "get") {
                const data = form.serializeArray();
                $.get(url,
                    data,
                    function (data) {
                        CallBackHandler(data, action, form);
                    });
            } else {
                var formData = new FormData(this);
                $.ajax({
                    url: url,
                    type: "post",
                    data: formData,
                    enctype: "multipart/form-data",
                    dataType: "json",
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        CallBackHandler(data, action, form);
                    },
                    error: function (data) {
                        alert("خطایی رخ داده است. لطفا با مدیر سیستم تماس بگیرید.");
                    }
                });
            }
            return false;
        });
});

function CallBackHandler(data, action, form) {
    switch (action) {
        case "Message":
            alert(data.Message);
            break;
        case "Refresh":
            if (data.isSucceced) {
                window.location.reload();
            } else {
                alert(data.message);
            }
            break;
        case "RefereshList":
            {
                hideModal();
                const refereshUrl = form.attr("data-refereshurl");
                const refereshDiv = form.attr("data-refereshdiv");
                get(refereshUrl, refereshDiv);
            }
            break;
        case "setValue":
            {
                const element = form.data("element");
                $(`#${element}`).html(data);
            }
            break;
        default:
    }
}

function get(url, refereshDiv) {
    const searchModel = window.location.search;
    $.get(url,
        searchModel,
        function (result) {
            $("#"   refereshDiv).html(result);
        });
}

CodePudding user response：

1.The third parameter of $.get() is the success function.

2.There is no isSucceced property in your postback data. The postback data is the partial view html code. You need use $("xxx").html(data); to update the partial view code.

3.Model Binding binds the property by name, <input asp-for="@Model.MySearchModel.FullName"/> does not match the CustomerSearchModel searchModel.

public IActionResult OnGetCustomer(CustomerSearchModel MySearchModel)

Whole working demo and more details I have commented on the code pls check carefully:

Model

public class CustomerCombine
{
    public List<MyViewModel> MyViewModels { get; set; }
    public CustomerSearchModel MySearchModel { get; set; }
}
public class CustomerSearchModel
{
    public string FullName { get; set; }
}
public class MyViewModel
{
    public int Id { get; set; }
    public string FullName { get; set; }
    public string Email { get; set; }
    public string Mobile { get; set; }
    public string Address { get; set; }
    public string Image { get; set; }
}

View(Index.cshtml)

@page
@model IndexModel
<!-- Button trigger modal -->
<button type="button"  data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>
<!-- Modal -->
<div  id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div >
    <div >
      <div >
        <h5  id="exampleModalLabel">Modal title</h5>
        <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div >
        @Html.Partial("Customer",Model.CustomerCombine)
      </div>
      <div >
        <button type="button"  data-bs-dismiss="modal">Close</button>
        <button type="button" >Save changes</button>
      </div>
    </div>
  </div>
</div>
 
@section Scripts
{
    <script>
          $(document).on("submit",'form[data-ajax="true"]',function (e) {
            e.preventDefault();
            var form = $(this);
            const method = form.attr("method").toLocaleLowerCase();
            const url = form.attr("action");
            var action = form.attr("data-action");

            if (method === "get") {
                const data = form.serializeArray();
                $.get(url,data,function (data) { 
                        console.log(data);    //you can check the response data in Console panel
                        CallBackHandler(data, action, form);
                    });
            } else {
                var formData = new FormData(this);
                $.ajax({
                    url: url,
                    type: "post",
                    data: formData,
                    enctype: "multipart/form-data",
                    dataType: "json",
                    processData: false,
                    contentType: false,
                    success: function (data) {                        
                        CallBackHandler(data, action, form);
                    },
                    error: function (data) {
                        alert("خطایی رخ داده است. لطفا با مدیر سیستم تماس بگیرید.");
                    }
                });
            }
            return false;
        });
//});    //remove this.......

    function CallBackHandler(data, action, form) {
        switch (action) {
            case "Message":
                alert(data.Message);  
                break;
            case "Refresh":
                $(".modal-body").html(data);      //modify here....
                break;
            case "RefereshList":
                {
                    hideModal();
                    const refereshUrl = form.attr("data-refereshurl");
                    const refereshDiv = form.attr("data-refereshdiv");
                    get(refereshUrl, refereshDiv);
                }
                break;
            case "setValue":
                {
                    const element = form.data("element");
                    $(`#${element}`).html(data);
                }
                break;
            default:
        }
    }

    function get(url, refereshDiv) {
        const searchModel = window.location.search;
        $.get(url,
            searchModel,
            function (result) {
                $("#"   refereshDiv).html(result);
            });
    }
    </script>
}

Partial View does not change anything

@model CustomerCombine

 <form asp-page="./Index" asp-page-handler="Customer"
                   
                      method="get"
                      data-ajax="true"
                      data-callback=""
                      data-action="Refresh"
                     >
                    <div >
                        <input asp-for="@Model.MySearchModel.FullName"  placeholder="search..." />
                    </div>
                    <button  type="submit">جستجو</button>
                </form>
<table>
 @foreach (var item in @Model.MyViewModels)
                {
                    <tr>
                        <td>@item.Id</td>
                        <td>@item.FullName</td>
                        <td>@item.Mobile</td>
                        <td>@item.Email</td>
                        <td>@item.Address</td>
                        <td>@item.Image</td>
                    </tr>
                }
</table>

PageModel

public IActionResult OnGetCustomer(CustomerSearchModel MySearchModel)//change here....
{

    CustomerCombine combine = new CustomerCombine
    {
        MyViewModels =  _customerApplication.GetAll(searchModel) //be sure here contains value...
    };

    return Partial("./Customer", combine);
}

Result: