I tried to implement a simple search method with ajax and Jquery, to search for entities "FitnessGoal" which are created by the user. Try to implement it by myself but when searching does not return anything, are my ajax code and method correct?
This is the view index:
@model IEnumerable<FitnessWebApplication.Models.FitnessGoals>
@{
ViewBag.Title = "Index";
}
<h2>Your Fitness Goals</h2>
<div>
<b>Search By:</b>
<select id="SearchBy">
<option value="Name">Name</option>
<option value="ID">ID</option>
</select><br /><br />
@Html.TextBox("Search")<input type="submit" id="SearchBtn" value="Search" /><br /><br />
</div>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Goal)
</th>
<th>
@Html.DisplayNameFor(model => model.StartDate)
</th>
<th>
@Html.DisplayNameFor(model => model.FinishDate)
</th>
<th>
@Html.DisplayNameFor(model => model.Weight) (kg)
</th>
<th>
@Html.DisplayNameFor(model => model.Weight) (kg)
</th>
<th></th>
</tr>
<tbody id="DataSearching">
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Goal)
</td>
<td>
@Html.DisplayFor(modelItem => item.StartDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.FinishDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.Weight) kg
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
@Html.ActionLink("Details", "Details", new { id = item.ID }) |
@Html.ActionLink("Delete", "Delete", new { id = item.ID })
</td>
</tr>
}
</tbody>
</table>
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function () {
$("#SearchBtn").click(function () {
var SearchBy = $("#SearchBy").val();
var SearchValue = $("#Search").val();
var SetData = $("#DataSearching").val();
SetData.html("");
$.ajax({
type: "post",
url: "/Home/GetSearchingData?SearchBy=" + SearchBy + "&SearchValue=" + SearchValue,
contentType: "html",
success: function (result) {
if (result.length == 0) {
setData.append('<tr style="color:red"><td colspan="3">No match Data</td></tr>')
}
else {
$.each(result, function (index, value) {
var Data = "<tr>" +
"<td>"
+ value.Name +
"</td>"
"<td>"
+ value.Goal +
"</td>"
"<td>"
+ value.StartDate +
"</td>"
"<td>"
+ value.FinishDate +
"</td>"
"<td>"
+ value.Weight +
"</td>"
"</tr>"
SetData.append(Data);
})
}
}
})
});
});
</script>
The FitnessGoalsController controller search method:
private ApplicationDbContext db = new ApplicationDbContext();
public JsonResult GetSearchingData(string SearchBy, string SearchValue)
{
List<FitnessGoals> FitnessGoals = new List<FitnessGoals>();
if(SearchBy == "ID")
{
try
{
int Id = Convert.ToInt32(SearchValue);
FitnessGoals = db.FitnessGoals.Where(x => x.ID == Id || SearchValue == null).ToList();
}
catch (FormatException)
{
Console.WriteLine("{0} is Not a ID", SearchValue);
}
return Json(FitnessGoals, JsonRequestBehavior.AllowGet);
}
else
{
FitnessGoals = db.FitnessGoals.Where(x => x.Name.Contains(SearchValue) || SearchValue == null).ToList();
return Json(FitnessGoals, JsonRequestBehavior.AllowGet);
}
}
by using the "Search" button I skip the following exception:
Uncaught TypeError: SetData.html is not a function
at HTMLInputElement.<anonymous> (FitnessGoals:175)
at HTMLInputElement.dispatch (VM432 jquery-1.12.4.js:5226)
at HTMLInputElement.elemData.handle (VM432 jquery-1.12.4.js:4878)