How to filter database records based on static dropdownlist in mvc 5
i want to filter database record based on database column QtyRecieved,QtyRecievedand Void using static html dropdwonlist
QtyRecieved,QtyRecieved is decimal and void is boolean
here is what i have tried
@Html.DropDownList("Filter", new List<SelectListItem>
{
new SelectListItem{ Text="Open", Value = "0" },
new SelectListItem{ Text="Partial", Value = "1" },
new SelectListItem{ Text="All", Value = "2" }
})
i have used ajax to send the request to controller
$("#Filter").change(function () {
var listval = $("select option:selected").text();
$.ajax({
type: "GET",
url: "@Url.Action("Index", "MaterialRequest")",
data: { id: listval }
});
});
In my controller i have put else if condition to display records
i want, when Open is selected it show records where QtyRecieved == QtyRequested
when Partial is selected it show records where QtyRecieved < QtyRequested and Void = True
and
when All is selected then it will show all records
Please help me with the query to filter records or show any alternate way to do so
public ActionResult Index(string listval)
{
if (listval == "Open")
{
ViewBag.Items = db.Query<MaterialDeptItemVw>("Select mt.MaterialRequestId, mt.TDate, d.DepartmentName, it.ItemName, mt.QtyRequested, mt.Comment, mt.RecievedDateTime , u.UnitName from MaterialRequest mt INNER JOIN Department d ON mt.DepartmentId = d.DepartmentId INNER JOIN Items it ON mt.ItemId = it.ItemId INNER JOIN Units u ON it.UnitId = u.UnitId where QtyRecieved = QtyRequested");
}
else if (listval == "Partial")
{
ViewBag.Items = db.Query<MaterialDeptItemVw>("Select mt.MaterialRequestId, mt.TDate, d.DepartmentName, it.ItemName, mt.QtyRequested, mt.Comment, mt.RecievedDateTime , u.UnitName from MaterialRequest mt INNER JOIN Department d ON mt.DepartmentId = d.DepartmentId INNER JOIN Items it ON mt.ItemId = it.ItemId INNER JOIN Units u ON it.UnitId = u.UnitId where QtyRecieved < QtyRequested and Void = 0");
}
else if (listval == "All")
{
ViewBag.Items = db.Query<MaterialDeptItemVw>("Select mt.MaterialRequestId, mt.TDate, d.DepartmentName, it.ItemName, mt.QtyRequested, mt.Comment, mt.RecievedDateTime , u.UnitName from MaterialRequest mt INNER JOIN Department d ON mt.DepartmentId = d.DepartmentId INNER JOIN Items it ON mt.ItemId = it.ItemId INNER JOIN Units u ON it.UnitId = u.UnitId");
}
return View();
}
javascript c# ajax asp.net-mvc petapoco
add a comment |
i want to filter database record based on database column QtyRecieved,QtyRecievedand Void using static html dropdwonlist
QtyRecieved,QtyRecieved is decimal and void is boolean
here is what i have tried
@Html.DropDownList("Filter", new List<SelectListItem>
{
new SelectListItem{ Text="Open", Value = "0" },
new SelectListItem{ Text="Partial", Value = "1" },
new SelectListItem{ Text="All", Value = "2" }
})
i have used ajax to send the request to controller
$("#Filter").change(function () {
var listval = $("select option:selected").text();
$.ajax({
type: "GET",
url: "@Url.Action("Index", "MaterialRequest")",
data: { id: listval }
});
});
In my controller i have put else if condition to display records
i want, when Open is selected it show records where QtyRecieved == QtyRequested
when Partial is selected it show records where QtyRecieved < QtyRequested and Void = True
and
when All is selected then it will show all records
Please help me with the query to filter records or show any alternate way to do so
public ActionResult Index(string listval)
{
if (listval == "Open")
{
ViewBag.Items = db.Query<MaterialDeptItemVw>("Select mt.MaterialRequestId, mt.TDate, d.DepartmentName, it.ItemName, mt.QtyRequested, mt.Comment, mt.RecievedDateTime , u.UnitName from MaterialRequest mt INNER JOIN Department d ON mt.DepartmentId = d.DepartmentId INNER JOIN Items it ON mt.ItemId = it.ItemId INNER JOIN Units u ON it.UnitId = u.UnitId where QtyRecieved = QtyRequested");
}
else if (listval == "Partial")
{
ViewBag.Items = db.Query<MaterialDeptItemVw>("Select mt.MaterialRequestId, mt.TDate, d.DepartmentName, it.ItemName, mt.QtyRequested, mt.Comment, mt.RecievedDateTime , u.UnitName from MaterialRequest mt INNER JOIN Department d ON mt.DepartmentId = d.DepartmentId INNER JOIN Items it ON mt.ItemId = it.ItemId INNER JOIN Units u ON it.UnitId = u.UnitId where QtyRecieved < QtyRequested and Void = 0");
}
else if (listval == "All")
{
ViewBag.Items = db.Query<MaterialDeptItemVw>("Select mt.MaterialRequestId, mt.TDate, d.DepartmentName, it.ItemName, mt.QtyRequested, mt.Comment, mt.RecievedDateTime , u.UnitName from MaterialRequest mt INNER JOIN Department d ON mt.DepartmentId = d.DepartmentId INNER JOIN Items it ON mt.ItemId = it.ItemId INNER JOIN Units u ON it.UnitId = u.UnitId");
}
return View();
}
javascript c# ajax asp.net-mvc petapoco
data: { id: listval }
=> this should bedata: { listval: listval }
, or usepublic ActionResult Index(string id)
. The AJAX parameter name must match with server-side method parameter name. Also you should return JSON status instead of a view.
– Tetsuya Yamamoto
Nov 22 '18 at 6:30
In addition, you do not do anything with the view you return (you need to update the DOM in the success callback)
– user3559349
Nov 22 '18 at 6:33
@StephenMuecke did you mean should i remove type get and put success and error function there
– kunals
Nov 22 '18 at 6:37
Just usereturn Json()
with your collection and modify the AJAX to includesuccess
anderror
handling, no need to replacetype: GET
unless you're passing an array or collection.
– Tetsuya Yamamoto
Nov 22 '18 at 6:40
It can be still betype: "GET",
but you need to includesuccess function(result) { $(someElement).html(result); }
to add the view your are returning to the DOM (and you should be returning a model to the view, not usingViewBag
).
– user3559349
Nov 22 '18 at 6:41
add a comment |
i want to filter database record based on database column QtyRecieved,QtyRecievedand Void using static html dropdwonlist
QtyRecieved,QtyRecieved is decimal and void is boolean
here is what i have tried
@Html.DropDownList("Filter", new List<SelectListItem>
{
new SelectListItem{ Text="Open", Value = "0" },
new SelectListItem{ Text="Partial", Value = "1" },
new SelectListItem{ Text="All", Value = "2" }
})
i have used ajax to send the request to controller
$("#Filter").change(function () {
var listval = $("select option:selected").text();
$.ajax({
type: "GET",
url: "@Url.Action("Index", "MaterialRequest")",
data: { id: listval }
});
});
In my controller i have put else if condition to display records
i want, when Open is selected it show records where QtyRecieved == QtyRequested
when Partial is selected it show records where QtyRecieved < QtyRequested and Void = True
and
when All is selected then it will show all records
Please help me with the query to filter records or show any alternate way to do so
public ActionResult Index(string listval)
{
if (listval == "Open")
{
ViewBag.Items = db.Query<MaterialDeptItemVw>("Select mt.MaterialRequestId, mt.TDate, d.DepartmentName, it.ItemName, mt.QtyRequested, mt.Comment, mt.RecievedDateTime , u.UnitName from MaterialRequest mt INNER JOIN Department d ON mt.DepartmentId = d.DepartmentId INNER JOIN Items it ON mt.ItemId = it.ItemId INNER JOIN Units u ON it.UnitId = u.UnitId where QtyRecieved = QtyRequested");
}
else if (listval == "Partial")
{
ViewBag.Items = db.Query<MaterialDeptItemVw>("Select mt.MaterialRequestId, mt.TDate, d.DepartmentName, it.ItemName, mt.QtyRequested, mt.Comment, mt.RecievedDateTime , u.UnitName from MaterialRequest mt INNER JOIN Department d ON mt.DepartmentId = d.DepartmentId INNER JOIN Items it ON mt.ItemId = it.ItemId INNER JOIN Units u ON it.UnitId = u.UnitId where QtyRecieved < QtyRequested and Void = 0");
}
else if (listval == "All")
{
ViewBag.Items = db.Query<MaterialDeptItemVw>("Select mt.MaterialRequestId, mt.TDate, d.DepartmentName, it.ItemName, mt.QtyRequested, mt.Comment, mt.RecievedDateTime , u.UnitName from MaterialRequest mt INNER JOIN Department d ON mt.DepartmentId = d.DepartmentId INNER JOIN Items it ON mt.ItemId = it.ItemId INNER JOIN Units u ON it.UnitId = u.UnitId");
}
return View();
}
javascript c# ajax asp.net-mvc petapoco
i want to filter database record based on database column QtyRecieved,QtyRecievedand Void using static html dropdwonlist
QtyRecieved,QtyRecieved is decimal and void is boolean
here is what i have tried
@Html.DropDownList("Filter", new List<SelectListItem>
{
new SelectListItem{ Text="Open", Value = "0" },
new SelectListItem{ Text="Partial", Value = "1" },
new SelectListItem{ Text="All", Value = "2" }
})
i have used ajax to send the request to controller
$("#Filter").change(function () {
var listval = $("select option:selected").text();
$.ajax({
type: "GET",
url: "@Url.Action("Index", "MaterialRequest")",
data: { id: listval }
});
});
In my controller i have put else if condition to display records
i want, when Open is selected it show records where QtyRecieved == QtyRequested
when Partial is selected it show records where QtyRecieved < QtyRequested and Void = True
and
when All is selected then it will show all records
Please help me with the query to filter records or show any alternate way to do so
public ActionResult Index(string listval)
{
if (listval == "Open")
{
ViewBag.Items = db.Query<MaterialDeptItemVw>("Select mt.MaterialRequestId, mt.TDate, d.DepartmentName, it.ItemName, mt.QtyRequested, mt.Comment, mt.RecievedDateTime , u.UnitName from MaterialRequest mt INNER JOIN Department d ON mt.DepartmentId = d.DepartmentId INNER JOIN Items it ON mt.ItemId = it.ItemId INNER JOIN Units u ON it.UnitId = u.UnitId where QtyRecieved = QtyRequested");
}
else if (listval == "Partial")
{
ViewBag.Items = db.Query<MaterialDeptItemVw>("Select mt.MaterialRequestId, mt.TDate, d.DepartmentName, it.ItemName, mt.QtyRequested, mt.Comment, mt.RecievedDateTime , u.UnitName from MaterialRequest mt INNER JOIN Department d ON mt.DepartmentId = d.DepartmentId INNER JOIN Items it ON mt.ItemId = it.ItemId INNER JOIN Units u ON it.UnitId = u.UnitId where QtyRecieved < QtyRequested and Void = 0");
}
else if (listval == "All")
{
ViewBag.Items = db.Query<MaterialDeptItemVw>("Select mt.MaterialRequestId, mt.TDate, d.DepartmentName, it.ItemName, mt.QtyRequested, mt.Comment, mt.RecievedDateTime , u.UnitName from MaterialRequest mt INNER JOIN Department d ON mt.DepartmentId = d.DepartmentId INNER JOIN Items it ON mt.ItemId = it.ItemId INNER JOIN Units u ON it.UnitId = u.UnitId");
}
return View();
}
javascript c# ajax asp.net-mvc petapoco
javascript c# ajax asp.net-mvc petapoco
asked Nov 22 '18 at 6:28
kunalskunals
287
287
data: { id: listval }
=> this should bedata: { listval: listval }
, or usepublic ActionResult Index(string id)
. The AJAX parameter name must match with server-side method parameter name. Also you should return JSON status instead of a view.
– Tetsuya Yamamoto
Nov 22 '18 at 6:30
In addition, you do not do anything with the view you return (you need to update the DOM in the success callback)
– user3559349
Nov 22 '18 at 6:33
@StephenMuecke did you mean should i remove type get and put success and error function there
– kunals
Nov 22 '18 at 6:37
Just usereturn Json()
with your collection and modify the AJAX to includesuccess
anderror
handling, no need to replacetype: GET
unless you're passing an array or collection.
– Tetsuya Yamamoto
Nov 22 '18 at 6:40
It can be still betype: "GET",
but you need to includesuccess function(result) { $(someElement).html(result); }
to add the view your are returning to the DOM (and you should be returning a model to the view, not usingViewBag
).
– user3559349
Nov 22 '18 at 6:41
add a comment |
data: { id: listval }
=> this should bedata: { listval: listval }
, or usepublic ActionResult Index(string id)
. The AJAX parameter name must match with server-side method parameter name. Also you should return JSON status instead of a view.
– Tetsuya Yamamoto
Nov 22 '18 at 6:30
In addition, you do not do anything with the view you return (you need to update the DOM in the success callback)
– user3559349
Nov 22 '18 at 6:33
@StephenMuecke did you mean should i remove type get and put success and error function there
– kunals
Nov 22 '18 at 6:37
Just usereturn Json()
with your collection and modify the AJAX to includesuccess
anderror
handling, no need to replacetype: GET
unless you're passing an array or collection.
– Tetsuya Yamamoto
Nov 22 '18 at 6:40
It can be still betype: "GET",
but you need to includesuccess function(result) { $(someElement).html(result); }
to add the view your are returning to the DOM (and you should be returning a model to the view, not usingViewBag
).
– user3559349
Nov 22 '18 at 6:41
data: { id: listval }
=> this should be data: { listval: listval }
, or use public ActionResult Index(string id)
. The AJAX parameter name must match with server-side method parameter name. Also you should return JSON status instead of a view.– Tetsuya Yamamoto
Nov 22 '18 at 6:30
data: { id: listval }
=> this should be data: { listval: listval }
, or use public ActionResult Index(string id)
. The AJAX parameter name must match with server-side method parameter name. Also you should return JSON status instead of a view.– Tetsuya Yamamoto
Nov 22 '18 at 6:30
In addition, you do not do anything with the view you return (you need to update the DOM in the success callback)
– user3559349
Nov 22 '18 at 6:33
In addition, you do not do anything with the view you return (you need to update the DOM in the success callback)
– user3559349
Nov 22 '18 at 6:33
@StephenMuecke did you mean should i remove type get and put success and error function there
– kunals
Nov 22 '18 at 6:37
@StephenMuecke did you mean should i remove type get and put success and error function there
– kunals
Nov 22 '18 at 6:37
Just use
return Json()
with your collection and modify the AJAX to include success
and error
handling, no need to replace type: GET
unless you're passing an array or collection.– Tetsuya Yamamoto
Nov 22 '18 at 6:40
Just use
return Json()
with your collection and modify the AJAX to include success
and error
handling, no need to replace type: GET
unless you're passing an array or collection.– Tetsuya Yamamoto
Nov 22 '18 at 6:40
It can be still be
type: "GET",
but you need to include success function(result) { $(someElement).html(result); }
to add the view your are returning to the DOM (and you should be returning a model to the view, not using ViewBag
).– user3559349
Nov 22 '18 at 6:41
It can be still be
type: "GET",
but you need to include success function(result) { $(someElement).html(result); }
to add the view your are returning to the DOM (and you should be returning a model to the view, not using ViewBag
).– user3559349
Nov 22 '18 at 6:41
add a comment |
1 Answer
1
active
oldest
votes
You have several issues in the code:
1) The action method declared as public ActionResult Index(string listval)
while in AJAX callback you have data: { id: listval }
parameter, hence the AJAX call never reached the controller action because it called with different parameter name.
2) return View()
is not applicable while using AJAX, it is necessary to return JSON data or partial view and update target DOM element from AJAX result.
Therefore, you should change parameter name to exactly matches with AJAX data
parameter and use return Json()
:
public ActionResult Index(string id)
{
// using DRY principle, just write the same part of the query in a string variable
// and add another part depending on case value inside switch block below
string baseQuery = @"Select mt.MaterialRequestId, mt.TDate,
d.DepartmentName, it.ItemName,
mt.QtyRequested, mt.Comment,
mt.RecievedDateTime , u.UnitName from MaterialRequest mt
INNER JOIN Department d ON mt.DepartmentId = d.DepartmentId
INNER JOIN Items it ON mt.ItemId = it.ItemId
INNER JOIN Units u ON it.UnitId = u.UnitId";
switch (id)
{
case "Open":
baseQuery += " where QtyRecieved = QtyRequested";
break;
case "Partial":
baseQuery += " where QtyRecieved < QtyRequested and Void = 0";
break;
case "All":
break; // not doing anything
default: goto case "All";
}
// create a list of object from query results
var items = db.Query<MaterialDeptItemVw>(baseQuery).ToList();
// return JSON data to populate target element
return Json(items, JsonRequestBehavior.AllowGet);
}
Then modify AJAX call to update target DOM element based on returned data:
$("#Filter").change(function () {
var listval = $("select option:selected").text();
$.ajax({
type: "GET",
url: '@Url.Action("Index", "MaterialRequest")',
data: { id: listval },
success: function (result) {
// an example to update target element
$('#targetElementID').html(result);
},
error: function (xhr, status, err) {
// error handling
}
});
});
thanks for the help but i am returning the view from same method because i am entering data from same view and listing them on same page that's why i have used ViewBag if i have return JSON then how i list record on same page
– kunals
Nov 22 '18 at 7:42
The AJAX callback intended to update an element which keep staying in the same page without refreshing the page entirely. If you want to useViewBag
, you need to return aPartialView
from AJAX callback then update target DOM element.
– Tetsuya Yamamoto
Nov 22 '18 at 7:45
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53425043%2fhow-to-filter-database-records-based-on-static-dropdownlist-in-mvc-5%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You have several issues in the code:
1) The action method declared as public ActionResult Index(string listval)
while in AJAX callback you have data: { id: listval }
parameter, hence the AJAX call never reached the controller action because it called with different parameter name.
2) return View()
is not applicable while using AJAX, it is necessary to return JSON data or partial view and update target DOM element from AJAX result.
Therefore, you should change parameter name to exactly matches with AJAX data
parameter and use return Json()
:
public ActionResult Index(string id)
{
// using DRY principle, just write the same part of the query in a string variable
// and add another part depending on case value inside switch block below
string baseQuery = @"Select mt.MaterialRequestId, mt.TDate,
d.DepartmentName, it.ItemName,
mt.QtyRequested, mt.Comment,
mt.RecievedDateTime , u.UnitName from MaterialRequest mt
INNER JOIN Department d ON mt.DepartmentId = d.DepartmentId
INNER JOIN Items it ON mt.ItemId = it.ItemId
INNER JOIN Units u ON it.UnitId = u.UnitId";
switch (id)
{
case "Open":
baseQuery += " where QtyRecieved = QtyRequested";
break;
case "Partial":
baseQuery += " where QtyRecieved < QtyRequested and Void = 0";
break;
case "All":
break; // not doing anything
default: goto case "All";
}
// create a list of object from query results
var items = db.Query<MaterialDeptItemVw>(baseQuery).ToList();
// return JSON data to populate target element
return Json(items, JsonRequestBehavior.AllowGet);
}
Then modify AJAX call to update target DOM element based on returned data:
$("#Filter").change(function () {
var listval = $("select option:selected").text();
$.ajax({
type: "GET",
url: '@Url.Action("Index", "MaterialRequest")',
data: { id: listval },
success: function (result) {
// an example to update target element
$('#targetElementID').html(result);
},
error: function (xhr, status, err) {
// error handling
}
});
});
thanks for the help but i am returning the view from same method because i am entering data from same view and listing them on same page that's why i have used ViewBag if i have return JSON then how i list record on same page
– kunals
Nov 22 '18 at 7:42
The AJAX callback intended to update an element which keep staying in the same page without refreshing the page entirely. If you want to useViewBag
, you need to return aPartialView
from AJAX callback then update target DOM element.
– Tetsuya Yamamoto
Nov 22 '18 at 7:45
add a comment |
You have several issues in the code:
1) The action method declared as public ActionResult Index(string listval)
while in AJAX callback you have data: { id: listval }
parameter, hence the AJAX call never reached the controller action because it called with different parameter name.
2) return View()
is not applicable while using AJAX, it is necessary to return JSON data or partial view and update target DOM element from AJAX result.
Therefore, you should change parameter name to exactly matches with AJAX data
parameter and use return Json()
:
public ActionResult Index(string id)
{
// using DRY principle, just write the same part of the query in a string variable
// and add another part depending on case value inside switch block below
string baseQuery = @"Select mt.MaterialRequestId, mt.TDate,
d.DepartmentName, it.ItemName,
mt.QtyRequested, mt.Comment,
mt.RecievedDateTime , u.UnitName from MaterialRequest mt
INNER JOIN Department d ON mt.DepartmentId = d.DepartmentId
INNER JOIN Items it ON mt.ItemId = it.ItemId
INNER JOIN Units u ON it.UnitId = u.UnitId";
switch (id)
{
case "Open":
baseQuery += " where QtyRecieved = QtyRequested";
break;
case "Partial":
baseQuery += " where QtyRecieved < QtyRequested and Void = 0";
break;
case "All":
break; // not doing anything
default: goto case "All";
}
// create a list of object from query results
var items = db.Query<MaterialDeptItemVw>(baseQuery).ToList();
// return JSON data to populate target element
return Json(items, JsonRequestBehavior.AllowGet);
}
Then modify AJAX call to update target DOM element based on returned data:
$("#Filter").change(function () {
var listval = $("select option:selected").text();
$.ajax({
type: "GET",
url: '@Url.Action("Index", "MaterialRequest")',
data: { id: listval },
success: function (result) {
// an example to update target element
$('#targetElementID').html(result);
},
error: function (xhr, status, err) {
// error handling
}
});
});
thanks for the help but i am returning the view from same method because i am entering data from same view and listing them on same page that's why i have used ViewBag if i have return JSON then how i list record on same page
– kunals
Nov 22 '18 at 7:42
The AJAX callback intended to update an element which keep staying in the same page without refreshing the page entirely. If you want to useViewBag
, you need to return aPartialView
from AJAX callback then update target DOM element.
– Tetsuya Yamamoto
Nov 22 '18 at 7:45
add a comment |
You have several issues in the code:
1) The action method declared as public ActionResult Index(string listval)
while in AJAX callback you have data: { id: listval }
parameter, hence the AJAX call never reached the controller action because it called with different parameter name.
2) return View()
is not applicable while using AJAX, it is necessary to return JSON data or partial view and update target DOM element from AJAX result.
Therefore, you should change parameter name to exactly matches with AJAX data
parameter and use return Json()
:
public ActionResult Index(string id)
{
// using DRY principle, just write the same part of the query in a string variable
// and add another part depending on case value inside switch block below
string baseQuery = @"Select mt.MaterialRequestId, mt.TDate,
d.DepartmentName, it.ItemName,
mt.QtyRequested, mt.Comment,
mt.RecievedDateTime , u.UnitName from MaterialRequest mt
INNER JOIN Department d ON mt.DepartmentId = d.DepartmentId
INNER JOIN Items it ON mt.ItemId = it.ItemId
INNER JOIN Units u ON it.UnitId = u.UnitId";
switch (id)
{
case "Open":
baseQuery += " where QtyRecieved = QtyRequested";
break;
case "Partial":
baseQuery += " where QtyRecieved < QtyRequested and Void = 0";
break;
case "All":
break; // not doing anything
default: goto case "All";
}
// create a list of object from query results
var items = db.Query<MaterialDeptItemVw>(baseQuery).ToList();
// return JSON data to populate target element
return Json(items, JsonRequestBehavior.AllowGet);
}
Then modify AJAX call to update target DOM element based on returned data:
$("#Filter").change(function () {
var listval = $("select option:selected").text();
$.ajax({
type: "GET",
url: '@Url.Action("Index", "MaterialRequest")',
data: { id: listval },
success: function (result) {
// an example to update target element
$('#targetElementID').html(result);
},
error: function (xhr, status, err) {
// error handling
}
});
});
You have several issues in the code:
1) The action method declared as public ActionResult Index(string listval)
while in AJAX callback you have data: { id: listval }
parameter, hence the AJAX call never reached the controller action because it called with different parameter name.
2) return View()
is not applicable while using AJAX, it is necessary to return JSON data or partial view and update target DOM element from AJAX result.
Therefore, you should change parameter name to exactly matches with AJAX data
parameter and use return Json()
:
public ActionResult Index(string id)
{
// using DRY principle, just write the same part of the query in a string variable
// and add another part depending on case value inside switch block below
string baseQuery = @"Select mt.MaterialRequestId, mt.TDate,
d.DepartmentName, it.ItemName,
mt.QtyRequested, mt.Comment,
mt.RecievedDateTime , u.UnitName from MaterialRequest mt
INNER JOIN Department d ON mt.DepartmentId = d.DepartmentId
INNER JOIN Items it ON mt.ItemId = it.ItemId
INNER JOIN Units u ON it.UnitId = u.UnitId";
switch (id)
{
case "Open":
baseQuery += " where QtyRecieved = QtyRequested";
break;
case "Partial":
baseQuery += " where QtyRecieved < QtyRequested and Void = 0";
break;
case "All":
break; // not doing anything
default: goto case "All";
}
// create a list of object from query results
var items = db.Query<MaterialDeptItemVw>(baseQuery).ToList();
// return JSON data to populate target element
return Json(items, JsonRequestBehavior.AllowGet);
}
Then modify AJAX call to update target DOM element based on returned data:
$("#Filter").change(function () {
var listval = $("select option:selected").text();
$.ajax({
type: "GET",
url: '@Url.Action("Index", "MaterialRequest")',
data: { id: listval },
success: function (result) {
// an example to update target element
$('#targetElementID').html(result);
},
error: function (xhr, status, err) {
// error handling
}
});
});
answered Nov 22 '18 at 6:56
Tetsuya YamamotoTetsuya Yamamoto
16.2k42240
16.2k42240
thanks for the help but i am returning the view from same method because i am entering data from same view and listing them on same page that's why i have used ViewBag if i have return JSON then how i list record on same page
– kunals
Nov 22 '18 at 7:42
The AJAX callback intended to update an element which keep staying in the same page without refreshing the page entirely. If you want to useViewBag
, you need to return aPartialView
from AJAX callback then update target DOM element.
– Tetsuya Yamamoto
Nov 22 '18 at 7:45
add a comment |
thanks for the help but i am returning the view from same method because i am entering data from same view and listing them on same page that's why i have used ViewBag if i have return JSON then how i list record on same page
– kunals
Nov 22 '18 at 7:42
The AJAX callback intended to update an element which keep staying in the same page without refreshing the page entirely. If you want to useViewBag
, you need to return aPartialView
from AJAX callback then update target DOM element.
– Tetsuya Yamamoto
Nov 22 '18 at 7:45
thanks for the help but i am returning the view from same method because i am entering data from same view and listing them on same page that's why i have used ViewBag if i have return JSON then how i list record on same page
– kunals
Nov 22 '18 at 7:42
thanks for the help but i am returning the view from same method because i am entering data from same view and listing them on same page that's why i have used ViewBag if i have return JSON then how i list record on same page
– kunals
Nov 22 '18 at 7:42
The AJAX callback intended to update an element which keep staying in the same page without refreshing the page entirely. If you want to use
ViewBag
, you need to return a PartialView
from AJAX callback then update target DOM element.– Tetsuya Yamamoto
Nov 22 '18 at 7:45
The AJAX callback intended to update an element which keep staying in the same page without refreshing the page entirely. If you want to use
ViewBag
, you need to return a PartialView
from AJAX callback then update target DOM element.– Tetsuya Yamamoto
Nov 22 '18 at 7:45
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53425043%2fhow-to-filter-database-records-based-on-static-dropdownlist-in-mvc-5%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
data: { id: listval }
=> this should bedata: { listval: listval }
, or usepublic ActionResult Index(string id)
. The AJAX parameter name must match with server-side method parameter name. Also you should return JSON status instead of a view.– Tetsuya Yamamoto
Nov 22 '18 at 6:30
In addition, you do not do anything with the view you return (you need to update the DOM in the success callback)
– user3559349
Nov 22 '18 at 6:33
@StephenMuecke did you mean should i remove type get and put success and error function there
– kunals
Nov 22 '18 at 6:37
Just use
return Json()
with your collection and modify the AJAX to includesuccess
anderror
handling, no need to replacetype: GET
unless you're passing an array or collection.– Tetsuya Yamamoto
Nov 22 '18 at 6:40
It can be still be
type: "GET",
but you need to includesuccess function(result) { $(someElement).html(result); }
to add the view your are returning to the DOM (and you should be returning a model to the view, not usingViewBag
).– user3559349
Nov 22 '18 at 6:41