Ajax WebGrid JQuery issue - asp.net-mvc-3

I am using the webgrid so i can display data from my database. On page load the grid is displaying correctly on the page, but when i try to filter the data, i have a textbox and a submit button, when i press on the search button i get an error : "a jquery script reference is required in order to enable ajax support in the webgrid helper". I cant seem to find were the problem is.
this is my grid in my view,
Hello,
I am using the webgrid so i can display data from my database. On page load the grid is displaying correctly on the page, but when i try to filter the data, i have a textbox and a submit button, when i press on the search button i get an error : "a jquery script reference is required in order to enable ajax support in the webgrid helper". I cant seem to find were the problem is.
this is my grid in my view,
<div id="myGrid">
#Html.Partial("Grids/_gridPayments", Model)
</div>
this is my partial webgrid view
#model IEnumerable<DAS.DAL.CustomerPayment>
#{
var grid = new WebGrid(source: Model, rowsPerPage: 15, ajaxUpdateContainerId: "myGrid");
#grid.GetHtml(rowStyle: "gridRow", alternatingRowStyle: "gridAltRow", footerStyle: "gridFooter", columns: grid.Columns(
grid.Column("FullName", "Πελάτης"),
grid.Column("Amount", "Ποσό", format: (item) => string.Format("{0:C}", item.Amount)),
grid.Column("Descr", "Περιγραφή"),
grid.Column("DTPaid", "Ημερομηνία πληρωμής", format: (item) => string.Format("{0:dd-MMM-yyyy}", item.DTPaid))
));
}
and finally my controller function is
var payments = BLPayments.getAllPayments();
if (!string.IsNullOrEmpty(txtSearchCustomer))
payments = payments.Where(a => a.FullName.Contains(txtSearchCustomer)).ToList();
if (!string.IsNullOrEmpty(txtSearchFromDate) && !string.IsNullOrEmpty(txtSearchToDate))
payments = payments.Where(a => a.DTPaid >= DateTime.ParseExact(txtSearchFromDate, "MM/dd/yyyy", null) && a.DTPaid <= DateTime.ParseExact(txtSearchToDate, "MM/dd/yyyy", null)).ToList();
if (!string.IsNullOrEmpty(txtSearchFromDate) && string.IsNullOrEmpty(txtSearchToDate))
payments = payments.Where(a => a.DTPaid >= DateTime.ParseExact(txtSearchFromDate, "MM/dd/yyyy", null)).ToList();
if (string.IsNullOrEmpty(txtSearchFromDate) && !string.IsNullOrEmpty(txtSearchToDate))
payments = payments.Where(a => a.DTPaid <= DateTime.ParseExact(txtSearchToDate, "MM/dd/yyyy", null)).ToList();
return PartialView("Grids/_gridPayments", payments);
thanks in advance.

Added this code
if (Request.IsAjaxRequest())
return PartialView("Grids/_gridPremadeMeals", premadeMeals);
else
return View("ViewPremadeMeals", premadeMeals);
and worked. I think it was refreshing the whole page, but still cant find why..

Related

In JSP how do I make a GET request on selection of one dropdown value and get data for other dropdowns from DB?

Hi All please suggest me some approaches for the below problem
Spring boot MVC: UI page is JSP
Currently All dropdown values are getting from DB when the home page is opened
I am stuck at the below task
On selection of one dropdown value, the below other dropdown values should be auto populated in jsp before the form is submitted
How do I make a GET request on selection of one dropdown value and get data for other dropdowns from DB?
below is the sample jsp form
enter image description here
if you using jquery with jsp then , use Ajax POST in Change event of name-3 dropdown , on success function populate on name-4 , name-5 drop down.
Like,
$(document).on('change','#name3',function(){
callAjaxByObj({
"url" : "url",
"type" : "POST",
"data" : {"name3Id" : $(this).val()},
"resp" : afterSuccess(),
"error" : ajaxFailed()
});
});
function afterSuccess(){
return function(resp){
// here you can populate Selected data on name-4, name-5 dropdowns use below
$("#name4").val(resp.name4Id);
$("#name5").val(resp.name5Id);
// OR if you want to append new drop down values to append name4, name5 dropdowns
var htm='';
var index = 0;
var obj = '';
for(index = 0; index < resp.name4List.length; index++) {
obj = resp.name4List[index];
htm +='<option value="'+obj.id+'" >'+obj.name+'</option>';
}
$("#name4").append(htm);
// same way you can do for name5 drop down.
}
}

Adding extra url query string to #Html.PagedListPager aside page in ajax call

I am PagedList for pagination when collecting values to my web page through ajax. The ajax call works well but When I click on the pagination links to display other details of the report for other pages, I have no value returned because I am adding extra parameters to the #Html.PagedListPager method aside the page used in the action method.
I am returning values through my partial views. The problem is how to add the extra
parameters to the pagination link.
My partial view code is below
#using Microsoft.Security.Application
#using PagedList
#using PagedList.Mvc
#model IPagedList<LiveChatPrototype.Mvc.Models.Livechat.Chatreportview>
#{
var FromDate = ViewBag.FromDate; //values to be added to pagination link
var ToDate = ViewBag.ToDate; //values to be added to pagination link
}
#if (Model != null)
{
<div class="numlinks">
#Html.PagedListPager(Model, page => Url.Action("DisplayAllchatreport",
new { FromDate = FromDate, ToDate = ToDate, page = page }), new PagedListRenderOptions() { Display = PagedListDisplayMode.IfNeeded, DisplayPageCountAndCurrentLocation = true, DisplayItemSliceAndTotal = true })
</div>
}
Please focus on the bottom part of the code, cause that is were the problem lies adding the ViewBag values to be part of the url so the pargination link is clicked other details can be returned.
FromDate and ToDate values were null. So I edited my controller and passed this values into the model which I was sending into my partialView.
So this allowed me to use them in my pagination links in the partialView
use Request to manage
fromDate = Request.QueryString["fromDate"]
//...

display the selected value from DropDown in a page

Hi Folks i am retrieving Name from database to drop down list. Now i want to display the selected value from DropDown in a page. My code is like follows to retrieve data,am using Fluent data as a framework.
My Controller Action is
var query = Abc.GetProducts();
ViewBag.EnterpriseId = new SelectList(query.AsEnumerable(), "EnterpriseId", "Name");
return View();
My view is ,
#Html.DropDownList("EnterpriseID", (SelectList) ViewBag.EnterpriseID, "--Select Resource--")
You can use a simple js for this:
elem = $('.selectClass');
options = elem.find('option[value="'+DataFromDBHere+'"]');
if(options){
options.prop('selected', 'selected');
}

Telerik MVC3 Razor Grid - Partial View returning from Controller

I have a view with several controls that are used for searching. When a user searches (Ajax.BeginForm) off of these I return the data into a PartialView (Telerik MVC3 Grid) that was generated dynamically.
This all works fine. In the grid are buttons for selecting a row. When I select a row, it posts to my controller, I do some "stuff" etc. When I try to get back to the view all I get is my grid data on a page by itself, it displays like a table with no borders, no other controls etc. My code is below.
My partial grid:
#model Highlander.Areas.Highlander.Models.ViewModels.DeliveriesGridViewModel
#using System.Data;
#(Html.Telerik().Grid<System.Data.DataRow>(Model.Data.Rows.Cast<System.Data.DataRow>())
.Name("Grid")
.DataKeys(dataKeys => dataKeys.Add("DeliveryID"))
.Columns(columns =>
{
columns.Command(commandbutton =>
{
commandbutton.Select().ButtonType(GridButtonType.ImageAndText);
}).Width(80).Title(ViewBag.Title);
columns.LoadSettings(Model.Columns as IEnumerable<GridColumnSettings>);
})
.DataBinding(dataBinding => dataBinding.Server().Select("_MarkSystem", "Deliveries"))
.EnableCustomBinding(true)
.Resizable(resize => resize.Columns(true))
)
My Controller:
[GridAction]
public ActionResult _MarkSystem(GridCommand command, int id)
{
string shipDeliver = DataCache.ShipDeliver;
DataTable fullTable = DataCache.FullTable;
// call to function to get the datatable data based on the id
rHelpers.GetDataTableRow(id, fullTable, shipDeliver);
// get the data for the grid into the model
fullTable = DataCache.FullTable;
model = new DeliveriesGridViewModel();
model.Data = fullTable;
model.Columns = rHelpers.NewColumns(DataCache.FullTable);
return PartialView("_DeliveryGrid", model);
//if (Request.IsAjaxRequest())
//{
// return PartialView("_DeliveryGrid", model);
//}
//return PartialView("_DeliveryGrid", model);
//return PartialView("DeliveryManager", model);
}
As you can see I have tried various things with no success.
Can anyone give me some direction on this.
Thanks for your time.
As far i understand you are using dataBinding.Server() that call a server side binding. Use .Editable(editing => editing.Mode(GridEditMode.InLine) it will work.
Both kind of bindings (Server and Ajax) needs a editing mode. Put an editing mode and try again.Kindly Response if it does not work for you. Here full code of data binding:
**.DataBinding(dataBinding => dataBinding.Ajax()
.Select("myAction", "myController")
.Update("myAction",myController")).
Editable(editing => editing.Mode(GridEditMode.InLine))**

web grid sorting not working mvc 3 razor

I am using MVC 3 with Razor and I am using the below web grid to show some data,
What I need sorting on my first column. I have used similar code on other pages too for my sorting and it works fine, but here it doesnt seem to work.
However if I go to the next page say page 2 and now I click sort, it is sorted ascending and then again same problem.
<div id="grid">
#{
// added ajaxContainerId
var listgrid = new WebGrid(source: Model.ABC, rowsPerPage: 2, ajaxUpdateContainerId: "grid");
#listgrid.GetHtml(
columns: listgrid.Columns(
listgrid.Column("ColName", format: #<text>#item.Name</text>, canSort:true),
listgrid.Column(null, "Delete", (item) => MvcHtmlString.Create(string.Format("<a href='DeleteList/{0}'>Delete</a>", #item.Name))),
))
}
</div>
Full article at : http://yassershaikh.com/mvc-3-web-grid-sorting-not-working/
using the columnName attribute helped, I was using the wrong column name, because of which the sorting was not working
Here is the code I am using now
<div id="grid">
#{
// added ajaxContainerId
var listgrid = new WebGrid(source: Model.ABC, rowsPerPage: 2, ajaxUpdateContainerId: "grid");
#listgrid.GetHtml(
columns: listgrid.Columns(
listgrid.Column(header:"ColName", columnName="DbColName", format: #<text>#item.Name</text>, canSort:true),
listgrid.Column(null, "Delete", (item) => MvcHtmlString.Create(string.Format("<a href='DeleteList/{0}'>Delete</a>", #item.Name))),
))
}
</div>
Hope this helps someone in future too!

Resources