How to filter database records based on static dropdownlist in mvc 5











up vote
0
down vote

favorite












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();
}









share|improve this question






















  • 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 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 at 6:33










  • @StephenMuecke did you mean should i remove type get and put success and error function there
    – kunals
    Nov 22 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 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 at 6:41















up vote
0
down vote

favorite












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();
}









share|improve this question






















  • 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 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 at 6:33










  • @StephenMuecke did you mean should i remove type get and put success and error function there
    – kunals
    Nov 22 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 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 at 6:41













up vote
0
down vote

favorite









up vote
0
down vote

favorite











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();
}









share|improve this question













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






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 22 at 6:28









kunals

13




13












  • 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 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 at 6:33










  • @StephenMuecke did you mean should i remove type get and put success and error function there
    – kunals
    Nov 22 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 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 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 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 at 6:33










  • @StephenMuecke did you mean should i remove type get and put success and error function there
    – kunals
    Nov 22 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 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 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 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 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 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 at 6:33












@StephenMuecke did you mean should i remove type get and put success and error function there
– kunals
Nov 22 at 6:37




@StephenMuecke did you mean should i remove type get and put success and error function there
– kunals
Nov 22 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 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 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 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 at 6:41












1 Answer
1






active

oldest

votes

















up vote
0
down vote













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





share|improve this answer





















  • 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 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 at 7:45











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',
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
});


}
});














draft saved

draft discarded


















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








up vote
0
down vote













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





share|improve this answer





















  • 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 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 at 7:45















up vote
0
down vote













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





share|improve this answer





















  • 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 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 at 7:45













up vote
0
down vote










up vote
0
down vote









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





share|improve this answer












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






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 22 at 6:56









Tetsuya Yamamoto

13.8k41939




13.8k41939












  • 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 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 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 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 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 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 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 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 at 7:45


















draft saved

draft discarded




















































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.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • 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.




draft saved


draft discarded














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





















































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







Popular posts from this blog

A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

Calculate evaluation metrics using cross_val_predict sklearn

Insert data from modal to MySQL (multiple modal on website)