E tratado de implementar un simple metodo de busqueda con ajax y Jquery, para buscar por entidades "FitnessGoal" las cuales son creadas por el usuario. Trate de implementarlo por mi mismo pero al buscar no regresa nada, son correctos mi metodo y codigo ajax?
Esta es la 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>
El metodo para buscar del controller FitnessGoalsController:
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);
}
}
al usar el boton "Search" me salta la siguiente 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)
$("#DataSearching").html(Data)
o$("#DataSearching").append(Data)
noSetData.append(Data);
– Emeeus el 21 ago. 18 a las 18:41