X   Site Message
(Message will auto close in 2 seconds)

Welcome to UtterAccess! Please ( Login   or   Register )

Custom Search
   Reply to this topicStart new topic
> Enable Pegination On Jquery Dialog In Aspnet Mvc Using The Pagedlist, ASpnet MVC 5    
post Dec 19 2019, 05:05 AM

Posts: 1,860
Joined: 5-September 10
From: Kampala,Uganda The Pearl of Africa

Hello Community.

I know some members here develop applications using aspnet MVC.

I am trying to learn it and add it to my skills set.

I need some help. Here is the problem.
I have a JQuery dialog window displaying table data. I have used the Paged List to enable paging where the records are more than 5. I want to be able to navigate to a different page number on the dialog.

Here is my attempt so.
Action method :

[HttpPost] public ActionResult GetRequistionDetail(int RequestID, int? page) { // RequistionDetails myrequests = new RequistionDetails(); List<RequistionDetails> listofdetails = new List<RequistionDetails>(); ViewBag.RequestID = RequestID; RequistionDetails myrequests = new RequistionDetails(); IPagedList<RequistionDetails> s = null; int pagesize = 5; int pagenumber = (page ?? 1); listofdetails = r.getAllRequistionsDetails(RequestID); myrequests.details = listofdetails; s = listofdetails.ToPagedList(pagenumber, pagesize); ViewBag.RequestID = RequestID; return PartialView("_details",s); }

In the index page, i use JQuery to open the dialog and load the data. Here is the code.

<script type="text/javascript"> $(document).ready(function () { $("#dialogdiv").dialog({ autoOpen: false, width: 800, modal: true, maxHeight: window.innerHeight - 15, overflow: 'scroll', buttons: [{ text: "Ok", click: function() { $( this ).dialog( "close" ); } }, { text: "Cancel", click: function() { $( this ).dialog( "close" ); } } ] });
$('.ids').click(function () { var requestid = $(this).data('id'); //alert("You clicked me...again" + requestid) //var productId = $(this).data('id'); //alert(requestid) $.ajax({ type: "POST", URL: "/tblRequistions/GetRequistionDetail", data: '{RequestID: "' + requestid + '" }', contentType: "application/json; charset=utf-8", dataType: "html", success: function (response) { $('#dialogdiv').html(response); $('#dialogdiv').dialog('open'); }, failure: function (response) { alert(response.responseText); }, error: function (response) { alert(response.responseText); } }); });

In the index (main page), the dialog is represented by the div element.
<div id= "dialogdiv" title="View Requistion Details"> </div>

The partial view which the dialog uses, has the following html and js code.

@using PagedList.Mvc @model PagedList.IPagedList<LearningApp.ViewModel.RequistionDetails> <!DOCTYPE html> <html> <head> Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount </head> <body> <h4>Requistion List</h4> <hr /> <table class="table table-bordered table table-hover" cellpadding="1" cellspacing="0" id="RequestGrid"> <tr> <th>Employee Name#</th> <th>Period</th> <th>Request Type</th> <th>Allowance Rate</th> <th>Days Requested</th> <th>Amount</th> <th>Start Date</th> <th>End Date</th> <th>Normal Days</th> <th>Field Days</th> <th></th> </tr> @foreach (var r in Model)
{ <tr> <td>@r.Employee</td> <td>@r.Period</td> <td>@r.RequistionTypes</td> <td>@r.AllowanceRate</td> <td>@r.ndays</td> <td>@r.Amount</td> <td>@r.StartDate</td> <td>@r.Enddate</td> <td>@r.NormalDays</td> <td>@r.FieldDays</td> </tr> } </table> <div id="myPager"> @Html.PagedListPager(Model,page => URL.Action("GetRequistionDetail", new { RequestID = ViewBag.RequestID, page = page }),PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new PagedListRenderOptions { Display=PagedListDisplayMode.IfNeeded, MaximumPageNumbersToDisplay=5 }, new AjaxOptions { InsertionMode=InsertionMode.Replace, HttpMethod="Get", UpdateTargetId= "dialogdiv" } )
) </div> </body>
</html> <script> $('#myPager').on('click', 'a', function (e) { //alert(this.href) //prevent action link normal functionality e.preventDefault(); $.ajax({ URL: this.href, type: 'Get', cache: false, success: function (result) { console.log(result) $('#dialogdiv').html(result); }, failure: function (result) { console.log(result) } }); return false; }); </script>

When i click on the paging control, and i check in the console, i see the correct
returned but i get Htpp status of 404 not found. So if i am getting the correct URL, why do i get not found status? Anything i have implemented wrongly? Ronald
Go to the top of the page

Custom Search

RSSSearch   Top   Lo-Fi    24th January 2020 - 02:52 PM