Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
Question
Friday, June 8, 2018 7:53 AM
Hello I need to implement search functionality in my mvc app. I have a dropdown list and a search button. I need to display data when that button is click.
here is my view
<div class="form-group">
<label class="col-md-4 control-label">Departments</label>
<div class="col-md-12">
@Html.DropDownList("ddlDep", null, "-'All Departments-", new { @class = " form-control", Value = "0" })
<br />
</div>
</div>
<div><input type="button" id="btnSearch" value="Search" class="btn btn-success" /></div>
<table id="deptable">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Descption</th>
<th>Date</th>
</tr>
</thead>
<tbody></tbody>
</table>
My ajax code
<script type="text/javascript">
$(document).ready(function () {
$("#btnSearch").click(function () {
$.ajax({
type: 'GET',
url: "Home/SearchResults",
datatype: JSON,
data: {
'depid': $("#ddlDep").val()
},
success: function (data) {
$('#deptable tbody').empty();
$.each(data, function (i, item) {
var rows = "<tr>"
+ "<td>" + item.ID + "</td>"
+ "<td>" + item.Description + "</td>"
+ "<td>" + item.EndDate + "</td>"
//+ "<td>" + item.active + "</td>"
+ "</tr>";
$('#deptable tbody').append(rows);
});
},
error: function (Result) {
alert("Error");
}
});
});
});
</script>
My controller
[HttpGet]
public JsonResult SearchResults(int depid)
{
List<DEP> depsq = new List<DEP>();
depsq = db.departments.Where(x => x.ID == depid.ToString()).ToList();
return Json(depsq, JsonRequestBehavior.AllowGet);
}
When I debug it never goes to controller
Any idea
All replies (12)
Friday, June 8, 2018 1:47 PM âś…Answered
I create a sample for you , please first try my code and if was correct then change to your needs
in View
@{
Layout = null;
}
<script src="~/Scripts/jquery-1.10.2.js"></script>
<div class="form-group">
<label class="col-md-4 control-label">Departments</label>
<div class="col-md-12">
<select id="ddlDep">
<option value="0">-'All Departments-</option>
<option value="1">Computer</option>
<option value="2">Math</option>
</select>
<br />
</div>
</div>
<div><input type="button" id="btnSearch" value="Search" class="btn btn-success" /></div>
<table id="deptable">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Descption</th>
<th>Date</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
$("#btnSearch").click(function () {
$.ajax({
type: 'GET',
url: "@Url.Action("SearchResults","Home")",
datatype: "json",
data: {
'depid': $("#ddlDep").val()
},
success: function (data) {
var rows ="";
$.each(data.data, function (k, v) {
/// do stuff
rows += "<tr>"
+ "<td>" + v.ID + "</td>"
+ "<td>" + v.Description + "</td>"
+ "<td>" + v.EndDate + "</td>"
+ "</tr>";
});
$('#deptable tbody').append(rows);
},
error: function (Result) {
alert("Error");
}
});
});
});
</script>
Controller
public class HomeController : BaseController
{
public ActionResult Index(string Msg)
{
return View();
}
[HttpGet]
public JsonResult SearchResults(int depid)
{
/*List<DEP> depsq = new List<DEP>();
depsq = db.departments.Where(x => x.ID == depid.ToString()).ToList();
return Json(depsq, JsonRequestBehavior.AllowGet);*/
List<MyItems> list=new List<MyItems>()
{
new MyItems(){ID = "id",Description = "Description",EndDate = DateTime.Now.ToString()},
new MyItems(){ID = "id",Description = "Description",EndDate = DateTime.Now.ToString()},
};
return Json(new { data = list }, JsonRequestBehavior.AllowGet);
}
public class MyItems
{
public string ID { get; set; }
public string Description { get; set; }
public string EndDate { get; set; }
}
}
Friday, June 8, 2018 9:17 AM
Hi mspace ,
Please try to modify your path to :
url: "/Home/SearchResults",
If that not solve your issue , please use F12 develop tools to trace the request , check the error message and post here .
Best Regards,
Nan Yu
Friday, June 8, 2018 9:25 AM
Hello thank you for your reply
I try your code but no luck.
In console the only error I get is
TypeError: $.validator is undefined
Friday, June 8, 2018 1:01 PM
hi
you have a mistake in your script, please change your script to below :
<script type="text/javascript">
$(document).ready(function () {
$("#btnSearch").click(function () {
$.ajax({
type: 'GET',
url: "@Url.Action("SearchResults","Home")",
datatype: "json",
data: {
'depid': $("#ddlDep").val()
},
success: function (data) {
var rows = "<tr>"
+ "<td>" + item.ID + "</td>"
+ "<td>" + item.Description + "</td>"
+ "<td>" + item.EndDate + "</td>"
//+ "<td>" + item.active + "</td>"
+ "</tr>";
$('#deptable tbody').append(rows);
},
error: function (Result) {
alert("Error");
}
});
});
});
</script>
now if you put a break point in your action , you can catch it after click on button
Friday, June 8, 2018 1:10 PM
thank you for your reply,
I tried your code but nothing happens...
It throws the Error alert
thanks again
Friday, June 8, 2018 1:38 PM
Hello all,
@mspace => it's works fine for me here is it the sample provides by other users :
view :
<h4>Index</h4>
<script src="~/Scripts/jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnSearch').click(function () {
$.ajax({
type: 'GET',
url: "@Url.Action("SearchResults","SearchSample")", // method name - controller name
datatype: JSON,
data: { 'depid': $("#ddlDep").val() },
success: function (data) {
$('#deptable tbody').empty();
$.each(data, function (i, item) {
var rows = "<tr>"
+ "<td>" + item.ID + "</td>"
+ "<td>" + item.Name + "</td>"
+ "</tr>";
$('#deptable tbody').append(rows);
});
},
error: function (Result) {
alert("Error");
}
});
});
});
</script>
<p>
<select id="ddlDep">
<option id="1">1</option>
<option id="2">2</option>
</select>
<input type="text" id="txtSearch" />
<br />
<input type="button" id="btnSearch" value="Search" />
<table id="deptable">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody></tbody>
</table>
</p>
and on the controller i have this (it's my sample)
[HttpGet]
public ActionResult SearchResults(string depid)
{
var person = Models.Person.GetPerson().Where(ev => ev.Name.Contains(depid));
return Json(person, JsonRequestBehavior.AllowGet);
}
put a break point inside the action searchResults and see if the debugger stop here
if the debugger doesn't stop you have probably a problem on the ajax call
tell us ....
Monday, June 11, 2018 6:34 AM
Hello vahid,
I tried to reproduced your code in a clean view but I still get the "Error" message from the ajax call. It doesnt goes to controller.
thank you
Monday, June 11, 2018 6:54 AM
Hello all,
@mspace => are you sure the method SearchResults exist in the HomeController ?
another question, put a break point inside the method SearchResults, and see if the visual studio debugger stop on it ...
tell us
Monday, June 11, 2018 6:57 AM
please put your complete code here
Monday, June 11, 2018 6:58 AM
Hello,
yes in the home controller there is the method SearchResults.
Monday, June 11, 2018 10:13 AM
If there is a method call SearchResults in your homecontroller i suppose the problem come in this method.
Put a break point inside the method, and see if the debugger is well stop.
if yes, comment some line in your js as this for example :
+ "<td>" + item.ID + "</td>"
//+ "<td>" + item.Description + "</td>"
//+ "<td>" + item.EndDate + "</td>"
//+ "<td>" + item.active + "</td>"
just display the id and see result
No, if your put a break point and visual studio doesn't stop ...i have no idea about the problem WITHOUT the code ...
Monday, June 11, 2018 11:03 AM
thank you it works now I had some errors in my code typos and in the query.