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












0















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 '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 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
















0















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 '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 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














0












0








0








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 '18 at 6:28









kunalskunals

287




287













  • 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











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











  • 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



















  • 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











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











  • 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

















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












1 Answer
1






active

oldest

votes


















1














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 '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











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


}
});














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









1














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 '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
















1














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 '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














1












1








1







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 '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 use ViewBag, you need to return a PartialView 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











  • 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

















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




















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.




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

"Incorrect syntax near the keyword 'ON'. (on update cascade, on delete cascade,)

Alcedinidae

Origin of the phrase “under your belt”?